Before the initial research, the persona I had in mind might have been more of a bargain hunter. After the interviews revealed multiple users having more interest in quality and ethical clothing, it seemed best to create the persona, Pauline, to better empathize with the modern online shopper.

Pauline is a busy 32-year-old professional who wants to find higher-quality clothing brands to keep going back to. She is a quick shopper and goes online when she knows she needs an item but doesn’t want to get hung up in any complicated processes.

To determine how the site architecture would best support the users, I conducted a remote open card sort. There were 30 cards, each displaying a clothing product–users sorted these into categories that made sense for clothing navigation.

Based on the previously gathered insights, I was able to build the sitemap and task/user flows to better define the information architecture of Lichen.

With the supporting research, it felt important to have the user path have a simple and clear path to checkout. I also made sure to show a way for the user to find sizing and quality information, as well as the company about page to learn more about their ethical practices.

Based on the user research, I felt it important to keep the following in mind while making my sketches:

• Highlight easy return process to give confidence for online confidence

• Create transparent quality + ethical call outs

• Include varied and high-quality product images

As I built out the wireframes more fully, I found it important to start determining what content would take prioritization on the pages.

For the homepage content, it was clear from the research that sustainable/quality callouts should be high on the page, letting users know about the brand as soon as possible. Return information would benefit from being high on the product pages, but still should be highlighted on the home page.

Users are visiting this page to shop, so it was also important to highlight the best sellers right away. Trending item callouts were placed lower on the page, as I did not have concrete research on how users felt about this–later research would actually show that this section should better prioritize sale items, which can be seen now in the final prototype screens.

My goal was to have the logo design abstractly represent the word Lichen–a moss-like plant often found on trees. Since research findings supported a need to shift focus more towards sustainability, a logo representing the growth of a plant is a nice touch.

I started with a simple shape, showing a burst of abstract lichen branches, in a few different shapes and orientations.

Continuing with the same theme of an organic, neutral brand, I chose fairly minimal colors for the brand styling. The research supported a need for an uncluttered and clean design, which meant keeping things simple and not overwhelming. I decided that an olive would work well as the main accent, with a few light creams as secondary colors. The olive is a nice tie-in to sustainability, as well as the name Lichen. The colors together create a trustworthy and calming effect.

Since the wordmark was an elegant serif, I wanted to keep the main site text a sans serif. The font Poppins paired nicely and kept with the wishes of the user and company to have a modern and practical design.

 A few notes about my design decisions:

• Quality and sustainability call outs were placed high on the home screen and throughout the product page, based on the research indicating a positive impact with that shifted focus

• Easy return process called out lower on the homepage, but high on the product page–added to increase user confidence in purchase and trust of the brand in general

• Women, men, and children offerings throughout the homepage to support a variety of potential users and give them product offering information early

• White text over the product images was used to add to an airy, ethereal theme–will be easier read with hover state overlay in prototype

Filtering

There wasn’t clear insight from the research on whether customers preferred filtering for products over searching, but what was conclusive is that users can easily be confused by complicated options. I wanted to create an intuitive accordion for the filter options, and found this challenging with Figma’s prototype options–in the end, I think the final result presented a fairly natural accordion, that would only be improved in development.

Adding items to the cart

Based on the research, users needed to trust a few things before checking out with a product: the quality, the size, and the brand in general.

To make sure users felt this in the prototype, I wanted to be sure that they could easily find the material information of the item, as well as a link back to the general quality information if the user continued scrolling below and past the product. Reviews are also linked at the top of the page and below, aiming to give the user more confidence in purchasing.

A size guide is linked next to the size options, which if expanded on, would show a few options–a standard measurement guide, as well as a fit comparison guide for those that don’t know their measurements.

Testing for success

The usability testing went well, and based on the feedback and reactions of the participants, the Lichen brand update and responsive website design was a success for the user.

All participants were able to understand the task flows easily and navigate throughout the prototype without assistance. Users reacted favorably to the brand and overall tone, describing the site as “comfortable, airy, thoughtful, earthy, and trustworthy”.

Opportunities for Improvement

There were a few points of confusion. Participants pointed out some inconsistent copy from page to page, which just supported the need to make things as consistent as possible. Users preferred copy on quality and sustainability, in particular, to be the same from page to page. Otherwise, they assumed the links would go to different places.

Another point of confusion was the prototype itself–there are a few quirks with the hover effect that I realized, after a few hours of research, were currently unavoidable due to the limitations of Figma. I now understand the need to explain to participants that any “prototype glitches” can be ignored, but to still point them out.

Priority Revisions

Based on the test insights and affinity map, I determined the most feasible and important revisions that needed to be made. They mostly consisted of simple copy updates, but some design changes to the product page, in particular, were more robust.

These revisions are finished and can now be seen in the final prototype.