Purity 🌿. Redesigning & spearheading the #1 App for Gout Management.
Purity 🌿. Redesigning & spearheading the #1 App for Gout Management.
Duration
Jan 2022 - Present
Team
Ariana Pineda — CEO
Ahmed — Developer
Role
UI/UX Designer
Head of Design
Tools
Figma Photoshop Wix
Over two years ago, I joined Purity — the #1-rated free purine & uric acid calculator on the App store — with a passion for addressing chronic health.
Now, as their head designer, I’ve rebuilt their visual identity, designed both their web and mobile platforms from scratch, and created over 5 iterations of features.
Purity is an ongoing passion of mine.
Over two years ago, I joined Purity — the #1-rated free purine & uric acid calculator on the App store — with a passion for addressing chronic health.
Now, as their head designer, I’ve rebuilt their visual identity, designed both their web and mobile platforms from scratch, and created over 5 iterations of features.
Purity is an ongoing passion of mine.
BUT FIRST... CONTEXT...
BUT FIRST... CONTEXT...
A Quick Note:
Although I was first recruited by Purity as a UI/UX designer in high school, I went way beyond that: I did product design, graphic design, and branding on top of spearheading the app wireframes.
This project is very important to me — it was one of my first ever projects... in fact, it got me into UI/UX design! I continually refined my previous iterations, and it became evident over how far I was in my design journey.
A Quick Note:
Although I was first recruited by Purity as a UI/UX designer in high school, I went way beyond that: I did product design, graphic design, and branding on top of spearheading the app wireframes.
This project is very important to me — it was one of my first ever projects... in fact, it got me into UI/UX design! I continually refined my previous iterations, and it became evident over how far I was in my design journey.
My Journey
Because this is still a work in progress, these designs are far from finalized. However, I've already made several iterations on the app: focusing on making the app as easy, accessible, and approachable as possible.
I identified certain pain points on the current app, including but not limited to:
unreadable or inconveniently/awkwardly placed text
inconsistent color scheme
unintuitive design
There was a lot of work and iterations done, feel free to contact me to see the wireframes!
My Journey
Because this is still a work in progress, these designs are far from finalized. However, I've already made several iterations on the app: focusing on making the app as easy, accessible, and approachable as possible.
I identified certain pain points on the current app, including but not limited to:
unreadable or inconveniently/awkwardly placed text
inconsistent color scheme
unintuitive design
There was a lot of work and iterations done, feel free to contact me to see the wireframes!
Branding & App Identity
I noticed that the previous app didn't have much of a theme and decided to revamp the branding before I worked on the wireframes. I made a tentative brand guide that was approved and implemented... and although the brand guide is missing some features from our current design, it completely changed the feel and look of the interface!
Branding & App Identity
I noticed that the previous app didn't have much of a theme and decided to revamp the branding before I worked on the wireframes. I made a tentative brand guide that was approved and implemented... and although the brand guide is missing some features from our current design, it completely changed the feel and look of the interface!
UX Study / Redesign
UX Study / Redesign
EMPATHIZE
Understanding Our Users
We have 100+ active users on Purity, and 10+ reached out to us on their struggles with login and registration. Those who personally reached out mentioned that:
Understanding Our Users
We have 100+ active users on Purity, and 10+ reached out to us on their struggles with login and registration. Those who personally reached out mentioned that:
Obviously, we have a lot of problems here. We’re getting consistent comments that our app has a bug or a design issue with our sign up/log in feature... but what specific issues did they encounter?
Obviously, we have a lot of problems here. We’re getting consistent comments that our app has a bug or a design issue with our sign up/log in feature... but what specific issues did they encounter?
Old Wireframes
Here were the old wireframes that we had to improve upon.
Note that our design for the this sign up/log-in feature hasn’t changed since my second iteration — there’s a lot we can already change here. More details on how I improved in these designs in the “Iterations” section!
Old Wireframes
Here were the old wireframes that we had to improve upon.
Note that our design for the this sign up/log-in feature hasn’t changed since my second iteration — there’s a lot we can already change here. More details on how I improved in these designs in the “Iterations” section!
User Testing (for Redesign)
To figure that out, I asked some individuals a couple of questions.
Please note that due to limited resources, I wasn’t able to get in contact our existing users! To be completely transparent, I tested on other designers and university students. In an ideal setting, I would’ve interviewed existing users of Purity.
With n = 5 individuals to test, I asked them what they felt about the app both before and after I had them walk through the wireframe with the following questions:
User Testing (for Redesign)
To figure that out, I asked some individuals a couple of questions.
Please note that due to limited resources, I wasn’t able to get in contact our existing users! To be completely transparent, I tested on other designers and university students. In an ideal setting, I would’ve interviewed existing users of Purity.
With n = 5 individuals to test, I asked them what they felt about the app both before and after I had them walk through the wireframe with the following questions:
The results were very indicative of what we had to change... and it was also quite humbling!
With the five individuals, the main trends I found were that although users were able to sign in and navigate back to previous pages (albeit with some struggle), a concerning amount of users found it too frustrating to go through the process for making a new account:
The results were very indicative of what we had to change... and it was also quite humbling!
With the five individuals, the main trends I found were that although users were able to sign in and navigate back to previous pages (albeit with some struggle), a concerning amount of users found it too frustrating to go through the process for making a new account:
For questions I asked after the walk-through, I also got insight from my users over the button usability, text readability, confirmation, and data collection flow. There was a general consensus across all questions:
For questions I asked after the walk-through, I also got insight from my users over the button usability, text readability, confirmation, and data collection flow. There was a general consensus across all questions:
Now, I know the main usability issues: small and obstructed buttons, readability concerns, and frustration over the data collection. Super grateful that these were brought to my attention.
Now, I know the main usability issues: small and obstructed buttons, readability concerns, and frustration over the data collection. Super grateful that these were brought to my attention.
Key Features of Purity’s Redesign
Aside from fixing this accessibility issues, we also wanted to add some more features to the sign up, log in page:
Key Features of Purity’s Redesign
Aside from fixing this accessibility issues, we also wanted to add some more features to the sign up, log in page:
User Flow
Because we’re adding some new features to the sign up, log in component of Purity, I made sure to add a user flow before I started redo-ing the wireframes and creating new ones.
Here, I kept in mind of the different purposes our users were starting off with: logging in or signing up. Considering the results from the user research, I tried to make it as clear as possible and considered areas where I would need to focus more accessibility!
User Flow
Because we’re adding some new features to the sign up, log in component of Purity, I made sure to add a user flow before I started redo-ing the wireframes and creating new ones.
Here, I kept in mind of the different purposes our users were starting off with: logging in or signing up. Considering the results from the user research, I tried to make it as clear as possible and considered areas where I would need to focus more accessibility!
ITERATING
Iterations
From the user research, I set onto improving my old design for a much needed revamp. My main priority here was accessibility: especially for color, size, and spacing. There was so much to change, and I’m very grateful I made those changes!
Please note that I only showed the pages that had redesigns — I didn’t include the third-party platform wireframes on here because user testing has not been finished yet.
Iterations
From the user research, I set onto improving my old design for a much needed revamp. My main priority here was accessibility: especially for color, size, and spacing. There was so much to change, and I’m very grateful I made those changes!
Please note that I only showed the pages that had redesigns — I didn’t include the third-party platform wireframes on here because user testing has not been finished yet.
Please note that none of this is perfect, finalized, or even deployed yet - it’s still being passed off to the developers to implement! There’s always room to improve.
Please note that none of this is perfect, finalized, or even deployed yet - it’s still being passed off to the developers to implement! There’s always room to improve.
Lofi & Hifi Wireframes (for new features)
After making the user flow, I realized that there were some wireframes that I had to create from scratch (third party integration, confirmations). I made a few lofi and hifi wireframes to later implement in our prototype — still doing user research on these!
Lofi & Hifi Wireframes (for new features)
After making the user flow, I realized that there were some wireframes that I had to create from scratch (third party integration, confirmations). I made a few lofi and hifi wireframes to later implement in our prototype — still doing user research on these!
Purity 🌿:
Redesign Prototype
Curious over how the sign up/log in redesign turned out? Take a look here.
Purity 🌿:
Redesign Prototype
Curious over how the sign up/log in redesign turned out? Take a look here.
Sign up and Log in. You can create your account in no time or hop right back in if you've been here before. Plus, to make it easier for you, we even added third-party integrations.
Data Collection. To finish signing up, we’ll need to know your age, gender, and any other relevant medical background.
So... what did I learn?
There’s always room to improve. Especially with design, I find it amazing how I can go back to my previous work and realize how much I can change to make it better. It’s like seeing my previous projects in a completely different lens! Design truly isn’t linear.
Accessibility should always be the number one priority. Always! In my previous wireframes, I remember designing with aesthetics mainly in mind and thinking they were the best designs ever — but that didn’t turn out well. It’s always more important to ensure that digital experiences are accessible to everyone: making your design pretty doesn’t make it useful.
There’s always room to improve. Especially with design, I find it amazing how I can go back to my previous work and realize how much I can change to make it better. It’s like seeing my previous projects in a completely different lens! Design truly isn’t linear.
Accessibility should always be the number one priority. Always! In my previous wireframes, I remember designing with aesthetics mainly in mind and thinking they were the best designs ever — but that didn’t turn out well. It’s always more important to ensure that digital experiences are accessible to everyone: making your design pretty doesn’t make it useful.
© 2024 by Lucy Han. Created with this playlist on repeat ᕕ( ᐛ )ᕗ
design
develop
leadership
me!!!
design
develop
leadership
me!!!