Goal.
To build a new ecommerce site for the store that encompasses the values and spirit of the physical store while providing a seamless experience from home page to checkout.
The opportunity.
Overview.
This concept project was part of my UX immersive course at GA, it was built as if we were working with a real client and to a real brief.
Happy Paw Pet Supply is a local store, their USP is that they source from a variety of suppliers in order to offer their customers the best range of products at the most competitive prices. their values are important to them and they would like to portray them in their online store
Happy Paw Values:
Quality of service.
Everything is chosen by hand.
The biggest little pet supply store.
Happy paw Brand personality:
Bold and not threatening
Knowledgeable and approachable
Playful and tech orientated
My role.
It was a group effort and we worked together on the discovery stage. after that each went his way, I defined the problem statement, facilitated a card sorting workshop, and the design stage.
Key Tools.
Sketch
Pen and paper
Sticky Notes
Key Skills.
User Research,
Prototyping
User Testing
Our process.
We used Lean UX together with the Double Diamond methodology to explore and define the problem while, as we should, keeping our users in mind.
Empathise.
The work with the group was the first section of the two weeks sprint in order for us to gather as much information as possible about the user’s needs and collate it with our client brief.
We wanted to get a feeling of how a really small local store feels like so started with contextual research in a local store called Angle Pets, a similar store for the made-up one from the brief. Being in the store also helped us to better understand the store experience and how we can better transfer it to the website.
While in the store we conducted 4 interviews with shoppers and 12 more with people who own pets and order online.
We gathered all our findings and wrote them on post its, then we grouped them together in order to find common trends, the Main insights we gathered from the interviews were:
- Users use and love the price and customer reviews for product quality on the websites.
- Ways to communicate with the store (email, chat) are essential.
- Discount and sales are always welcome and a clear indicator help to find them
- Deliveries and repeat orders can make life a lot easy if you have the same order every month
Define.
Now that I had more understanding about my user’s needs, to better relate to them I created a persona, this was the first persona I created, it took me a few trials and errors to understand how it’s done but I did understand its importance to the process.
Problem statement.
“During my working hours sometimes I realise that I’m running out of grooming products.
I need to find a way to order the dog grooming product from my regular store quickly and easily for same-day delivery so I can concentrate on work”.
Taxonomy and card sorting.
Card sorting Is a generative exercise, where I asked participants to sort 70 cards that represented various products that could be found on a pet store website, into groups that made sense to them and then label the groups themselves.
After gathering the data and synthesising the (parent) categories I asked different people to sort the products again but this time by the categories I discovered, to see if they are successful and it make sense to them.
This exercise helped me understand where people expect to find various products when they land on the website, as well as how to better structure and label the categories that these products fall under Information architecture.
Below you can see the 6 categories that were chosen to be implemented in the site and a site map was introduced. ( later, looking back at the brief, I add two more categories they were a subcategory of the parent categories).
I the prototype, I decided to use faceted navigation rather than a top menu to further categories and select the product after choosing from the parent category.
Design.
A paper prototype is a fun and quick way to test ideas before investing too much time and resources into them. after a few iterations on the design, I was happy with what I had and went on testing it with users.
Giving users a simple task to complete and by moderating usability testing sessions, I had the opportunity to witness live how participants interacted with the prototype and by encouraging them to think aloud to also understand their reasoning for their actions or inactions.
The task given: “Using the site, find, purchase and checkout, dog grooming products”
I tested the paper prototype with 7 users, with the feedback I got I could understand what changes to the mid-fidelity prototype are needed.
Below you can see the prototypes and changes.
Main points from the feedback I received:
The bread crumb navigation wasn’t clear enough for users.
The black boxes on the item picture featuring the number of items users can add to the basket were confusing and unclear.
I added a prompt to register button to encourage people to register to the store website after looking back on the research and understanding that users would like a tailored experience while visiting the website.
The form field for the register screen was unclear and poorly orientated, after looking into the importance of form fields and reading articles about it, I changed it from top to bottom fill to right to left.
The final deliverable for this project was a mid-fidelity prototype, however, I did revisit the project and designed a high fidelity prototype to practice my UI skills.
The result.
What I learned.
From the process- It was the first UX sprint I took part in, the process and a lot of the things I did were new to me, I developed my skills in research, information architecture and UI.
From the design - As you saw from the paper prototype, the home screen was divided into two sections “shop” and “get involved”. looking back, my decision was not taking into consideration the user’s needs, only the clients. After testing, users took an interest in this feature, that’s why I decided to keep the feature.
Moving forward.
Testing with users.
Developing further the “Getting involved screens”.