.png)
Background
Sunset Nursery is a local LA gem, but their website is far from polished. For this project I set out to redesign the website with the goal of improving usability via simplifying the site navigation and improving shopping tools.
Original website - sunsetblvdnursery.com
.png)
Problems
The Sunset Nursery website is difficult to navigate, visually outdated, and required users to have extensive knowledge of their inventory in order to find a product. My first goal was to define the exact causes of these issues.
Key Insights
I used the following research methods to dig deeper into the issues users were experiencing with the site: business research, market research, heuristics analysis, usability tests, card sorts, and tree tests.
All users had difficulty navigating to specialty items. (100%)
Many users reported being confused by category language. (75%)
Most users struggled to find a product that fit within specific criteria. (75%)
Personas
With research complete and the key insights discovered, I moved on to generating personas. These helped me articulate frustrations and goals amongst a typical Sunset Nursery website user.
Persona 1
%201.png)
Persona 2
.png)
Solutions
01
Update top nav to simplify categories and usability.
02
Revise product pages to allow users to more easily locate specific products
03
Modernize website visual language and identity.
Design Solutions
To ensure that I'd achieve my goals by the end of the process, I came focused on interactions that correspond to each one.
01. Updated Navigation
Adjusting category groupings and language was important to ease of navigation. The updates were made based on feedback from the card sorts.
I also updated hover functionality to include full category breakdowns.
02. Revised Product Pages
All users tested experienced difficulty finding specific products on the existing site.
I addressed this by better organizing product info and adding filter/sort features to the pages.
.png)
03. Visual Redesign
The existing site has a dated/dark visual style. I felt it was important to address this as all users tested remarked on the website feeling dark cluttered.
To accomplish this goal I lightened up the site and added a green gradient for CTAs.
Design Process
In order to get to the above solutions, I generated concept sketches, wireframes, and a visual style guide. Ultimately these steps led me to my final design.
Wireframes
Prototype
User Testing
Confusing language - To address I changed "Guides" to "Plant care" in main nav and adjusted "Level" to "Difficulty" in plant shopping filter.
Users unsure if their "add-to-cart" action was successful - I addressed this by adding an "Added to cart!" button state that appears after user interacts with "Add to cart" button.
Out-stock-flow missing - I added a flow to the prototype to show when an item is out of stock and how they will be notified when it is back.
Style Guide
.png)
Final Designs
.png)
