Crysteous Website

Crysteous is a small business that sells sustainable deodorant. I led a team of 5 UX/UI Designers to design a website that allowed users to easily find information about the company and the product.

My Role

Team Lead, Market Research, UX Design, Visual Design, Branding

Figma, FigJam, Slack, Zoom

6 weeks (Dec. 2022 - Jan. 2023)


Fragmented online presence results in customer frustration

Previously, Crysteous had an existing website that was overly abstract, providing insufficient details about the company and its products. This led to a high bounce rate and ultimately the discontinuation of the website.

Crysteous began selling their product through various third-party websites. However, the lack of centralized information created a feeling of frustration and mistrust in potential customers seeking more information about the company and product.


How might we improve online presence and increase trust in users?

Our goal was to make information more accessible to users and increase trust between client and customer. To achieve this, we have chosen to concentrate our efforts on developing a dedicated website that allows users to effortlessly find information about the company and its products.


Researching our competitors 

Before designing, it was important for us to research and understand what competitors were utilizing in their website. Our clients emphasized conveying clean, sustainable, and luxurious imagery, so we analyzed competitors in a similar space such as Biossance, Ralph Lauren, Soapply, and Ursa Major.

After gathering some insights, we learned that most of these brands had prominently displayed product reviews, eye catching descriptions, and clear navigation.

I also made note of visual elements that were commonly used, such as using sharp corners, a mix of serif and sans serif fonts, and stylized banners and footers.


Communicating user needs 

Due to time constraints for this design phase, user research surveys were not feasible. To address this limitation, we created user stories as a means of communicating and prioritizing user needs within the project.

  • As a customer, I want to understand how the product works to make sure I am using it correctly.
  • As a customer, I want to read reviews about this product to make sure that it is trustworthy and worth buying.
  • As a customer, I want to learn about this company to ensure it resonates with my values.
  • As a customer, I want an easy way to purchase this product so that I can quickly complete my transaction without complications.
  • As a customer, I want to be able to contact someone with questions that I might have so I can have my issues resolved.


Mapping out user paths 

My team and I then translated the user stories into user flows. We wanted to focus on allowing users to quickly gather insight about the product through an about page, contact form, product descriptions, and reviews.


Visualizing the information architecture of our website 

We focused on clearly presenting information for users when designing the low fidelity wireframes. Keeping the client and user needs in mind, some features that we included were:

  • The client’s promotional video
  • Product reviews in the home page and product page
  • Additional product information in a drop-down format
  • A detailed about page to showcase company background
  • A contact form for users to ask additional questions


Balancing user needs and client needs

🚩 After submitting the low fidelity wireframes to the client for feedback, they decided that they wanted to include the promotional video in the hero header on auto-play with full volume. This was not ideal because this could cause a distracting experience for users, leading to immediate user engagement issues. However, the client was very insistent on incorporating the video in the hero header.

✔️ To remedy this, I suggested to instead utilize muted gifs of the video with a darker overlay. The clients would have creative freedom to choose gifs that portray the best aspects of the deodorant. By doing so, the clients would still be able to highlight the product while minimizing the distractions that users would face. 


Exploring design directions

My team and I individually created 5 different UI iterations of the homepage to present to the client. Utilizing the patterns found from our competitive analysis, I created Iteration 1, which focused on a clean and minimalistic layout that conveyed the imagery of sustainability and luxury.

The clients elected to move forward with my UI iteration and we created a style guide based on Iteration 1.


Establish visual consistency across the website 

I created a style guide with another team member based off of the chosen iteration. Creating this style guide allowed us to apply the same color schemes, typography, iconography, UI elements, and grid size for all of our pages to maintain visual consistency. 


Bringing the design together

After the client approved of our style guide, my team and I applied the colors, typography, and images to our high fidelity wireframes.


Handing off the design

Since usability testing was outside of this project scope, we wrapped up the project by providing detailed annotations of our designs. We provided measurements of our spacing and UI elements for our client's developers and explained intended functionality for a seamless development process.


The client gave us such positive feedback!

Our clients at Crysteous demonstrated immense satisfaction with the final result of our designs.

"I'm very happy with how our pages came out. It looks and feels great! Thank you!"

— Walid D. (Founder)

"Everything is great! The design looks amazing, wonderful work."

— Ines D. (Co-Founder)


Leading the team and client communication

Since this was my first time leading design on a team, I wanted to ensure a smooth project for all stakeholders. I facilitated weekly team meetings and co-working sessions to make sure we were all on the same page. I also honed some important soft skills, such as how to ask clarifying questions and present solutions to the client.

The clients were pleased with the results and the team celebrated this win! I was grateful to be able to deliver results together alongside my team.


Opportunities to improve the product

Due to the short timeline we had, I believe that there is room to fully flesh out our design more. If we had more time to improve on our product, I would:

  • Create a more in-depth prototype to demonstrate interactions. This would allow us to further demonstrate intended functionalities to stakeholders, as well as allow for potential usability testing.
  • Conduct usability testing and implement feedback. I would have liked to gather insight to see how effective our design decisions were and iterate solutions based on user feedback.
  • Create a responsive version of the site. Many users shop on mobile devices in addition to desktop so it would be a good idea to create an optimized mobile viewing experience and allow for a wider audience reach.