Cactus store e-commerce website redesign

A easier way to buy more of cactus you love.
Type: Solo Project
Timeline: 2 weeks
Role: UX / UI Designer

The Project

For this project I was provided a brief to redesign a e-commerce website which due to support local small business. After search on google, I located this site as my redesign target -- Cactus.Store which is a company selling cactus plants and some relevent products online, they also provide some garden service like green house and furniture customization.

Research

The Contextual Enquiry revealed some usability issues

The purpose of the Contextual Enquiry was to quickly and easily find usability problems related to shopping experience and product listing. I went through the whole website while assessing the site against  general principles for interaction design of a e-commerce website. Below are the key issues I discovered.

Mapping

Category missing

Users found it is hard to directions to groups of products.

Visibility

Mess layout & texts

They have some good images but too much text and mess layout make all information hard to read.

Efficiency

Unclear navigation menu

They don't provide a clear navigation menu to tell users where the shop entrance is.

Clarity

All products list on one page

All products list on one page makes users hard to find the product they want.

Competitive analysis

Gaining insights into how competitors encourage users to complete product listings

To gain some inspiration for my project and see what good features others e-commerce site provide. I conduct the C&C analysis. I began by identifying 4 main competitors, they are all popular online plants stores. The direct competitors analysed included Bloomscape, The sill, Easy Plant and Leafy.

Comparative Analysis

The indirect competitors were Ikea, HomeDepot and Stock X. My goal was to compare and identify common and unique features across these sites and find potential opportunities for Cactus.Store to provide a better shopping experience. The most important takeaway from this analysis was learning how different websites use these features help users find the products they need as easy as possible,  This was helpful insight that helped me determine the focus points of the next research phase.

Current Site Flow

To better understand how the current site works to find the redesign key points, I created a user flow that accesses to purchase a plant from browsing to check out as a happy path. The most important takeaway from this part is the website lacks a searching feature, so whether users have product options in mind or not, they have to start from a category to find the relevant items. It could be a big frustration.

Empathize

Discover and understand users

Bring the key point I found in user flow and c&c analysis, I wonder know users more, so I conducted the user interview to see if my assumptions really impact the users online shopping feeling. I asked some questions about their previous experiences with plants purchase and online shopping.

Interview Insights

From the results of the interviews, I used affinity mapping to organize these insights. I put all the audience quotes together and tried to find some trends to clarify what my target audience needed during online shopping. Eventually categorized nine themes with 31 insights. I list five main insights my participants mentioned most. Affinity map details here.

”I want a clear category to help me find what I need for a quick“

“I’d love to see some relevant items if I need them”

“I feel helpful read other customers’ reviews first”

“I use filter to target my product efficiently”

“I want a more detailed description of the product to make sure the actual thing is the same as the picture”

“I wonder a easier way to check out ”

The Persona

According to my synthesis data through affinity mapping, I created a persona , Linda who is a hard working designer live in Los Angeles, she is a plant lover but not a expert, it is hard for her shop by terminology. Based on my persona, I synthesized all her needs into problem statement :She seeks the quick and easy online shopping experience can find her desired product and check out as soon as possible.

Journey Map

In User Journey map process, I created a scenario on what was the process of buying a cactus on current website as my persona Linda. I splite 5 main process from before visit our website to check out.

See Journey Map Detail here

Define

At this stage, it was time to redefine the goal and narrow down its scope based on the insights gained from users.

Problem Statement

Linda is a plant lover but not a plants expert, it is hard for her shop by terminology, She seeks the quick and easy online shopping experience can find her desired product and check out as soon as possible.

Solution

How might we?

I focused on the following improvements when designing the initial low-fidelity wireframes.

A better flow

After defining the pain points and solutions through Journey map,I created a new user flow, add on search by keywords feature and products filter to help user find their product more fast.

Site Map

The site map was created to give me a clearer picture of the navigational hierarchy for the new website.

Design

Wireframes

After finishing the sitemap, I created the wireframe by Figma; I used my site map and new user flow as a guide and organized all my insights from the exploration phase. Make sure to prioritize the features that best address the users' needs throughout the website.

Prototyping & Testing

Refining the solution through usability testing

I conducted a usability test with 4 participants and asked them to complete three different scenarios to test if the website can reach their goals. Overall users were able to locate products and information easily fits my expectation. However, most of them didn’t hit the buy now button, they were afraid of hiding fees, they prefer to see the ESTIMATED TOTAL before the purchase. So I removed the buy now button in my final design.

Final Design

Home Page

For the home page, I redesigned the layout to make all information more readable. I added a secondary navigation menu and search bar to help users find their products more efficiently. Creating the feature items section gives users more options. Social media and our story help users better understand the company and promote their business. Contact information as a footer.

Category Page

On the category page, I also redesigned the lay out, organized nine items per page, and contextual navigation to help the user know which page they are on. Add on a filter feature help them find their products more efficiently

Product Page

For the product page, I made a review section, users can read some reviews before they purchase, I also add more descriptions like care tip help users know their product better.

Check Out

I designed a save payment and address feature hope to save users time when they check out.

Final Walk throuth

The prototype brings the form to life

The updated product listing form is easier to navigate, provides clear guidance and instructions, and is flexible for vendors to use.

Wrap-up

Next steps

In order to further improve the shopping experience on Cactus.Store, If I got more time I will :