Android App Redesign

(This case study is a part of my upcoming UX portfolio. Any comments and constructive criticism are more than welcome!)

One of my long term clients was a company whose product was based around a unique method of learning foreign languages.

Their service is complex, and it’s offered primarily through their website, with a limited number of features also available through companion iOS and Android apps.

The company is well known in its niche and was being used by almost a million members at the time of this project.

Over the years, I became responsible for every visual aspect of their service, which included dozens of web pages, a complex gamification system, interactive graphics, emails, offline assets and mobile apps.

In this case study, I’ll focus on the redesign of the mobile apps I worked on as a part of a small team.

Problem Overview

The company’s original goal for the iOS app was to use it to supplement learning done through the website. It was geared towards people who already used the website and were familiar with how the service worked.

This approach, combined with the idiosyncratic nature of the core features of the service, made the app very difficult to use by new users.

As the company grew and started carving out more space within in its niche, an increasing number of people began using the apps as their first touchpoint with the service. It wasn’t long before complaints and negative app reviews started to roll in.

Another serious issue cropped up when the Android version of the app was released. What happened was that the company took the original iOS app and basically transplanted it onto the Android platform. There was little effort to customize the UI for the new environment. In an age of increasingly savvy app users, this didn’t go unnoticed.

Team

I collaborated with Alex, our project manager, and our app developers — Tim (iOS) and Ivan (Android), to tackle these issues. My responsibilities included interaction design, visual design, UX strategy and content strategy.

Goals

  • Our priority was a complete overhaul of the Android app, focusing on UI redesign and improvements to the UX, especially the onboarding process. Down the road, we also planned on bringing these improvements to the iOS app, along with some minor UI adjustments.
  • Our second goal was to improve the existing apps by making select changes to areas that most adversely affected the user experience.

Challenges

We were under strong pressure to produce results fast. We also had to find a way to squeeze this project into an already full work schedule.

Design Process

We were a remote team, so we used standard industry communication and project management tools to collaborate (Slack, InVision, Basecamp, Pivotal Tracker, Skype). We wanted to be able to identify problems and iterate through solutions quickly, so that we could release updates often.

We started by analyzing the state of the existing apps. We created a development roadmap by using a mix of qualitative and quantitative data obtained from sources like Google Analytics, Mixpanel, support tickets, help forums and surveys.

The roadmap prioritized the release of critical improvements to the existing apps, while fostering continuous work on the redesign.

Specifically, our process focused on the following tasks:

  1. Streamlining the login / registration process.
  2. Onboarding implementation.
  3. Android app redesign.

1. Streamlining the Login / Registration Process

There were several issues that plagued the login / registration process:

  • It was too bulky. Every time a user needed to log in or register, they first had to swipe through four screens that advertised the core features of the app. These screens were intended to provide onboarding, but failed in doing so, since they didn’t show how to accomplish any of the tasks they referenced, and were too removed from the actual content to be of any real help.
  • The second problem was that the registration form was burdensome and cluttered. It asked for a lot of information, most of which had no influence on the behavior of the app and could therefore be collected after the sign-up.
  • There was also the issue of the Android app using iOS-style UI.
Marvel prototype showing the original log in / registration process

We took the following steps to address these issues:

  • Used this opportunity to begin applying the Material Design guidelines to the app.
  • Removed the onboarding screens, enabling the users to log in or register immediately upon opening the app.
  • Streamlined the registration process by breaking it into two steps and reducing the number of form fields.
  • Further simplified the process by incorporating social log in / register buttons.

See the end result below.

Marvel prototype showing our redesigned log in / registration process

Results

The several sources we used to gage the success of the redesign, including Mixpanel data, survey responses and user feedback on our forums, indicated a positive impact of the redesigned screens on the overall engagement with the apps.

2. Onboarding Implementation

The apps were difficult to use by people who were new to the service. We planned to address this issue in the Android redesign, but we were also considering whether or not we could afford the time to implement some sort of onboarding process into the existing apps as well.

To facilitate the decision, I performed a heuristic analysis of the app, and came up with a list of most detrimental factors to the user experience. I also worked with the project manager to compare my findings with the data from Mixpanel and support tickets which identified the top bottlenecks. In the end, I was able to come up with a concrete list of action items / pain points.

Based on these findings, I determined that the complexity of the app and its gross failure to offer direction, called for a robust onboarding process, capable of both directing the users and explaining the unique terminology and functions of the app.

The solution I came up with was an interactive in-app tutorial, consisting of overlay graphics and tooltips. It featured an avatar for the chosen language (a gamification feature found on the company’s website), which would interact with the user, explaining the specific screen the user was on and guiding them to the next step.

After confirming with our app developers that this was something they could implement relatively easily, I created guidelines defining each step of the tutorial. I worked with the project manager to refine them, before passing them to our app developers for implementation.

Sample of a document outlining the steps for the in-app tutorial
Invision prototype for the in-app tutorial

Results

The Mixpanel numbers showed users who entered the app through registration were interacting more with the app, and the surveys we sent showed positive reactions. Even though it was a stopgap measure it produced an immediate increase in app usage and better reviews in the app store.

3. Android App Redesign

In order to keep true to our approach of iterating quickly and releasing updates often, we split this project into three phases:

  • Phase 1 — UI redesign.
  • Phase 2 — Implementing onboarding and adding user-centric features (such as account management and profile settings) which existed on the website, but were never implemented in the app.
  • Phase 3 — Adding improved learning functionality, exclusive to the app.

Phase 1 was largely my responsibility. My goals were to:

  • Bring the app to native specs, by conducting comprehensive visual redesign of the UI using Material Design guidelines
  • Resolve some of the major UX issues by implementing structural and functional changes to the existing UI, but without adding new functionality to the app (which was slated for Phase 2).

I started with low fidelity sketches. I iterated through the wireframes with the team, streamlining the design, eventually creating an interactive high-fidelity prototype using Invision.

Android App user flow
Android app Information Architecture

The following are my wireframe sketches, illustrating the main issues and the solutions I came up with.

Design Comparison

Results

My team was well under way to completing Phase 1 on schedule, when sudden changes in the company structure brought the project to an unexpected halt. Soon after, despite my recommendations, the decision was made to cancel the Android project altogether and focus solely on improving its iOS counterpart.

Even though the work we put in didn’t result in a great new product we aimed for, the project was a valuable learning experience for me, both in terms of expanding my UI/UX knowledge and getting hands-on experience with a dynamic, iterative work approach.

Read my other UX case studies:

Show your support

Clapping shows how much you appreciated Goran Licanin’s story.