An e-commerce website for a local garden centre
Concept project | Mid-Fidelity
UX Design | e-commerce desktop website
The Client
Growing Garden Supply are a small neighbourhood garden supply shop. Their business model is based on excellent customer service, reasonable pricing and keeping it local. They have a highly curated inventory. They want to showcase their products through a website while maintaining their brand image.
The User
Our target persona is Max. He’s a 34 year old entrepreneur. Max likes to find balance in his stressful life by keeping up with his hobbies. He avoids shopping at big retailers and likes to support his local businesses.
He gets frustrated by not receiving tracking information, by unhelpful customer service and things that are unoriginal.
Problem statement
Max wants to plant some daffodils at the weekend but doesn’t have all the items so wants to get everything ready to go for Saturday.
Solution
An e-commerce website for a local garden centre where Max can order items and have them delivered to his home.
Research Phase
I began my research by conducting a competitive analysis. I compared big national companies along with small independents. I compared website features, navigation titles and page layout
I found the big stores like B&Q didn’t have that local community feel. some of the smaller local garden centres didn’t have the ability to buy any items. Their websites were more of a digital show room for their products.
The competitive analysis was useful in seeing how other websites organised their content in term of headers and navigation.
Information Architecture
The client gave me a list of the products the store stocks. This was used in a card sorting activity to see how users would categorise the items. I conducted 4 open card sorting activities. The users could link any items together using any category they could think of.
The categories the users came up with were quite specific. Common trends were starting to appear between the users. These categories could be combined under more general themes. The general themes were derived from the competitor analysis and were used for the first level navigation. After this process I was able to generate the site map
The navigation headers were Tools, Gardening, Outdoor Living and Flowers and bulbs.
The other navigation headers were created to satisfy the brief. For example the client wanted the site to have a page on the companies heritage hence the Heritage page.
User journey
From the site map, persona and scenario a user journey could be mapped out. Max wants to plant daffodils at the weekend. He realises he has no daffodil bulbs so he navigates to Growing Garden Supply's website. He finds the bulbs he wants and buys them. He gets them delivered to his home the next day.
An experience map was also created to visually represent his emotions as he interacts with the website.
Max gets frustrated by not receiving tracking information when he uses other e-commerce websites. This was plotted around the unhappy face on the emotion scale. Design elements can be created to work around this pain point. In this case when the user receives the confirmation popup, a message is included which reassures them that tracking information will be sent.
Iterations
The initial sketches came from a design studio with 5 others. We rapidly generated many different ideas for the item screen. We all voted on our favourite design. As a group we generated one design combining our favourite features.
Below were my initial sketches for the design studio for the Item screen. Some of my features were liked by the rest of the group. The outcome of the design studio is also shown below. As a group we came up with this final design taking into account everyones ideas.
Product page
The Product page didn’t receive many iterations. It addresses some key features outlined in the brief. For example viewing one product per page. The “Tips” section helps establish the brand in terms of their knowledge. Customers can view more than one image of the product and they can read and write reviews on items. Finally it also allows customers to view related products.
The Home page
The home screen was also designed with the brief strongly in mind and keeping to the same design theme as the item page. Features like browsing items that are popular or browsing by brand were included.
Login screen
The checkout process received the most iterations as I streamlined the process and made it intuitive. Initially it was a 6 step process to purchase items. The steps were “login” “Enter details” “Delivery” “Payment” “Review” and “Confirm”.
The first iteration of the login page confused my users during testing of the paper prototypes. Login and Create account were merged into the same process. To get around this I split log in and sign up into two distinct columns. After some research on best practice I got rid of the create account option in the first step as it creates unnecessary friction for users who don’t hold an account. Users can continue to checkout as a guest.
Delivery screen
My initial sketches of the Delivery screens had users entering the information manually every time. Some testers asked:
“What was the point in logging in to my account if I have to enter details every time”
I added the saved “Delivery Address” and “Saved Card Details” features. This was done in the form of a drop down and radio buttons. This saves times and leads to a more enjoyable experience for the users.
Due to having saved user details I was able to remove the “Details” page so I reduced my final checkout process to 4 steps.
Prototype
Conclusion
From paying attention to the brief the home page and item page are familiar and user friendly. Thanks to user testing and research into best practice the checkout process is intuitive and frictionless.
Next steps
If I had more time I would try and satisfy more of the business goals like introducing a loyalty scheme. I would also work on a mobile responsive site and like to convey the brand image further through the visual design of the website.
