© 2019 by Jason CT Yang. 

Project Overview

About CM Transfer

CM Transfer is an Android file transfer app created by Cheetah Mobile. Without internet connection, the app allows people in developing countries or places with inaccessible Wi-Fi to easily share files on smartphone. CM Transfer supports files in any format and is able to transfer apps, HD videos, photos, audios and documents. It has 5 million+ Installs on Play Store.

Problem Statement

Project - Handoff with Fragmented Background Context

The project was originally handled by our team in Beijing, and it was handed
off to us in the middle of November 2017. There were some problems during
the handover: 

  • CM Transfer hasn’t been maintained for more than a year. 

  • Most designers and product managers involved had already left the company, we struggled to understand the product strategy and background context from the previous team.

  • There was no data record to track user behavior. 

  • Design files were incomplete and outdated, the last update was March 2016.

Product - Aged Design with Cluttered Coding

After the handoff, the product was reviewed by several different departments in Taipei. We were not satisfied with the current design for the following reasons:

  • Product managers - Product goals are not clear enough. 

  • Designers - The interaction and UI design are far behind, in comparison with other products by Cheetah Mobile. 

  • Developers - Code is in a frustrating cluttered mess.

Project Goal

Redesign the Product

  • Redesign the transfer process - Emphasizing the transaction is between people, not the device.

  • Shorten the development process - Collect data from quick releases in order to do rapid modifications.

Business Goal

Ad Exposure & Exclusive Membership

We have not seen a clear profit model in the current design. The new strategy is to understand user behavior through data analysis, and from there we design the following two profit models:

  • Develop a proper ad display scenario

  • Offer exclusive membership service

Users & Audience

People in Wi-Fi Inconvenient Countries

From our research, we learned that a majority of our current users are from Africa, along with a small number from South America and Southeast Asia. However, as these markets are small, we aim to target and expand to India, where there are large demands and potential users.

Design Challenge

Release a New Version within One Month

Project scope and requirements are as below:

  • Design a rapid developing process that works for product managers and developers. 

  • Build a development system on multiple platforms like Zeplin, Trello and Slack.  

  • Simplify user flow 

  • Redesign UI scheme that helps users to understand different levels of content importance, such as visual hierarchy, color contrast, and design consistency. 

  • Rebuild design files from illustrator and photoshop to sketch.

My Role

Independent designer partnered closely with 2 product managers and tech leads. Worked firmly with 6+ developers in implementing phase. Oversee projects through all the stages of development including product strategy, branding, user flow, Hi-fi mockup, and project management. Took full ownership of the product to ensure on-time project launch.

Key Deliverables

A number of deliverables were required for the project, including:

  • Branding 

  • User flow

  • High-fi mockups

  • Feature graphic

Design Process

Developing process:

 

The developing process ran through 4 phases within 4 weeks:

  • Discover / 0.5 Week

    • Understand the current product problems (users, development)

    • Competitive Analysis

  • Define / 0.5 Week

    • Oversee user flow

    • Defined the target audience ​

  • Delivery / 2 Weeks

    • Design execution- deliver Hi-fi mockups by phases 

    • Engineer execution- Build design components

  • QA Test  / 1 Week
    Ensure shipping features with a high-quality bar

Competitive Analysis

Lost Competitiveness

As we hadn’t maintained the product for 8 months, many tech companies had already grown the file transfer business to a further field. Google Files Go, SHAREit and Xender were the major three identified as direct competitors, offering similar or even better service than ours. The MVP of the redesign is to match the features with our competitors and quickly get feedback. 

One of the business goals from our product manager is that we need to get more attention from the Indian market.

Problems in Old User Flow

A walkthrough of the old user flow allows us to quickly understand the context and identify problems: 

  • At the first use, asking users to identify sender and receiver role before the start of file transfer was confusing.   

  • There is no way to exit if the user fails to get a connection with the sender.

  • There is no cancel option for the receiver if the sender chooses the wrong person, and vice versa.

  • During a connection failure, it is odd that the app actually guides user to third party apps to complete the transfer.

Solutions in New User Flow

After the discussion with the product managers, we came up with the solutions for the old flow problems:

  • By beginning the file transfer process with tips and tutorials, the “start transfer” button helps users to better understand the relationship between sender and receiver before proceeding to the next step.

  • Clear cancel option if the receiver fails to connect with the sender.

  • Clear cancel option if the sender chooses the wrong person, and vice versa.

  • Instead of guiding users to third-party apps during a connection failure, status of failed connection is clearly diagnosed and users have the option to search again.

Solution

Straightforward Sharing Process

With only 2 weeks for design execution, wireframes and low-fi mockups weren’t required. We were simultaneously finding solutions while designing hi-fi mockups. We redesigned the transfer process to be like a chat room, an interface that users are already familiar with. The redesign aims to provide an easy, straightforward and casual file sharing process, mimicking the experience of a chat room. Below are examples of problems and solutions:

Old & New comparison

Landing page

Visual solutions: 

  • Simplified to only one call
    to action

  • Friendly illustration of instruction (Only shows the first 5 times)

  • Simplified and isolated toolbar, separated from the content

  • Better visual hierarchy

UX solutions:

  • Simplified information,
    only one action at a time

Visual problems: 

  • Unclear call to action

  • Top graphic takes more than half the space to communicate irrelevant information

  • No visual hierarchy 

  • Too many elements in the toolbar, 3 action icons, logotype and brand icon 

UX problems:

  • No instruction for new users

  • Confusing copy ”Send CM Transfer to other phone”, it is unclear what it is for

Choose receiver 

Visual solutions: 

  • Clear listview design of receivers

  • Instructional toolbar title

  • Different profile colors to differentiate receivers

UX solutions:

  • Clear status of the current search process: devices
    ready to connect, still searching, etc...

Visual problems: 

  • Unclear device selection, all the receivers look the same

  • No visual hierarchy

UX problems:

  • It doesn’t show the devices that are still being searched 

  • Confusing options of other file transfer apps

Transferring files 

Visual solution: 

  • Duplicate chat room file transfer experience to help users to easily get started

UX solutions:

  • Each file transfer action is clearly labeled with time, date, and size. This also helps users to easily come back to find the files that have been transferred.

  • Files transfer can be both ways

Visual problems: 

  • Messy interface: the top % data displays the transfer progress of the entire batch, the bottom progress bar displays the transfer speed and progress of an individual file that is being transferred at the moment.

  • No visual hierarchy 

UX problems:

  • File transfer is only one way

  • If the transfer process fails, users need to start over

Feature We Added

Transfer history

  • Transferred files can be accessed offline

  • Shortcuts to recent contacts

Group sharing
File transfer with multiple people

Edit user name

User can input their name from the very beginning, this helps to identify themselves 

Connection status

In internal user research, many users complained about the insecure feeling with an unidentified connection status. By adding a process status screen, it creates transparency and allows users to know what exactly is happening.

Tutorial

Friendly instructional illustrations to guide users.

Guiding users to share new version

Without the internet, users are able to share updates to users with older versions.

Design Expanding

To maintain design consistency, the same design languages are implemented to the dialogue.

Problem in Old Google Graphics

Users can not understand the actual transfer process and product features through these graphics.

Solution in New Google Graphics

Google Play continuous graphics enhance the way of showing the transfer process. Strong color contrast and illustrations highlight the product features and create a more casual and friendly vibe.

Polish Launcher Icon

Visual solutions:

  • Smaller icon and more breathing space.

  • More contrast between icon and tile.

  • Rounded square displays a less serious, more friendly vibe.

Visual problems: 

  • The flash icon is too big, the non-existence breathing space is overwhelming for the eye.

  • Not enough contrast between tile and icon, especially on the phone.

  • Gradient shadow treatment is hard to see on the phone. 

Outcome

Boosted New Downloads But Low Growth in DAU

The result of the redesign was an increase in the number of new downloads, however, our DAU was not improved. We hypothesized the reason behind the low growth in DAU is because most of our users are using the app without internet. Our next steps are to continue to increase the new downloads, and develop new features that will take our users online.

Lessons Learned 

  • The jump from old to new version was too fast, users with older version could not get used to the new flow, we should have an interim version in between.

  • The compatibility between users with the new and old version wasn’t the best.

  • Only focusing on competitor apps, we overestimated our market goals. There are many Android phones with pre-installed file transfer apps that we didn’t take into consideration, such as Sony and Xiaomi

What We can Improve

As our products are meant to be used offline, the feedback we receive is limited. In order to collect more data to improve the product, we must get our users online. Below are the next steps we can take: 

  • Encourage users to share new version online

  • Exclusive features that are only available online 

  • Encourage users to update online
    Collaborate with other internal product that has a membership system, such as offering a one month free trial of Security Master for new updaters at CM Transfer