Soul Medicine website | UX Case Study | 2 week design sprint
Group Client Project | Roshni Mahtani, Rhiannon Evans & Margarida Jesus
Process overview:
User research: Client research, Client meeting, Competitor analysis, User interviews, Affinity mapping
Define: Persona, Usability testing beta website, Problem statement
Ideate: Design studio, Open and closed card sort, User flow
Design, Prototype, Validate and Iterate: Paper prototype, Usability testing, Mid-fidelity prototype, High-fidelity prototype, Responsive design
Software used: Sketch, Adobe Suite, inVision, Marvel
My role: The research and analysis was a join effort. I led the design studio and took that information and our initial sketches to design the paper prototype. I also designed some of the hi-fi screens, and the mobile screens for our new website.
Client — Chayn helps women experiencing abuse find the right information they need to take control of their lives. Soul Medicine is a multilingual digital service designed to deliver critical information in bite-sized pieces.
Brief — Soul Medicine came to us to help redesign the sign-up process to offer a simple, quick, and streamlined way for users to choose, receive, and access the course content.
“They came up with excellent ideas — half of which we can implement right away! Really understood the brief and respected user needs. Well done.” — Hera (Chayn Founder)
User research:
Research the problem and understand what users are doing, thinking and feeling
Client Meeting:
We met with Dina, the project manager of Soul Medicine to understand the most important parts of the company and learn what pain points they have identified in their users.
Competitor Analysis:
We looked at the strengths and weaknesses of competitors to help us identify solutions for an efficient sign up process while maintaining security. We were particularly focused on looking at when and how companies that deliver content to users (such as Cousera and Future Learn) prompt users to create an account and how they organise their content to make it intuitive to find.
User Interviews:
Chayn and soul medicine provided us with the audio of 6 user interviews. We wrote down all of the points from these on post it notes and created an affinity map by grouping them together into common categories. As the users are a very specific and vulnerable population, it would have been hard to find people to conduct our own interviews in the time frame given and therefore this was invaluable research that helped us to understand our users and their pain points.
Affinity mapping:
In addition to an affinity map of the interviews, we also created an affinity map of 2 reports ‘Tech vs Abuse’ that were conducted in 2017 and 2019, funded by Comic Relief. These reports were focused on the benefits and fears of technology and how it can be used to help women in these situations. One main finding from this was that there are 5 different stages of abuse: unaware, aware, staying, leaving, recovering.
A main takeaway that we found is that 47% of women are being tracked and watched and that people in these different stages all need different information, and some are very time sensitive.
Define:
Identify pain-points and prioritise user goals and design objectives
From the affinity mapping, we identified the main pain points that appeared both in the interviews and reports were isolation, lack of community, desire for in person classes and support, and it being hard to find the right information.
Persona:
This research gave us a good understanding of our user and we created 3 persons at varying stages of abuse. Kristina, who is unaware that she is in an abusive relationship. Sara, who has a husband that abuses her in front of her children and is looking to leave once she finds a way to keep her children safe and Fatima, who is recovering from an abusive relationship and seeking information about applying for asylum. To move forward, we focused on Sara as our primary persona as she is the most vulnerable.
Sara is living with her abuser and would like to leave but needs information to do so. This can only be found in short bursts when she has time because her husband tracks her email and works from home. She comes to Soul Medicine for help.
Problem statement:
Beta website usability testing:
We tested 9 users to to understand the current challenges of the website and identify pain points. We asked users to find a certain piece of information and then to create an account and subscribe to that content.
We put all of these results in a matrix and organised them by feature. After adding in our proposed recommendations, we arranged a meeting to discuss the changes with Sophie, Soul Medicine’s developer.
Pain point: Users did not know how to create an account and did not know what they were signing up for.
Ideate:
Brainstorm creative solutions and define designs that answer the objectives.
Design Studio:
To begin our ideation phase, I conducted a design studio with our team, Dina (Soul Medicine project manager), Hera (Chayn founder) and 2 volunteers from the organisation. This was a great way to generate new designs and ideas about the project.
It was helpful to have people who are familiar with the organisation to help us generate ideas as they are more informed about domestic abuse than we are. From this session we decided to change the name of the ‘notes’ to ‘steps’ as it is more empowering and a clear way to allow people to take back control of their lives.
Open and closed card sort:
After the usability testing of the beta website we noticed there were some issues with the copy on the website. To ensure that we were using language that would be understood we conducted an open card sort with 8 women who are survivors of abuse. We provided them with a list of all the future courses that are going to be on the website and asked them to categorise them into topics.
After doing an open card sort we wanted to verify the categories we were given, so we conducted a closed card sort with 10 people. Most of the categories were understood, but ‘awareness’ caused confusion so we went back to the results from the open card sort and renamed awareness ‘detecting and handing abuse’ which was another popular result.
User flow:
Our final user flow was a product of the pain points in the usability test that we wanted to focus on redesigning. It involves someone finding the information they need, setting up an account and going back to the topic they wanted to track. The current beta website had 12 steps to complete these steps, but we designed a flow to do it in 5 steps.
Prototype, Validate and Ideate:
Design and build a model of the best solution, test it to get feedback and then go back and refine design based on feedback.
Paper Prototype:
After we had the user flow in place we all began to sketch out our ideas of how we were envisioning the wireframes. My role was to then take all of the sketches and ideas from the design studio and to turn them into one cohesive paper prototype that had all of the different ideas in a clear and intuitive way.
Usability Testing:
We tested this prototype on 8 people and recorded all of the information onto a matrix and integrated these changes into a mid-fidelity prototype. Some of the main findings were to do with the copy. Phrases like ‘follow the steps’ which I took from the design studio made users assume they were about to read some action items they had to do instead of reading information about a course.
Mid-fidelity prototype and Usability testing:
We did two versions of the mid-fi, and tested each on 8 different users. Some of the biggest changes that we made at this stage were in relation to how to track progress- both with the copy used as well as where the arrows were located. We also tested a couple of different ways to prompt users to create an account to see how they reacted and what caught their attention most without detracting them from the information they were trying to find. We recorded all of these 16 usability tests onto a matrix and then created a hi-fidelity prototype.
Accessibility tests:
Within the high-fi prototype we did not want to change any of the branding of Soul Medicine because we received positive feedback from users during the beta usability testing about the brand colours and graphics. We familiarised ourselves with the branding so that we could implement it into the prototype accurately. While doing this, we conducted some accessibility tests on the colour contrasts currently used on the website to make sure the information was available to everyone.
From this, we found that certain colour contrasts such as the grey on beige and the beige on pink for the CTA buttons had a low contrast rating and therefore inaccessible. We changed the size of the text on the navigation bar to make it accessible, and changed the CTA buttons to the blue as white text on blue is accessible.
High-fidelity prototype and A/B testing:
We tested our hi-fi prototype on 9 users, and one of the main things that we wanted to test was what page users expected to arrive at after they clicked on the link in the email verification. We conducted an A/B test where Option A was a homepage but with a link at the top to the topic that the user had been reading, and Option B was the page that the user was looking at before.
We found that users preferred option A because it gave the users more control. One user said I “prefer to go to the homepage, I like this better because you can click on the topic where you were….. gives me a link but I can decide where I want to go”.
Responsive design:
In addition to providing soul medicine with all of our matrices of usability testing and the final hi-fi screens, we also wanted to show how our design would work on a mobile. My role, in addition to creating some of the hi-fi pages, was to design the mobile screens. For these, I simplified the design into one column and made sure the information was stacked in the correct hierarchy and that the font sizes were appropriate for a phone.
Our final walk-through of our hi-fi prototype is below:
Response to high-fidelity:
Reflection:
Looking back and reflecting on the process and outcomes
Chayn and Soul Medicine were inspiring companies to work with. The biggest challenge that I found during this project was that the intended users were a very specific and vulnerable group and therefore identifying people to do usability tests and interviews with was a challenge.
We presented all of our findings to our client, and they were impressed with the work that we had achieved in 2 weeks. Some of the feedback that they gave us was:
“I really enjoyed going through your slides, and the research and ideas you all came up with — so many good ideas and hypotheses to think through! Also, it’s super impressive how much you covered in the 2.5 weeks!” — Jits, Developer
“The presentation was great as were the solutions. You have helped us a lot.” — Dina, Project Manager
In addition to the on-the-spot feedback, Soul Medicine came back to us and told us that many of the changes we had made would be implemented into their website and invited us to their launch party. It was an amazing experience and one that I will never forget.
If you have any additional questions about this project and my process, please reach out to me- Thank you!
