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.
After identifying user personas, we setup a plan using Trello to organize track, track progress and set responsibilities taking agile scrum methodologies in consideration.
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.
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.
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.
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.
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?”
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.
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.
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!