Duration: Jan 2022 - Jan 2023
Team: Ariana Pineda, Ahmed
Role: UI/UX Designer, Design Lead
Tools: Figma, Photoshop, Wix

Over 3 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…

Introduction

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.

——— 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:

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!

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:

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.

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:

——— IDEATE

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.

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!

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.

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!

Purity 🌿: The Final Prototype