Designing features with empathy and delight.


Healthcare / Beauty




1 x Product Designer

1 x Project Manager


Product Design, Prototype

woman holding mobile in hand
woman holding mobile in handwoman holding mobile in hand

Designing with empathy and delight for Strands

Project Overview

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.

strands app - app featurestrands app - logostrands app - heart illustrationstrands app - app feature

Designing delightful features for Strands

App Features

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:

arrow east

Easy but thorough and captivating onboarding

arrow east

Check-in daily rewarding “feel good” strategy

arrow east

Super easy recording of triggers

arrow east

Encourage daily check-ins for habit building

arrow east

Tips and advice on managing triggers

arrow east

Community area to show sufferers they are not alone

arrow east

Trigger insights over time

arrow east

Ability to share progress to social media

strands app - large app feature display

Designing a captivating onboarding journey

The Challenges

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.

Challenge #1



Narrowing down features based on budget and timeframes.

Challenge #2



Complex onboarding, with many sensitive questions.

Challenge #3



Delivering client requests on a tight budget & schedule.

Challenge #4



Creating an in-depth clickable Figma prototype.

The Solutions

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.

Solution #1

Solution #1


Brand and prototype delivered in weeks

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.

strands app - heart illustration
strands logo and colour schemestrands app - brand typographystrands app - illustrations

Solution #2

Solution #2


Intimate understanding of users and 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.

strands app - stat cards
strands app - onboardingstrands app - onboardingstrands app - onboardingstrands app - complete profile

Solution #3

Solution #3


Working closely with the client

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.

5 minute strands card
strands app - settingsstrands app settingsstrands app insightsstrands app - prototype

Solution #4

Solution #4


Creating a powerful clickable 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.

strands app - loading icon prototype
strands app - splash screen animation prototype
strands app - figma prototype imagestrands app - figma prototype imagestrands app - loading icon prototype

Product Roadmap

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.

strands app - large app feature display

User Journeys

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.

strands app - user journeysstrands app user journeys


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.

strands app - wireframesstrands app wireframes


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.

Strands App - Onboarding Journey

Strands App - Record Activity

Strands App - Settings

Personal Insights

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.

Want to know more about my skills and expertise?

View my CV
Irina Csapo - Profile Photo - 2024

Thanks for being here!
Let’s work

Say Hello.