My Role
UX / UI Designer
Timeline
July 2019 - January 2020
Tools
Pen & Paper, Sketch, Balsamiq, InVision
Methods
Interviews, User Personas, User Flows,
User Journey Maps, Affinity Maps, A/B Testing,
Moderated Usability Testing, Card Sorting
This is a case study based on a theoretical project from CareerFoundry UX Design Course. Advisal is a web app that allows people get in touch with health and wellness experts and answer their questions.
The Challenge
When users have a small question about their health, they cannot get reliable answers on the Internet and usually the process of booking an appointment is too long for the quesitons they have. The goal is to create a responsive web application with a mobile-first approach that provides people a way to get reliable answers to health-related questions - anytime and anywhere.
Possible Problems
01 A lot of people do not trust apps when it comes to health.
02 Users usually search inmediate answers.
03 People are usually concerned about their privacy.
04 People want to find experts that are reliable, which are not always easy to find.
05 Users can get steered away from paying online for a service.
Observation
Surveys and Interviews
In order to test the initial problem statement and hypothesis, I conducted a survey and several interviews. This allowed me to gather valuable insights about users goals and frustrations.
• 90% of participants said that they prefer to contact first someone they trust before getting expert advice.
• 75% of participants said that they often search the answer on the Internet before getting expert advice.
In general, participants tend to prefer the face-to-face sessions, although they find it useful for some cases (psychology, if they are far from the expert's location, etc.).
Affinity Map
After the interviews and surveys, I created an affinity map to organise and narrow down the goals and pain points of my users. I basically wrote down all the quotes, insights and concepts extracted from interviews and classified them into categories. This allowed me to substract as many ideas and key points as possible from the interviews and surveys, as well as finding common patterns in order to find future design solutions.
.
Observation
Insights and Conclusions
• None of my interviewees mentioned any concern about their privacy.
• Most patients prefer in-person sessions rather than online when it comes to health.
• They are more likely to do an online session if they live far away from their trusted doctor or if the cost is lower.
• They would use an online session in areas like psychology, alternative medicine, nutrition, sports, etc.
• They find very tedious having to call the clinic/doctor to be able to make an appointment.
Point of View
User Personas
Based on the previous interviews, surveys and research, I set up three personas. I referred to them throughout the entire product development process. This allowed me to remember for who I was designing the solution and avoid deviating from what was actually important.
.
.
.
User Journey Maps
In order to understand how users find and interact with the app, I created a User Journey Map for my personas, which in this case are related to:
• Finding an expert
• Having an online call with an expert
• Going to an in-person consultation
This allowed me to actually understand the user within their context and get to know better their needs. For example, I could find the most important type of filters that the app should provide. Also, I realised that it's very important to include a feature that connects with Google Maps / Waze directly so that users can quickly get indications.
.
Ideation
User Flows
I selected the most important user stories and tasks and then mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals, like booking a call online or an in-person appointment and find experts quickly.
User flows helped me to:
• Discover which pages and screens are needed before proceeding with Information Architecture.
• Take a step back and focus on user flows.
• Avoid focusing too much on individual screens and interactions within the app.
.
Card Sorting
By using Optimal Workshop, I conducted a remote card sorting session and I analysed the results that were more relevant to gather some quantitative data. In this graph, we can see which cards were often placed together under the same category. This allowed me to know where do most users expect to see a particular kind of section, page or button.
Site Maps
The results that I got from this open card sort confirmed the sitemap that I planned for my app. In isolated cases, some participants had different interpretations, but it seems this is due to lack of context of certain words. I learned that it is extermely important to give users relevant context before they start the card sorting session, as well as not to write one-word cards if they don’t make sense without context.
Prototyping
Sketches & Wireframes
Based on my user flows and the sitemap, I started with quick sketches that conformed the low-fidelity wireframes. This helped me to have an approximative idea of which was the most important information that I had to include on each screen. It is also useful to iterate through many design options quickly.
.
High-Fidelity Prototype
After reviewing the mid-fidelity wireframes and having a more clear idea of the screens and flows that my app will have, I translated these into high-fidelity wireframes that resulted in a prototype that was later used for the first round of usability testing.
Testing
Usability Testing
After having an early high-fidelity prototype of the app, I planned a moderated in-person usability testing session with 6 participants. I wrote a usability test script and a usability test plan in order to help me before, during and after the sessions.
Goal
Assess the learnability for new users interacting with the web app for the first time on mobile and desktop.
Tasks to evaluate
1. Sign up
2. Search for an expert
3. Book an online session
4. Send a message to an expert
Analysing data: Rainbow Spreadsheet
After the usability testing, I had to make sense out of all gathered data. I decided to classify all my findings in 4 categories - positive quotes, negative quotes, observations and errors - by using an Affinity Map.
After that, I used the Rainbow Spreadsheet to analyse the data and figure out some possible solutions. You can find the complete spreadsheet here.
Refining the UI
Styleguide
Final Mockups & Prototype
Takeaways
• In the usability testing phase, I had a lot of technical problems while recording the sessions (lost recordings, sound issues, etc.). I decided to write everything after the sessions in case I had a problem with the recordings.
• Although it can seem obvious, it's extremely important to focus on what users actually want and try to put our ideas and ego aside. We should not reflect our needs in those of our target user.
• In the first high-fidelity screens before testing the prototype, I spent too much time refining small details that had no importance at that moment, since after the testing I had to change a lot of things. For the next projects, I will take this into account and I will focus on what it really matters.
• There is always room for improvement. This means test, test, fail, retry and test again!
