WhatsCall 1.0 for iOS

I design the overall Whatscall 1.0 information architecture and fix several usability problems based on the research in Berlin, Germany.

  • Information Architecture / Spec Guideline

  • 6 weeks development on 2016 Jun. 

  • Collaborated with 1 Product Manager/ 2 UI Designers/ 10 iOS Developers/ 5 Quality Analysts

Background

Whatscall for Android is an existed product with 10 million users in Google Play. Users can make free international calls with Whatscall by watching ads. With the company strategy and the research conducted by our research team, I was assigned to design Whatscall for iOS 1.0 version.

Design

Onboarding

I divide the onboarding process into three steps and help the user to expect the remaining steps by the progress bar.

I make the big title design, in order to express the current task clearly.

Moreover, I also clarify all error states,

to help the developers build the system.

Contacts

The design highlight of contacts is, when the user is landing the contacts page at the first time, Whatscall requires the permission to access the phone contacts. Therefore, I design strong visual signifiers (contrasting color and size for call-to-action buttons) to direct user. Besides, all contacts pages are designed with iOS guideline, in order to fit the user habits.

Calling Experience

 

Making free phone calls with credits which earned by watching ads, is the main feature of Whatscall. Based on our user interview conducted by research team in Berlin, we found that the usability problem of original calling experience in Whatscall for Android was that the user could only view the calling rate after taping the calling button, and there’s no way to know whether the credits was enough for the call or not, which resulted in the call usually disconnected suddenly. What’s worse, after the call ended, there’s also lack of information about how much credits was cost.

BEFORE

Hence, I conclude the above usability problems and solve them by the new design. I design the calling rate to preview on the keypad page and also shows the user available credits in the meanwhile, in order to help user predicts the available calling time. After the call is connected, Whatscall shows the available calling time and discounts it automatically. When the available time is under 3 minutes, Whatscall makes the beep sound to alert the user and highlights the remaining time with red. After the call ends, the user can view how much the credits cost on the history page.

AFTER

Other Feature

After I analyzing all elements on the credits page, I define the “available credits” is the most important information for the user, so I make it with a big area on the header to highlight. Other like settings and profile edit page are also designed with iOS guideline, to fit the user habits with simplicity design.

What I Learned

It’s my first time to build a whole new product with 20 team members in 6 weeks. As the only user experience designer, my main job was helping product manager to design all information architecture and define the hierarchy of all elements in every page. For the resource-limited and insufficient time concern, I learned to collaborate smoothly with UI designers and the engineers, to develop the best solution together.

TRY it NOW