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.
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.
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.
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.
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.
.png)
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.
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.
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:
🚩 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.
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.
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.
After the client approved of our style guide, my team and I applied the colors, typography, and images to our high fidelity wireframes.
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.
Our clients at Crysteous demonstrated immense satisfaction with the final result of our designs.
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.
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:
.svg){kind=icon}
.svg){kind=icon}
.svg){kind=icon}