Building a better user experience

AOK Bonus App, process and result

Our task was to take an existing app with bad reviews, with many unused features and develop a
meaningful experience leveraging gamification to motivate users to be more proactive with their health.

This meant we had to tear the app down, reconfigure the user experience, test it and
redesign it. Here is what we did.

Step 1

The flow chart
Taking apart the app and figuring out the flows. The best way to refine a user experience is to account for each step and screen a user must interactive with to discover, and accomplish their goals.

Step 2

Pen and Paper phase
In an effort to save resources, we used a whiteboard to sketch out screens and begin testing the user experience, making sure to optimise our mobile screen to offer relevant features quickly and intuitively.

Step 3

The Wireframes Now we begin to build wireframes from which we then develop our initial click dummy, so we can begin to observe user behaviour. We chose to develop HiFi wireframes, since we already knew what kind of UI we will be working with going forward. This choice helped make the overall process more efficient.

STEP 4

Development of the design System that will work for both iOS and Android. We first planned for a core library that was comprised of the Basic elements and then went and created subsequent libraries that were tailored to ios and Android. The tokens of the design projected. We then specialised UI elements to meet the expectation of the users on their respective operating systems.

STEP 5

Diving into design. Taking our wireframes and bring them to life.

FINAL STEPS

After we built all the screens, we then uploaded all them into invisionapp and began final testing, this was an instrumental way for us to share our results and designs with our client. This also allowed us to work more agile with our developers allowing them to start on parts of the process as soon as they were approved.