UX/UI Design of a Mobile App from Scratch

As part of the UX Design Immersive program project, I creating a mobile app prototype in 2 sprints of 3 days each.

In the first 3 day sprint, I identified and fully understood a user’s problem, then designed a mobile application paper prototype that can help solve it. In the second sprint I re-visited the app’s goals to define brand identity and visual language to create a high-fidelity prototype. Here, I’m going to explain the design process I followed throughout the project.


1st SPRINT

Need Finding via Concept Mapping

For this project, I interviewed my fellow classmate Leith to identify problems in his daily file that could be solved through a mobile application.

Concept mapping technique during the interview allowed me to reveal a problem hidden behind an otherwise quite blissful life; he was deeply unsatisfied with his physiotheraphy profession. This got my attention and invoked my curiosity so I kept digging to find out why. He expressed that he was finding his profession unfulfilling because he had many years of experience but he was not able to try new treatment methods and contribute.

Concept map to identify user’s pain points and explore ways to eliminate them

The core problem was that contributing to the physiotheraphy field with new methods required a lengthy process. He needed to collaborate with other practitioners to be able to effectively measure the success of the treatment methods he is proposing.

If I could make it easier for him collaborate with other practitioners and measure the success of his proposed treatments, he could drive innovation in physiotheraphy and in return, find fulfilment in his profession.

Storyboard of my user’s journey from problem to solution

Proposed Solution

Once I identified Leith’s problem I had a rough idea on how I can help solve it through a mobile application. It was a complex problem that required a complex solution (and I’m thinking of a fully functional collaboration platform here), but that didn’t mean the mobile application itself had to reflect all the complexity behind it.

Following the participatory design process I was able to refine the details and gain a better understanding of the problem I’m trying to solve. The main challenge for me was that Leith had extensive knowledge on the topic which was completely new to me and the terminology he was using was unfamiliar. More concept mapping helped me extract the core information behind the terminology and my solution started to shape up.

Leith was going to use the app to:

  • Post new treatment plans for a diagnosis
  • Add patients and patient findings to any treatment plan
  • Collaborate with other practitioners through comments or adding patient findings to each others plan
  • View statistics on the success of a treatment plan
Physio LAB is where physio practitioners all over the world can carry out collaborative research!

First Iterations

As I had very limited time to deliver the first prototype, I decided to focus on 2 of the primary user goals:

  1. Create a treatment plan
  2. Add a patient to a plan

Focusing on 2 goals helped me build and test the prototype in rapid iterations. I could then apply the insights from testing to other user goals which I would re-visit in later iterations.

User flow with 2 goals

Then I sketched multiple versions of the apps’ screens. I tested the sketches with Leith to get his feedback and update, before putting them together in the prototype on device.

Initial sketches of flows and UI built into the interactive prototype on device

User Testing

I tested the prototype on device with more people. This revealed a few interface problems that caused confusion to users who are not as familiar with the process as my primary user Leith. Some interaction points needed to be more self-explanatory and screen the flow needed to be re-ordered for improved usability.

User testing of sketches on device

Additional testing with Leith also revealed missing steps from the process, which neighter of us could think of before. I went back to redesigning the flow and the interface. The final prototype at the end seemed to be working quite well.

Screens built into the prototype. Interactive Version available here.

Leith said he is quite happy with the solution and he can’t wait to see the high fidelity version!

Next Steps

I had 3 days to take the project to the current stage. When I have more time I would like to:

  • Add personalisation features
  • Build other user goals into the product
  • Create a high-fidelity and visually appealing prototype

I’m quite excited of having started this project and I will be re-visiting it in the future to progress it further.


2nd SPRINT

A few weeks after I designed the paper prototype of PhysioLab, I had a chance to re-visit the project to define the brand identity and visual language to create the high-fidelity prototype in a 3 day sprint.

Brand Identity

I’ve made some research to collect ideas to convey the brand’s message. PhysioLAB doesn’t have a direct competitor so I’ve searched for standard physiotherapy related resources as well as brands that convey similar brand personality and collected them in a mood board.

Mood Board

Setting the tone and voice of the brand was an important step before moving onto visual design.

PhysioLAB was going to be professional and knowledgeable without being boastful. It needed to be open-minded, modest, confident and reliable. Most importantly, I was going to encourage innovation and invite everyone to contribute.

I prepared a style guide to fully reflect the brand’s personality throughout the visual design of the app.

Style Guide

I’ve picked colours that are conveying professionalism, confidence, and courage. I wanted to use a typeface that is modern and reassuring.

I re-designed the app icon as an invitation to innovation while making sure the gradient background is drawing the focus on professionalism.

Re-defining the App’s Goals

I had 3.5 days to complete this phase of the project so I decided to start with 3 core screens to design and iterate to make sure the visual language is set right before applying it on remaining screens.

Re-visiting ideas and paper sketching

Re-visiting the initial paper prototype, I noticed that it was missing something. I thought about the app’s goals and Leith’s core desire that made him want to create new treatment plans; He wanted to gain recognition in his field.

This made me realised that the statistics that define success of a treatment plan was the most important function of the app and it was missing from the initial paper prototype. Also, adding in profiles of creator and contributors of the treatment plan would help physiotherapists gain recognition and improve reputation. These functions could potentially turn users of the app to most loyal ones. So for the visual design, I decided to focus on the 3 core screens:

  • Search available treatment plans
  • Create an innovative treatment plan
  • Overview of a treatment with statistics to show the success and profiles of contributors

Evolution of Screens

Using my favourite design tool Sketch, I created the mockups and started testing with people.

The splash screen is particularly important because that’s the first place people see the brand and form their very first opinion.

Splash Screen Iterations

After testing various versions, I decided to use a large icon to portray courage and dark gradient background for professionalism and make the brand stand out.

Screen below is where the practitioners can search for available treatments.

Search Treatment Screen Iterations

Most successful treatments are on top, which serves as a motivation for practitioners that want to build reputation.

Large bright button fixed at the bottom emphasises the purpose of the app “an invitation to innovation”

Create New Treatment Screen Iterations

On this screen practitioners create new treatment plans.

During user testing people found it a bit dry initially so I added the ability to upload images and improved readability by appropriate spacing.

Treatment Overview and Stats

On the first version of treatment overview screen, user testing showed that people didn’t like that they had to follow another link to see the treatment details. So I made it a long scrolling screen that you. Also the infographics was a bit confusing at the beginning.

I made ‘Add patient results’ button pop and made profiles of contributing practitioners more noticable as an invitation to collaboration.

Testing the Visual Design

Testing the visual design of an app differs from usability testing as the focus is on the look and feel, tone of voice and brand identity. I asked users to rate the app based on brand traits I’ve set at the beginning of the project to make sure the design is reflecting the brand.

Testing the visual design — method: brand Questionnaire

Throughout the iterations I applied testing insights to evolve the design. At the end the visual language of PhysioLAB appeared to align with the app’s brand personality.

Brand Questionnaire Results

Prototype

Next Steps

Now that the visual language is successfully conveying the brand identity, next step is to apply the visual identity on the rest of the screens to complete the flow.