Build an eCommerce Website from the Ground Up. A UX Case Study.
Using UX Design principles to balance business goals and user needs.
This is a concept project with a fictional hardware store as a client.
Brief: Develop and eCommerce website for Progress Hardware, a local hardware store located in Aldgate since 1964.
Key points: ‘small shop’ appeal, great customer service. Consider the MSCW feature prioritisation given by the client.
Competitive Analysis, User Interviews, Contextual Inquiry, Card Sorting, User Flows, Sketches, Digital Wireframes, Usability Testing
2 weeks (Jan 2019)
№1: Research — What does the competition do?
To better understand how the competition organizes their presence online, I did a Competitive Research.
- Identify the weak points of the competition
- Define the basic features for the website, to take advantage of that
Feature Comparison & Element Analysis
I looked at the online features of the main competitors, again the MSCW list provided by the client. I then compared the recurring elements in the landing page, in the main navigation and the footer of each website.
- A quick and easy Checkout would be an advantage over the competition
- None of the competitors have a Loyalty Program
- The “Search” option is fundamental and always prominent
- The Logo can quickly inform the users about the scope of the website
№2: Discover — What do the users do?
To gain critical insights on how, why and when people usually shop for hardware tools, I conducted various user interviews.
- Understand what customer look for in an eCommerce experience
- Discover the most common user-flows they follow
- Users want to check the availability of a product online
- They usually want to buy hardware tools in person
- A clear store location and opening times are fundamental
№3: Structure — Information Architecture
To organize all the products in logical categories (for the users) and create a clear navigation, I conducted multiple rounds of open and closed Card Sorting.
- I was able to create Product Categories easily understood by most users
- This helped me to create a Sitemap and define the information architecture of the website
- The sitemap informed the Primary Navigation of the website
№4: Develop — Sketches and Wireframes
To understand how the content could be organized into pages, I created hand-drawn sketches for each page.
- Define how each page of the website could hold its content
- Quickly iterate and modify the sketches, allowing different solutions
- I was able to condense all the previous findings into a visual look of the structure of each page
- This process helped me create digital wireframes and start rounds of usability testing
№5: Understand — Usability Testing
To find out how users would respond to the structure and the organization of the content and create a successful user experience for the customers, I did two rounds of usability testing. Every round comprised 4 to 5 users.
- Find pain points in the design of each page
- Understand the needs of the users and design the pages around them
- Define the core features of 3 main flows: discovery of a product, checkout process, reorder process
- Concision: the information needs to be easy to read and to the point — less is more.
- Feedback: users need feedback for every action they take and to be reassured that something actually happened
- Conventions: it’s important to follow practices that are used on most eCommerce websites and therefore expected by the customers
- Testing with multiple users allowed me to iterate the design, to create a more easy and pleasant user experience.
- It was possible to make changes following the clear feedback gained through multiple rounds of testing.
The Guest Checkout Page:
- The checkout process was completely redesigned over different iterations.
- Discarded the members' checkout, a progress bar was then changed into clear highlighted tabs, for a quicker and clear flow.
№5: Delivery — Clickable Prototype
At this stage, the feedback from the client is fundamental before moving to high-fidelity mockups and test the UI.
- Show the client at which stage our research and development has arrived
- Demonstrate how users could successfully complete the three main flows (discovery of a product, checkout process, reorder process)
- Receive invaluable feedback and involve the client before moving forward
Following the UX Methods explained until now, it was possible to create a successful eCommerce website, ready to be handed over to UI Designers and Developers.
- Clear Information Architecture: users can easily navigate the content of the website
- Simple checkout: users are 3 clicks away from buy or reordering a product
- Availability and location: users can see which product available in store and online, and where they are located in the physical store
- Feedback: every action is backed by clear feedback and confirmation that it happened
With the confidence that the user experience will now satisfy the online customers, we can think about the next steps that could be implemented (after accurate testing of course!).
- Mobile version: every business needs a responsive website to be successful online
- Personalized Content: registered users different content when logged-in
- Chat: an online helpdesk with an expert seconds away from the user
This was an intense and challenging two-weeks sprint. I learned a lot during all phases of research and development. Usability testing is such a powerful tool and mastering its use could mean the success of many new products and ventures.
About the Author
I am a graduate from General Assembly, London, User Experience Design Immersive (UXDI) programme. I am currently actively seeking for a job — and happy to meet for a coffee or a quick chat.
My design works can be viewed in my portfolio.
Contact me by firstname.lastname@example.org
Also, please leave your feedback to help me improve.