Redesigning our Mobile App

I am the designer for ‘Shifu’, a mobile application available on the Google Play Store. Shifu is a context aware application which aims at providing the the user information that they need at the right time.

In the beginning of this year we decided to redesign our application. We refined almost all the components including the navigation’s, grids, typography & visuals. A redesign was an ambitious move.

A product evolves with the ever changing needs and practises of the users and one of the greatest opportunities a redesign provides is, to analyse the decisions that you have taken in the past and improving on the things that haven’t been able to communicate their message to the user as clearly as we would like.

So here’s the process we followed to make the redesign possible.

Step 1: Studying and analysing the current product.

Building a great application requires understanding its users and adapting according to their needs, so we started with the analytics. A primary study was conducted to understand the overall usage of the application. This enabled us to know how users interact with our application, what they expected from the various features and what patterns they follow. Which parts of the application are used the most and which ones are not creating any interest. This helped us determine where we needed to focus our attention and which flows needed to be simplified.

In one instance, we found out that most of our users were skipping the on boarding process, leaving them confused when they landed on the home screen. Our observations from the user study told us that the first screen was the culprit. There was too much information for the user to digest at the very onset. From our learnings from this study we simplified the on boarding process in this version by making it shorter and adding more visual cues than text. The result is a whopping 75% increase in number of user going through the complete on boarding .

Step 2: Identifying the core utility of the product

We have a bundle of features and have often asked ourselves what’s that one functionality that we really want to focus on? This was crucial for a redesign. The aim of undertaking this step is to compare what we set out to do with what we are doing right now and reconciling the differences.

At Shifu, we wanted to focus on presenting information that is useful to the users in their current context without them having to look it up from various sources. This made us aware of the fact that we need to focus more on how and when this information in terms of features or enhancements is to be presented to the user.

Step 3: Planning for the new features to be introduced in near future.

Our product has an iterative process. Almost every four weeks a new version of Shifu is released. Fixes go out fast and new features are introduced at the same pace. This needs our design to be well organised and the team to knowledgable about each and every aspect of the product so that we can push the design in such a short frame of time. Its important to realise that the choices that we make today are going to impact the design of tomorrow so the design needs to be accommodating enough to absorb the near future changes, elegantly.

Step 4: Wire framing and Prototyping

Wire framing is to app development what structural plans are to construction, sure you can work without them, but the build will just be waiting for its impending crash.

After the long and at times excruciating discussions with the product and engineering team finally decided the direction we wanted to steer Shifu in and it was time to start jotting down the tiny little details of the product and start giving it a shape.

We split the application into its core features, the context aware stream of information, the reminder creation & viewing. Taking cues from the user studies we started defining the flows of these screens and how they would correlate.

At this stage we determine how the information would flow in the entire screen to a specific element on it. For example, to display the information on the home screen we decided to use cards because they could present information using various elements like text & visual, conveniently. On the other hand we decided to stick with a list for the Reminders screen as it would provide a continuous flow of a large amount of information to the user to scan the reminders by their type and text.

To get a better understanding of the flow we began prototyping the design. We started with the traditional pen and paper prototyping and moved on to a high fidelity prototype using softwares like Proto.io or Flinto. At this stage, we also identified if there were any missing flows or some element that we hadn’t considered and corrected them.

Step 5: Defining the Visual direction.

This brings us to my personal favourite part of the entire process, the visual design.

Somewhere around this time Google released its new design language, Material. It looked promising and we wanted to understand the ways in which this new design language is going to impact our visual direction.

Shifu is a rather colourful application and we wanted to maintain its playfulness and identity. Material designs guidelines matched with our philosophy as it was bright and bold. Having said that we still had to be careful about how and to what extent we apply it directly because we wanted to preserve the personality of our application.

When you start reading the guidelines, you are introduced to tons of technically sound data which is backed by millions of users like the 12-column grid layout, the touch targets and 24dp iconography. These principles can give you a strong base to build on, but there is only so much that any set of guidelines or principles can do. Ultimately, it’s the designer’s job to decide what’s best for the product and build upon the guides by adding the products personality to them.

The goal for this redesign was to make Shifu lighter and faster. We got rid of the strong shadowing and made the colours more vibrant. We added more breathing space to the overall interface.

A redesign is also a wonderful opportunity to remove some inconsistencies in the product. For us it was the iconography. The entire library of the icons was revised in this version and the new set was made to be more consistent in terms of colour and weight. It’ might amuse the uninitiated, but such tiny details make your application look cohesive and inviting.

Step 6: Animations and Interaction

It’s hard to grab the user’s attention on a 4” screen. Using meaningful interactions and animations you can direct the user’s attention to the desired element. Through motions you can make the user understand the hierarchy of the screens, its elements and this provides visual continuity.

This step involved a lot of experimenting in terms of timing and effects to see what fit best. At this stage it was important to sit down with the developer and figure out the CPU usage of the animations and whether they were scaleable for all devices in order to achieve the desired effect without slowing down the device.

Step 7: Asset production and testing

The final step in the redesign was the production of assets according to the varying pixel densities and dimensions supported and speccing the design.

It is important to test your UI elements on several screen sizes. Something that looks fine on a bigger screen might breakdown on a smaller one. Since android comes with a multitude of devices, a handy way to test can be looking at two devices with most varied dimensions in each density.

Some final thoughts…

We had about 2 months to redesign, implement and release the final output. A lot of things that we planned for this version didn’t make it to the play store and a lot that we didn’t are there now. The process was chaotic at times, but filled with learning. It gave me an opportunity to understand what went well and what needs to be improved next time.

Feel free to share your thoughts with me @89Shruti