DEVELOPING AN E-COMMERCE WEBSITE SOLUTION FOR A HARDWARE STORE
This was the second concept project I carried out during the User Experience Design full-time course at General Assembly.
- Sprint Duration: 1 week
- Output: a UX designed mid-fidelity E-Commerce website for a local hardware store
- Tools: Omnigraffle, Sketch, Invision, Sharpies, paper, Post-its
Loading Hardware has been serving the community of Aldgate, London since 1964. It’s customers consist of local residents, business owners and tradespeople.
Design an e-commerce site for Loading Hardware’s customers so they can buy its products online. These products can then be delivered to either their homes or collected from the store in Aldgate.
The brief provided a list of “Must Haves” and “Should Haves” features for the website, which will be discussed in more detail below.
I created a mid-fidelity prototype through the following process:
I used the Double-Diamond Design Process:
With a couple colleagues, we analysed six direct and indirect competitors’ websites and mapped them against the Loading Hardware Brief’s “Must Have”, “Should Have” and “Could Have” features for its e-commerce site.
Here are our findings:
Following this, I visited a direct competitor’s store in Aldgate, ‘Sids DIY’, to gain further insights, speak to its customers and also the store owner.
I interviewed people who had recently carried out DIY projects. This provided great insights into how users shopped for DIY and hardware goods, both online and offline. It also helped me understand users pain points.
One interviewee who has done a lot of DIY work to her home said:
“I feel that local hardware stores have better curated products available than the big DIY stores.”
A second interviewee (who also has done a lot of DIY building work on his home) said he normally only goes into his local hardware store for buying paint brushes and other bits and bobs that he needs quickly:
“I usually only look on my local store’s website for its opening hours.”
Another interviewee said that:
“Expert knowledge and customer reviews are important to me.”
These insights helped with the design of the website. This is discussed in more detail below.
By gathering the above research, I was able to develop my persona the help me develop the design of the e-commerce website.
Once I’d gained valuable insights through user research, I focused the design of the website on the following problem, solution and outcome:
I was provided with a list of products to be listed and sold on Loading Hardware’s website.
Using the card sorting method to help evaluate and design the information architecture of the site, I asked participants to organised the products into categories that made sense to them. I carried out:
- Four open card sorts (where I asked the participants to create categories for the products without any guidance); and
- Two closed card sorts (where I asked the participants to list the products under the category names I suggested, following the results of the open card sorts).
The card sorting, along with reviewing the competitors websites, helped me label the product category groups for the website and create the site map.
USER JOURNEY AND EXPERIENCE MAP
Based on the following scenario, I considered Yoshi’s hypothetical journey and experience of using Loading Hardware’s website to buy products, from when she realises she needs paint right through to achieving her goal.
“Yoshi needs to buy paint to be delivered to her home by Saturday morning so that she can paint her bookcase”.
From this, I was able to establish where Yoshi’s pain points would most likely be in this process so that these could be addressed through the design. As Yoshi’s main frustration is disorganised systems, ensuring Yoshi has a straightforward, easy to navigate checkout process is very important to her having a great user experience.
Understanding Yoshi’s pain points, goals and frustrations helped me create a very streamlined user flow:
This was particularly important at the checkout stage of the website where she was provided with the option to “Continue as a guest” to ensure she could avoid filling in more details than she may necessarily have wanted to on her first visit to the website:
DESIGN STUDIO WORKSHOP
With a group of colleagues, we sketched initial designs of the homepage and then collectively decided on the key design features, based on information we learnt in our user interviews and competitor analysis. I took inspiration from these ideas when designing my version of the website.
I tested the initial paper sketches with users and updated the design along with the feedback for low fidelity iteration. I repeated this to mid-fidelity when I uploaded the screens I designed in Omnigraffle and uploaded to ‘Invision’ for testing on a taptop with users.
Below are the key iterations of each screen.
- Users really liked the clear, useful categories in the bottom navigation bar.
- User testing the low-fidelity prototype: users were confused by the phrase “handpicked for you” in the context. So removed and changed to “Shop our Top Sellers” which users understood.
HOMESCREEN: FINAL ITERATION
PRODUCT SELECTION PAGE ITERATIONS
- Too many boxes on page. Remove all boxes around item description as confusing users who weren’t sure which part was clickable.
- Fulfilling a “Must have” feature in client’s brief: Allow customers to contact the business, including request a product not otherwise stocked.
PRODUCT PAGE ITERATIONS
- User testing feedback: the “Add To Basket” button was in the wrong place on the paper prototype. Users didn’t instantly see it and expected it to be below the specification box where the “Need Help” button was, so moved them.
- Users really liked that they didn’t have to scroll the page to find reviews, delivery info and specification: it was all in one place beside the product.
- Users also really liked the “You may also like” suggestions, which they are used to seeing on competitor sites, such as B&Q and Homebase.
MY BASKET PAGE ITERATIONS
- Users found the layout of both the paper prototype and low-fidelity versions of ‘ My Basket’ page confusing and cramped. So redesigned for the mid-fidelity version and on testing, users said it was very clear and well laid out.
- Users confused by the “To Secure Checkout” button on paper and low-fidelity versions, so changed to a simple “Checkout” button with a lock to suggest it is a secure site for final iteration. Users like this subtle suggestion.
- User feedback on low-fi iteration: they couldn’t remove an item from their basket, so added a ‘remove item’ button on final iteration.
- Users weren’t sure how to go back to the previous screen from their basket. So added a “Back” button which, on testing, worked well.
I designed, tested and iterated an e-commerce website for Loading Hardware from paper prototype to mid-fidelity prototype for Yoshi’s scenario, mentioned above.
PROTOTYPE: Here is a link to the clickable prototype.
- Increase the fidelity, test and iterate
- Investigate a “Chat” function on wesbite for asking advice
- Test the newer features on the homepage
- Develop the loyalty points feature
- Make it easier to write a review straight in the website
Using the Double-Diamond design process and the UX methods discussed above, I designed an e-commerce website to mid-fidelity, meeting the persona’s needs and goals whilst maintaining the client’s brand image and ‘small shop’ appeal, as requested in the brief.
Thank you for taking the time to read my case study! If you’d like to see some more of my work, please have a look at my website.