Redolence

Research

Analysis and Users

Before starting, I completed a competitive analysis. Trying to understand similar competition and how they serve their users. I learned sites placed too much or too little focus on pricing. Some lacked consistent web responsiveness or even favored the other gender. Below, you can see a quick summary of the analysis. From that, I created personas to understand potential users. Breaking down their motivations for using the site. They're people who believe when you look good, you feel good.

Ideation

Wireframing

I went through ideas considering pain-points, then created sketches and wireframes. I wireframed with a mobile-first approach since it's one of the best strategies to create a responsive design. I was focusing the wireframes on usability, design consistency, and web responsiveness. The more usable, the quicker users can complete a task. While having design consistency slims code and builds the brand.

Execution

Overall Design

Overall the UI of Redolence was about being straightforward to users. Placing emphasis on simplicity and good typography. To then create an experience that's transparent and trusting. Browsing through fragrances are simple and to the point. Allowing for the bottles to speak for themselves. I ended up implementing a show and hide. A show and hide is a feature where information can be shown or hidden. With the various amounts of information, this improves organization and information can be displayed or hidden at will. Also, using the show and hide from the site enables versatility and consistent interaction on mobile.

Product Detail Page (PDP)

For the PDP, I follow using that straightforward UI. I emphasized using type effectively, making the site clear for users and ensuring users don’t miss information. I continued by splitting elements for organization and pushing for strong responsiveness. Displaying quantity, size, price, descriptions, and reviews.

Checkout

Last, the checkout incorporates the show and hide. Allowing the checkout to be only scrolling and clicking. As users fill out the required information in a section, the next section will become available. Decreasing the likelihood of information overload and helps guide the user. Also, with the show and hide users can go back by scrolling and clicking the "+" to show filled out hidden sections. This creates consistent code, improving the overall usability of Redolence.

What I Learned

With Redolence I learned heavily about design systems to improve visual consistency, usability consistency, and overall efficiency. Creating products isn’t just a pile of UI components. It has a build, meaning, and purpose. Design systems are a total embodiment of ideas.