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
Tools

Figma, FigJam, Slack, Zoom
Timeline

Dec 2022 - Jan 2023
6 weeks

DESIGN PROCESS

Double Diamond Framework

During this 6 week design phase, we discovered the problems that our client's users were experiencing, defined the problems to solve, explored potential design solutions, and delivered one final cohesive website.

INTRO

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.

GOAL

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.

COMPETITIVE ANALYSIS

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.

USER STORIES

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.

USER FLOWS

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.

LOW FIDELITY WIREFRAMES

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:

FEEDBACK AND SOLUTIONS

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. 

UI ITERATIOns

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.

STYLE GUIDE

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. 

HIGH FIDELITY WIREFRAMES

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.

DEVELOPER HANDOFF

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.

CLIENT SATISFACTION

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)

LEARNINGS

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.

MOVING FORWARD

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: