a.ray: eating disorder care designed for your life
Website
My contributions: UX/UI Designer responsible in all stages of the project
Design team: Margo Liutova and myself
Duration: 30 days
Brief: Validate the concept created by a.ray team, by conducting user research and concept testing and to design a user flow, visual identity and high-fidelity prototype from scratch
Tools: Figjam, Figma, Slack, Calendly, Notion and Trello
Deliverables: User Flows, Visual Identity & Hi-fidelity MVP prototype
The Challenge
a.ray is a new startup and we have been invited to participate in its first steps in Antler's residency program, in a collaboration with recent Ironhack graduates. Myself and another UX/UI designer worked closely with the CEO and CMO of the company, from the early stages of product discovery to the creation of an MVP. My role in this project was first to validate the concept and then to create a platform to help people find accessible care for eating disorders treatment.
Research
Quantitative data - survey insights
When we started the project with the co-founders, the research process that they had previously conducted helped build an understanding of the user and allowed us to advance a few steps in our roadmap. For example, they had already conducted a survey with around 30 people, which presented relevant data for us to reflect what we still needed to ask our users during the interviews. We then translated this data into insights (see on the right) and put together some of the most relevant data for better visualisation.
“Online therapy is an interesting solution. I think the screen makes things easier, it kind of protects you." (Andrea, 30 years old)
“What we want is connection and of course you can do it online. We put them all in you group and they connect: we have the same strange feelings and thoughts. It's powerful!” (ED specialist - psychologist)
Qualitative data - interviews
We interviewed around 6 people at this stage of the discovery process: 3 people who suffer or had suffered from an eating disorder and 3 therapists, so that we could understand the efficacy or/and limitations from group e-therapy in these specific cases.
Feature Comparison Chart
The co-founders had already identified the main competitors dealing with Eating Disorders or e-Therapy, in general. Based on the list they shared with us, we did a feature analysis.
This gave us an idea of features that could be used later on, so that a.ray could be an innovative proposal. Even though there are already some e-Therapy products on the market, we identified that not many are focusing on ED. None of the competitors offer ED online treatment in Europe, which pointed us to an interesting gap in the current market.
In order to get a more tangible grasp on who our user is and how we can help them, we created a user persona based on our data. We identified some of the most common characteristics of our primary user to develop Anna Ricci:
User Persona
As-Is Scenario and User Journey Map
So, What is the Problem to Tackle?
Young adults suffering from ED need a rapid way to start treatment and to recover because they feel frustrated about spending a long time in waiting lists provided by public health institutions.
Problem Statement
Finding a solution: Ideation + Moscow Method
After brainstorming features ideas using the Crazy 8s Method, we decided which features must be prioritised, by using the MoSCoW Method. Other interesting ideas such as a journaling feature and a habit tracker were discussed, but we agreed that these would be the most important to focus at the moment, so that we could have an MVP ready to be tested with a whole cohesive flow.
Must Have Features - from MoSCoW Method
Wireframes to Prototypes: iterative process
So it's time to create an user flow taking all the research and ideation findings into account. Bellow you can see our main user flow (happy path) in low fidelity (so that we could test it earlier), that basically consisted on the following steps: Home> How it works screen> Team screen> Starting questionnaire> Signing up> Scheduling demo-session.
Lo-fi Wireframes
By taking the market research, secondary research, user and specialists interviews into account, we understood that the concept for offering group e-therapy was already validated. Therefore, we moved forward to the usability testing stage. We used the Lo-fi version above to conduct it and, if necessary, we would take a second round of tests with the Mid-fi versions (which we ended up considering not necessary, since we've got important insights from this first round).
Usability Testing Scenario
This is a platform that helps people suffering from ED to find a rapid way to start treatment and to recover. The main service provided so far is group therapy sessions.
Task: Considering that you're a person suffering from ED, try to describe what you see and what actions you would take to start a treatment.
Please try to clarify in each step if something is not clear enough or could be better.
Usability Testing Main Findings
The most critical aspect of the flow we found out during the usability testing (5 users) was the "signing up” moment: every user mentioned they didn't feel comfortable to sign up by following the flow. The main reasons related were: "What's going to happen from now on if I sign up?". "Do I need to pay something now?", "It's not clear how it works, so I don't feel secure to continue".
Based on this problem, we've then worked by clarifying the process - in 5 steps. We created a Mid-fi version for "How it works” screen (see bellow) in which the user would have access to the process by clicking "See how it works” on the Home page or "How it works” link on the navigation bar. By reading the 5 steps, the user will be able to understand how to pay and how to start the therapy. A button to finally "get started” is placed right bellow "step by step".
Our users also reported that they would be rather interested in understanding the process than the team, "Although it is interesting to have some professional information about the team, I don't know these people, so it doesn't matter much. I'd rather understand the process better, step by step." Because of this insight, we decided to skip the "team screen” from our "happy path flow”version and let it accessible on the navigation bar in case the user wants to know more about the professionals.
Usability Testing and Iterating
Next we designed a visual identity that would resonate the brand attributes a.ray's co-founders shared with the design team: accessible, holistic, personalised, inclusive and bright/sunny (colorwise).
Then, considering a quick research about which colors would relate to a calmness and vitality, we created a color palette based on sunset colors but in a more pastel tone. We also used some decorative waves that remind sun rays softly going through images.
Style Guide
Hi-fi Wireframes & Prototype
Home & How it works
Questionnaire & Signup
Schedule Demo-session & My therapy sessions
Try the prototype here
Lea: personalised e-learning
Rootling: encouraging free-time
Flixbus: travel tickets accessible