Designing features with empathy and delight.
Healthcare / Beauty
2023
1 x Product Designer
1 x Project Manager
Product Design, Prototype
Strands is an app that helps sufferers of trichotillomania identify, record and manage their triggers. The client approached Tappable to create a Figma clickable product prototype to attract potential investors.
I was tasked with creating a logo and visual identity for the product, as well as all UI screens for the product and a clickable prototype in Figma.
Trichotillomania (the urge to pull your hair) sufferers can feel isolated at times, due to the non-existence of treatments and general misunderstanding of the condition.
The clickable prototype needed to showcase the value of creating an app for trichotillomania sufferers so it needed to have the following:
Easy but thorough and captivating onboarding
Check-in daily rewarding “feel good” strategy
Super easy recording of triggers
Encourage daily check-ins for habit building
Tips and advice on managing triggers
Community area to show sufferers they are not alone
Trigger insights over time
Ability to share progress to social media
Easy but in-depth and captivating onboarding
Check-in daily rewarding “feel good” strategy
Super easy recording of triggers
Encourage daily check-ins for habit building
Tips and advice on managing triggers
Community area to show sufferers they are not alone
Triggers and habit building insights over time
Ability to share progress to social media
Strands needed to be a clickable prototype to demonstrate the product's capability for potential investors. As a designer, I worked on tight deadlines and budgets to deliver a brand, design assets and a Figma clickable prototype for the client.
The challenge of doing Strands also resided in identifying power features for sufferers of trichotillomania and designing a captivating onboarding process that asks the user sensitive questions, as well as prototyping it all together to make it look like a functional app. Working closely with the client and project manager, we narrowed down the features, the questions, and the user journeys for each section of the app.
As this was just a clickable prototype there were no technical developer constraints so in a way, I felt free to design and iterate on the screens to make this product as powerful as possible.
#1
Narrowing down features based on budget and timeframes.
#2
Complex onboarding, with many sensitive questions.
#3
Delivering client requests on a tight budget & schedule.
#4
Creating an in-depth clickable Figma prototype.
Together with the project manager, we worked on putting together a list of requirements, user journeys, user flows and wireframes to map out all the areas of the app.
We also looked at other similar apps on the market, particularly TrichStop to understand their product offering and see where we can differentiate Strands from its competitors.
I was tasked with creating a logo and a visual identity for the product. The client really loved the name “Strands” but they didn’t want the brand to focus too much on the idea of hair and hair-pulling and we certainly didn’t want the identity to look like a beauty haircare brand.
The brand had to look friendly, fresh, vibrant, approachable and a delight to look at. The illustrations were created to encourage and support users when using the app but especially when recording their triggers.
With the help of our client, we assembled a list of questions to ask at the onboarding stage. We narrowed down the vast amount of information users need to input and we figured out a streamlined onboarding process that makes it easier for the user to go through.
Designing an app for a condition of this nature requires an intimate understanding of its triggers and symptoms. Working closely with the client, who has a deep understanding of the condition, the product features we discussed were many.
Due to time and budget constraints, we decided to cut down on some features (journaling, menstrual cycle and sleep tracking) to save time and costs for the delivery of a delightful but powerful clickable Figma prototype.
I spent a good amount of time wireframing, prototyping and testing screens in Figma, ensuring the clickable prototype behaves (almost) like a real app.
Adding delays, rotating gradients and loading screens, gives the user a working experience of the product. The prototype was received very well by the client and has made them excited for the future of Strands.
As a lead designer, I followed a rigorous requirements criteria list with product timeline management support from the project manager. Together we worked to ensure deadlines were consistently met and assets were created and delivered efficiently and on time.
Before each area of the app was designed, we created user flows and journeys in Whimsical, in order to evaluate the users’ precise steps and to understand how it could simplify their journey to help them go through the entirety of the onboarding process.
During design, we went through the onboarding stage multiple times and assessed where opportunity lies to reduce friction and steps, as well as iterate on improving the user experience. We also looked at the more established TrichStop app to understand their onboarding journey and see what we can do differently for Strands.
This process helped me created detailed UI screens for the product.
At the beginning of the ideation and design process, we created quick low-fidelity wireframes in order to model the general flow of the app and to quickly asses what features and layouts we should adopt on the screen, as well as identify areas to reduce friction and steps, wherever possible.
This helped me to create detailed UI screens in the design process to showcase a more cohesive vision of the product.
All UI was created in Figma and delivered as a URL which opens a clickable prototype, that can be viewed both on Desktop or mobile. I also prepared brand assets for our client, who needed the logo, fonts, colour schemes and some illustrations for their marketing.
Working on the Strands app, from creating the brand to the final clickable prototype, and working closely with the client and project manager, was a wonderful experience.
The empathy required for this product allowed me to infuse the UI with moments and areas of delight at every step, which makes it more inviting to the user to log in and record their triggers.
Strands was a testament to great collaboration between client, designer and project manager coming together to deliver a potent and delightful prototype for the sufferers of trichotillomania.
