How we revamped EDaura mobile app

Second team outcomes: Relations, gestures and animations

Throughout the 11 months prior to the idea of revamping our mobile app, our team at EDaura has been pushing out more features based on user feedback, and we’ve been talking to our users face-to-face to see what they want and need. We’ve learned who they are, what they do and how they use EDaura.

With this in mind, we decided to further enrich the experience of all those who cross paths with EDaura. Since we are a mobile-first platform, we decided to start with our own mobile app.

Expected goals from our redesigned app

After conducting interviews with management, reviewing communication such as websites and reports and performing contextual interviews with end users to discover hidden goals, we identified the following goals we want to achieve by launching our new mobile apps design:

1. Increase brand affection

We wanted to incorporate a style that strongly resonates with what EDaura is most used for so we shifted to vector-based design and layout.

2. Optimize conversion rate

Getting traffic to our mobile apps is great, but if that traffic doesn’t convert, it’s almost useless. As a result, improved conversion rates are a key goal for any digital platform.

3. Help eradicating common users challenges

Throughout users feedback and constant research, we managed to identify and compile a list of common challenges our users are facing. We aimed to write these challenges down to take them into consideration while we build the new app.

4. Remove the clutter and ease navigation

Using analytics and users feedback, we organized screens according to priority and importance to users, removed unwanted screens, and revamped our mobile screens map.

Key steps we followed in our mobile app redesign process

Our plan consisted of three key steps:

1. Planning and research

2. Coming up with a concept

3. Building the final UI, animation & gestures

Planning and research

Any decent project redesign should always start with setting both the business goals and the user’s goals. Business goals were collected by conducting interviews with management and other stakeholders while user’s goals were mined by performing contextual interviews and surveys with end users which helped us pinpoint our most updated user personas and understand their behavior.

Our most updated persona
Our most updated persona

After identifying user personas, we setup a plan using Trello to organize track, track progress and set responsibilities taking agile scrum methodologies in consideration.

Trello board for the mobile app re-design
Trello board for the mobile app re-design

We listed all the questions we thought each of our personas could have when landing on our homepage to prepare for “Gap analysis” which is a common information architecture method in UX research. The idea here is to see which sections or pages were designed to answer each question we listed. If no part of the website could answer the question, that would be a considered a gap that we would need to fill.

After going through the above exercise, we started coming up with our Site Map realizing which pages users would need to answer any questions they might have.

Coming up with a concept

Designing and experimenting are vital parts of this stage with consists of the following major activities:

A. Define user journey & sitemap

This activity involves designing the flow of the main screen to form an easy step-by-step journey through the system.

One of the user journeys we came up with
One of the user journeys we came up with
EDaura workflow diagram
EDaura workflow diagram

B. Basic features ideation

We started off by participating in the ‘Crazy 8’ exercise which involves coming up with 8 different ideas and solutions for the app in 5 minutes. We were able to hit the peak in creativity using this exercise.

Crazy 8 exercise
Crazy 8 exercise

C. Define brand values and stick to them

This stage introduced the tweaks to our font selection and color scheme in alignment with the goals we set before.

We switched our brand fonts to Helvetica Neue as our header font and body font. This typefaces help us promote a cleaner design and provides more definitive whitespace which makes it easy and appealing to the viewer’s eye.

The fonts used in our new app
The fonts used in our new app

Because colors are largely associated with brand identification most of the time, we had to come up with color palette that better represent our brand. We used the purple color for the standout important components like the call-to-action buttons while keeping gray shades for the contrast.

Our new brand colors palette
Our new brand colors palette

D. Creating wireframes and prototypes

Since our app is available for both iOS and Android users, we had to take the differences in user experience between both parties into consideration and provide different UX for each party.

For this stage, we started with building the Lo-Fi wireframes based on the outcomes of the crazy 8 exercise. Basically, a Lo-fi wireframe add context to all the blocks in the content wireframe. It answers the inevitable question: “What’s in those grey boxes?”

Lo-Fi wireframes for the iOS app
Lo-Fi wireframes for the iOS app

The Lo-Fi wireframes were detailed enough we decided to skip the Hi-Fi wireframing exercise and go directly to the prototyping exercise. Our designers came up with two prototypes with the same brand and values for each platform but with a different design approach.

We used UserTesting to test these two variations in order to observe how users responded to the different designs and which emotions they associated with them. The test provided invaluable insights on how normal site visitors would feel and experience the new designs, and the team proceeded to create amendments that were more optimal.

Finally, the winning variation’s style and structure was chosen as the main reference for the rest of our redesign process.

The winning variation’s style for the iOS app
The winning variation’s style for the iOS app

Building the final UI, animation & gestures

With all the above at hand, we can initiate the final stage with all the needed assets available to help us. This stage was only to turn the golden findings into reality.

The team was divided into two. The first dedicated to designing the final UI. The second team focused on coming up with the app screens relation and animations diagrams plus gestures functionalities.

The first team outcomes: The final screens
The first team outcomes: The final screens
Second team outcomes: Relations, gestures and animations
Second team outcomes: Relations, gestures and animations

It took us three months of research, planning, and experimenting, plus another two months of coding and optimizing, Our app is now ready and officially live. The effort was fruitful!

You can download the app here: ( iOS, Android ). Let me know what you guys think of the it, you can contact me on my LinkedIn account.

User Experience consultant | Passionate about anything involving the user experience and the user interface

Site Footer