Within this project:

Clariant

iOS app
UX/UI Design, Branding
Project Overview
Clariant is an AI based application developed for users to discover what over the counter products will work best for them based on information provided about previous product use. In future, Clariant plans to expand into hair products, make-up and other areas, but will currently focus on facial cleansers/moisturizers and the prevention of acne. Using a database of ingredients in products, the app is able to compare your positive or negative reactions to products and determine common ingredients that may be causing such reactions and offer recommendations on products to try next. Users are also encouraged to supply photo submissions of their product names and ingredients for entry into the mainly crowd-sourced database.
My Contributions
Clariant was a full development project from end to end, beginning with research to determine best features and moving into mapping, wireframing, branding and finally usability testing.

As someone who has struggled with acne throughout my life (along with 84% of the population!), this project was important to me to truly show how complex understanding your personal skin biology can be, but how easy it can be to care for once you do.
view prototype
Research
Competitive Analysis
user interviews
data synthesis
persona creation
storyboarding
Though the overall idea of Clariant was clear we hoped that through detailed research we would uncover lesser known details in terms of what user are looking for (even hoping for!) when it comes to an app relating to their skin care.
Research Goals
  • What are the main skin issues a user would like help with?
  • What are the simplest ways a user would like to interact with an app to assist them with skincare?
  • How often would a user ideally be using Clariant?
  • What information is a user looking for in order to choose a skin care product relating to skin issues?
  • What are a users current pains within finding a solution to their skin issues?
User Interviews
The interviews held, as they typically are, were extremely informative. I approached 5 women that fit my persona and asked them detailed questions about their current skin conditions, their skincare goals and any pain points they may have within finding their current or future skincare solutions. My findings showed four key details to pay attention to:
Simple, actionable steps to better skin should be quickly accessible
A way to track skin reactions history with a product are important
Data entry points should be optional but as seamless as possible
Some users have obscure products, a large and growing database is necessary
Summary
User research clearly shows that while acne and the resulting intricate skin care regimes it requires are extremely common, confidence in what positively affects your skin is extremely lacking. The world is changing and people are leaning towards less harsh medications and ‘band aids’ that simply erase the symptoms of bad skin and are beginning to realize they need to find a solution to the problem itself. Being sure that the app has a quick, straight forward entry system with the option to delve deeper if the user wishes is important. Everyone wants beautiful skin, but everyone has different capabilities to commit to long term data input and research. Additional data entry points like diet, sleep habits, and menstrual cycle would be welcome additions.
Information Architecture
sitemap
feature mapping
Being that Clariant was looking to solve such an intricate problem as simply as possible, several iterations of key deliverables were needed and as I moved through our design process the project naturally evolved. Knowing this, I focused first on developing MVP deliverables for things like the sitemap, being aware that these would be adjusted later on we learned during development.
Interaction Design
Low fidelity wireframes
Now that information architecture was firmly in place, I was able to confidently move forward with fleshing out the more detailed flow of the app as well as dive into initial responsive wireframes.
Low Fidelity Wireframes
Having completed research and organization of our features, I moved into the basic rough structuring of the site. Knowing that our focus was user flows and simplicity, these wireframes were created as an MVP for initial user testings.
[ click thumbnails to expand ]
User Interface
logo design
brand identity
Style tile
Mid fidelity mockups
high fidelity mockups
prototype
Skincare and skin issues are an extremely personal thing. Knowing this, great care was placed into the positioning of the Clariant brand and overall feel of the app. Cleanliness, health, nature, expertise and approachability all needed to come across in a compact, efficient and clean design.
The Brand
I had one main word that I was working towards throughout the design process that I felt covered what I was trying to emulate with Clariant most holistically: clean. Clean skin. Clean design.

The logo above uses a classic serif font, to elicit feelings of trust and reliability, as well as all lower case, to emulate approachability. I wanted the logo to give users the feeling of knowing that Clariant has their best interest at heart and truly wants to help them.
The Style Tile
Clariant is about learning about your natural skin and what it needs, without harsh medications or prescriptions if possible, so I brought in colors of nature through soft sage tones as the main brand colors. A brighter blush pink was introduced as a highlight color to introduce a bit of pop while still keeping things soft and relaxing.

A singular sans serif font was used across the board to keep focus on the task at hand, your skincare, rather than trying to dress up the design.
Mid Fidelity Mockups
A lot of features need to be covered in a small amount of screen space, meaning I had to optimize the appearance of everything size-wise while still keeping things user friendly and intuitive. A mid-fidelity mockup was created to ensure I was on the right path and would also give me the most opportunity to iterate.
[ click thumbnails to expand ]
High Fidelity Mockups
The mid-fidelity mockups above were the perfect step in helping me reach a final product. Through initial user testing I was able to discover several pain points and favorite features that I focused on within the final design to ensure the best overall experience possible for Clariant users.
[ click thumbnails to expand ]
Prototype
The Clariant project actually included 3 separate rounds of user testing, beginning with our Mid-Fidelity initial tests. From there a high-fidelity version was created and tested, resulting in many useful priority revisions that were completed before a final version was created.
view prototype
Usability
user testing
data synthesis
affinity mapping
Iteration was key in this project. Through 3 separate rounds of user testing we learned more and more about what users were most willing to input in terms of data and what they would like to see as output in return. Features were adjusted, buttons were resized, and eventually a final product was born.
Affinity Mapping
Through final user testing additional notes were created and synthesized into an affinity map for further iteration. Once priority revisions were complete, the project would be moved through the export process via Zeplin for development.
[ click thumbnails to expand ]
Conclusion
84% of the population struggle with skin issues sometimes resulting in psychological and emotional damage. This is typically waved away as 'vanity'. Through the creation of Clariant based on extensive research on users wants and needs, there is a now an app that presents the possibility of putting the power of healthy skin back in the hands of users and removes the need for the blanket solutions of prescriptions and harsh chemicals.
← previous project
next project →
Looking for a designer for an upcoming project?
Work with me
Above all, always

iterate.

iterate.

iterate.

iterate.

iterate.

iterate.

iterate.

iterate.

Interested in working together?
I'd love to hear from you.

Whether it's a new freelance project, a possible contract or a position, I'm always interested in connecting and hearing about new ventures, ideas and possibilities.

Woohoo! Talk soon!
Oops! Something went wrong while submitting the form.