Concept Project   •   Solo   •   2 weeks sprint

The Challenge

Design a brand new e-commerce website, using a desktop first approach for Energy Sports, a fictional sporting goods shop store.

The website needs to showcase the products while maintaining the brand values and its ‘small shop’ appeal, with a focus on hand-picked quality over quantity.

The Solution

Showcased Energy Sport’s products while maintaing their brand image. The website has clear ways of locating specific products and it steers customers towards popular products. It features clear, easy navigation with a full purchase path and it gives customers the ability to contact the business.

My Role

Competitive analysis, user interviews, card sort, affinity mapping, persona, user flow, sitemap, user testing, user scenarios, wireframing, 8 minute presentation.

Tools: Sketch, InVision, Adobe Photoshop, Miro, Trello

— Read the full case study on Medium

The Energy Sports Store Conducting a card sort in Trello

DISCOVER

Competitive Analysis

As a first step, I analyzed five competitor websites to get a clearer view of key features and points of difference.

This enabled me to identify the key features necessary but also had the benefit of revealing some potential areas Energy Sports could lean themeselves into in order to differentiate themselves from their competitors. Where all sites differed significantly was on the services they offered, both in store and online hence Energy Sports’ focus on offering a great customer service was a key aspect that would help them stand out.

Understanding our users

I embarked on an in-depth interview with six users to uncover their needs and frustrations. Before conducting the interviews, I wrote a script which was broken down into three sections:

  • Work out habits

  • Shopping habits

  • Recommendations - what makes for a positive online shopping experience for them?

DEFINE

Building a Persona

Meet Jessica. She is a persona - the accumulation of my interview findings. The purpose of this persona was to ensure that I stayed on the right track when designing Energy Sports.

For Jessica, a good shopping experience involves a number of key elements:

  • good customer service

  • clear and intuitive navigation

  • product reviews

Sitemap

The sitemap helped give a bird’s eye view of how I organised the content.

I split the categories into Women, Men, and Kids as per the card sorting and competitor analysis results.

I decided to place Our Story in the meganav since this was important for the business and should be easily accessible.

Essential features such as a Search function, a User Account and Shopping Cart, have also been added.

Planning Out a Journey

Based on Jessica’s requirements, I produced the following scenario:

Jessica, a local resident, needs a new pair of leggings for her first yoga class. She’d like to purchase them now and have them delivered on Wednesday. She doesn’t have a specific type in mind so she would like to read some reviews first to help her decide.

DEVELOP

Iterating the design

I conducted 3 rounds of usability testing, with 3 participants in each round and the overall feedback was very positive. All users found the navigation intuitive and easy to follow, and the layout across all pages was clear. Testing also helped reveal a lot of valuable insights and several iterations.

DELIVER

The Final Prototype

At the end of this design sprint, I was able to deliver a working, clickable prototype for an e-commerce website that was developed based on competitor analysis and research into user mental models, expectations, and needs.

Read Full Case Study

Outcome

My design concept included:

  • clear ways of locating specific products

  • the ability to contact the business via a chat feature

  • an easy and quick check-out process

  • allows customers to read and write reviews of a product

Learnings

This project highlighted the need for a user-centric design in e-commerce, and it was an essential lesson in aligning user needs with business goals. It was my first project using Sketch and InVision; overall, a really great experience that allowed me to carry out and learn a variety of new UX concepts such as user interviews, card sorting and Sketch.

Next Steps

Taking this concept forward, I would:

  • Allow customers to request a product not stocked

  • Update to Hi-fi prototype

  • Test with more users

  • Iterate, iterate, iterate

Next project >