Nature's Treasures | Payton Russell

Nature's Treasures | Website Redesign

Reintroducing a brand with a revamped e-commerce site

Overview

Project Brief

Exploring the nuances and best practices for user interface design, I chose a local retailer who could benefit from an updated and improved e-commerce website. Starting with testing and evaluating the current product and then leveraging usability testing, information architecture and design conventions, I could make research-backed suggestions for improving the user experience.

I designed and built an interactive high-fidelity prototype that provides an intuitive, conventional, and findable shopping experience based on my research findings. Web layout and UI best practices were implemented to ensure that users can confidently and intuitively grasp the value of the site and find and purchase products.

Project Timeframe: 3 weeks

Methods Used

The following were leveraged in order to arrive at the final solution:

Competitive & Heuristic analysis
Usability tests
User personas
Journey mapping
Card sorting
Site mapping
Sketches & Wireframes
Prototyping

Research

Competitive Analysis

I started my research by performing a competitive analysis in order to better understand the market, product, and goals of the project. Through researching the competition, I gained actionable insights that could not only improve the usability of the online platform, but enhance the identity of the brand. By summarizing the competitors' strengths and weaknesses, I could then begin to identify some major design opportunities.

Key takeaways

Competitors utilized seasonal branding on their home page to promote products
Competitors included an "about us" in primary navigation in order to share business story
Competitors included the option to "save" or "favorite" an item for later viewing or purchasing

Visibility of System Status

The design should keep users informed of what's going on, but with confusing filter parameters that don't properly operate as well as unclear navigation, the system status not clearly communicated.

Flexibility & Efficiency of Use

The interface should implement flexible processes which allow the user to pick whichever method works most efficiently for them. Limiting navigation and lack of shortcuts within the current platform result in a loss customization and personalization for the user.

User Control & Freedom

Within the current platform, actions are sometimes forced onto the user, leading to a lack of control and sense of freedom. For example, users are automatically taken into their shopping cart when they add an item.

Aesthetic & Minimal Design

Visual clutter and lack of organization exists throughout the current site, making it feel dated. Unnecessary elements within the interface distracts from important information and seems to compete with the primary goals of the brand.

Heuristic Evaluation

Along with researching the company's competitors, I gained further insight into the product’s usability using heuristic evaluation. I assessed the existing interface using a checklist of rules of thumb in order to detect any pressing flaws in the overall operability of the site. I discovered that the following Nielsen usability principles were ignored most severely -

Task 1

"Find one Amethyst ring and one Garnet ring and add them to your cart."

Task 2

"Add a set of incense sticks and a holder to your cart."

Task 3

"Find an article about healing crystals for a Taurus to learn more."

Usability Testing

In order to identify the primary usability issues on Nature’s Treasures’ website, I conducted a series of usability tests. I then synthesized a list of findings, insights, and usability recommendations for improving the site.

Users were frustrated or confused with the following –

The inability to navigate the website easily to find specific products and information
The lack of searchability
Poor-defined categories and overall lack of information
The ineffective filter options
Visual clutter and lack of organization

Impactful Quotes

"I was forced to have to figure out all of its quirks."

“I had to stumble upon everything. I wasn’t directed at all.”

“It feels like the website is fighting me”

Project Goals

Problem

The Nature's Treasures website is difficult for users to navigate through due to lack of structure, organization, and inoperable filters. With a lack of information, the website expects its users to be experts on all products.

Solution

Nature’s Treasures can improve the user’s experience by making navigation easier, providing the customer with more information about the products, and making the interface simpler and more representative of the brand.

Key Recommendations

Using the insights I gained from competitive analysis, heuristic evaluation, and usability testing, I then developed several key recommendations that I think would most effectively improve Nature Treasure's e-commerce user experience

Article Placement

Add a blog tab in the navigation bar so users know where to access informative articles

Restructure Filters

Restructure filter parameters to make them more effective

Landing Pages

Give every category a landing page with more information on different types of products

Design Aesthetic

Enhance and simplify interface to make it more modern

Proto-Persona & Journey Mapping

Using my research findings, I then formed a proto-persona, which further helped inform my design decisions. Take a look at Lydia —

I discovered the target user are people who are interested in the types of products offered by Nature's Treasures but don't necessarily know much information about them. Lydia represents this user base — those who are seeking to learn and discover more about the products offered via a simple and straightforward interface.

I then created a journey map in order to communicate her primary pain points visually. You can see below her overall experience interacting with the platform, and how she's feeling throughout the process.

I then moved forward with using a method of card sorting to evaluate the navigation structure of the current site. I began by creating 35 cards with the titles of the secondary navigation pages for the current Nature's Treasures website. I then found participants willing to group the stack of 35 cards into as many groups as they wanted and label them.

From there, I saw themes and categories emerging that I would then use to create an updated website structure. Generally, participants created between 7–10 categories or groupings for the cards. Of the groupings created, the following, main categories emerged:

About
Articles
Jewelry
Crystals
Incense & Burners
Tarot
Decor

Open Card Sorting

Design

Site Map

Using my findings from the card sorting, I created a site map to visualize the navigation structure of the new and improved website. I revamped the existing structure by creating clearer primary, secondary, and tertiary categories that were informed by the groups that were intuitively created by the card sorting participants.

Wireframes

With the overall anatomy of the site set in place, I created a series of wireframes in order to figure out how the interface would be laid out. I focused on building out the main pages of the site — the home page, a category landing page, a product listing page, and lastly a product description page.

Prototype

Now that I had conducted research, synthesized my findings, and began ideation through wire-framing, I moved forward with designing a mid-fidelity interactive prototype. I went into creating this first iteration knowing that through user testing, I would gain valuable feedback that would help further inform my design decisions.

The focus of this round of usability testing was to check for the functionality of my design before moving forward with a high-fidelity prototype. I asked participants to locate a specific product, learn more about it, and then add it to their shopping cart.

Key takeaways from user feedback

All participants successfully completed the tasks given
Several participants mentioned that they were unfamiliar with the term "smudge" so including the "how to use" drop down with more information was key for less knowledgable customers

User Testing

Prototype Overview

The following main pages were built out in the final prototype:

Home Page

Product Listing Page

Product Description Page

Final Prototype Demo

Coming Soon!

Next Steps

Moving forward with further development of this product, I would continue with the following steps:

Conduct more rounds of user testing to gain further insight into the overall usability
Expand on the prototype by further development of product pages
Create a mobile version for shopping on-the-go