DATA-DRIVEN DESIGN FOR MOBILE APP
WECHEER.IO is a rapidly growing tech company, breathing creative tech innovations. The main focus of the company is blending ergonomic industrial design with innovative and smart solutions to create next-generation IoT devices and appliances.
Their latest invention is ready to disrupt the beer industry – the world’s first-ever smart bottle opener. And it’s already spreading throughout Vietnam bars and pubs.
Since it’s a smart device, an important feature of it is collecting data. Naturally, WECHEER.IO aims to utilize the data collected from their device and put it to good use. That’s why they’ve decided to develop Bars Heatmap – an app that would help people find most popular bars in the area and would spread the message about the smart invention as well. They’ve called for our help with the design of this project and we delivered.
The smart bottle opener collects data on every single bottle opened:
- What kind of bottles are opened
- How many of them were opened
- Where were they opened
- Who opened them
The Bars Heatmap app shows the most popular and trending bars based on the user’s location, using this (and additional) data.
The main challenges with this project were:
- Limited timeframe during which the project had to be implemented
- Maintaining brand identity throughout the design of the app
- Aligning business, app and user goals
- Ensuring excellent user experience
7 Steps of Design process
Step 1. Establishing expectations.
After receiving the project brief and preliminary wireframe for the app, we started our work. Our starting point was to create the first version of “Nearby Bars” user interface window. This also included the badges required to distinguish the degrees of popularity of the bars. This step helped us to understand the expectations of our client and verify if we are going in the right direction.
Step 2. Testing, fixing, tweaking.
After getting on the same page design-wise with the client, we’ve started testing the objects. We’ve carried out user interviews to check what kind of badges work best to visualize the popularity rating of a bar. Based on the findings, we tweaked and updated the design.
Maintaining healthy levels of communication is crucial for any design project. Throughout every step of the design process we have been checking in with client, to make sure we stayed on the right path in brand communication and representation.
Step 3. User flows and wireframes.
To make sure we’ve got the wireframes right, we needed to use another tool from our arsenal – user flows. User flows represent a set of tasks or actions needed to be completed in order for the user to complete a process. For example, in order to successfully login for the first time, user has to go through Sign up process:
Homepage > Sign Up window > Registration details window > Email verification window > Successful Verification window > Login window > Application window.
Even though it’s a pretty simple process that each of us has probably gone through many times, user flow provides some very useful insights. Which windows do we have to keep? Which steps can we eliminate from the process? Which windows require user input and which windows are simply information? How do we navigate from each window to the next one? What about the previous one?
Naturally, after creating the user flows and answering all of these questions (and more!), we had a solid foundation for building up the user experience. This information helped us make decisions throughout the design process and the first step was tweaking the primary wireframes. Updated wireframe was – you guessed it – sent to the client for review.
Step 4. Building up the wireframe.
After confirming the wireframe with the client, we knew what we needed to create and design of the pages could finally begin. All of the windows for the app were designed throughout the next week. Now comes the fun part – testing, testing, testing!
Step 5. Testing, testing, testing.
Besides user interviews and data analysis, a very important part to be absolutely sure about is getting the user journeys right. At first sight it seems like a minor detail, but the success of an app depends on getting it right. This is why we’ve spent a lot of time projecting, designing, testing and tweaking different user journeys for Bars Heatmap app. Not to be confused with user flows, user journeys are the actual journeys that users go through to reach an objective; in this case using prototypes of the actual app windows..
To give you an example, one of the user journeys objectives was to find a particular bar using the app. The user was presented with a design prototype of the app and was asked to comment on his user experience – why he was making a certain action, what he was expecting to find in the next page, what action would he make to reach a certain objective, what did he like or dislike about the app, etc. We’ve also expanded this a bit and asked the users to test the search function, comment on what they would expect to find with it, what would they use it for and so on – all the while notoriously writing every single detail and comment down.
Carrying out these research and testing sessions helped us to make the last tweaks to the app – switch some of the windows, add ones that were expected and remove the ones that were unnecessary.
Step 6. High fidelity.
Knowing that we have a working wireframe for smooth and enjoyable user experience, we could start dressing up the wireframe with previously created user interface windows and let ourselves dive into the details. Every intuitive app has countless small details hidden inside the user interface that you might not even notice and this was our focus point. This included such tasks as:
- Designing information architecture to make the texts easily consumable
- Assigning feature hierarchy – so that the most important parts of the app would stand out
- Tweaking fonts, text size, spacing and general formatting for better readability
- Countless others
Step 7. Final testing.
Finally it came time to make our final testing sessions. This time users tested the final design of the app and answered the same questions as before, during wireframe testing. The outcome – intuitive and appealing design for the app and happy users for our clients.
Our unique 7-step design process has allowed us to deliver the finished structure, developer assets and complete UX/UI for the mobile app in less than two weeks.
Design team’s job here is done! During the next phase our developers will create the front-end and back-end of the app system, so that its performance would fit the looks.