This project was a collaboration between the online retailer Grocery Gateway and the UX program at Humber College to learn how we could improve the user experience for specific users of the site. It took us from conducting research to developing and testing prototypes.
My specific contributions to the project were:
Interviewing and conducting a usability test for two users of the site
Coded transcripts from interviews
Worked with my team to create an affinity diagram of qualitative data
For two of the ideas we had, I sketched ideas in pencil, created task flows, and wireframes for mobile, tablet, and desktop versions of the new features
After discussing all ideas with team, returned to the two I was working on and created high-fidelity prototypes for mobile, tablet, and desktop
Took lead in developing a test plan for all our prototypes that I and other team members created
Took notes during usability tests
Collaborated on the creation of feedback grid to assess our prototypes
Created a presentation with the team, and presented the new information to stakeholders
Tools used for this project:
Quicktime for creating screen captures of usability tests
Miro for affinity diagramming with the group
Google Slides for collaborating on presentations
Sketch to create task flows, wireframes, and high-fidelity prototypes
Tobii eye-trackers during prototype testing
The Challenge
How might the My Lists function on GroceryGateway.com be re-imagined in a way that allows users to shop in an efficient manner while exposing them to new products and moments of inspiration leading to increased incremental sales and brand loyalty?
The Design Process
The process our team followed went through five phases: inspiration, synthesis, ideation, prototyping, and solution.
Early User Observation
Grocery Gateway has compiled a number of statistics about their users that helped inform our inspiration phase:
According to satisfaction surveys, the number one reason customers use Grocery Gateway is convenience. 65.8% of customers cite this as one of their reasons for staying.
When it comes to where users find the items on the site they want to add to their cart, 39% of items are found through the search bar, compared to 8% from the My List function.
65% of their users shop using a desktop browser, the remaining 35% split between a mobile browser and their mobile app.
Personas
Grocery Gateway already has several personas that make up their customer base. During the interviewing process, we talked to users that represented two of these personas. The motivations, goals, barriers, and likes of each persona helped inform the later solutions we came up with during the ideation phase.
Research Questions
The next step in our process was going to be 1:1 interviews with users of the site. Before we did this we wanted some research questions to help us focus our research and later analysis. These were:
What are the pain points/frustrations/barriers of making lists?
What goals and motivations do people have when building lists?
How do people build their My Lists?
Where do people go to find inspiration and new ideas?
User Interviews
We met with three users of the site in one day. A script was developed with a series of questions and scenarios for the users to work through. We took screen capture and audio recording for later analysis. I moderated two of the sessions myself, while colleagues took notes. (It should be noted that there were more interviews done with other students at Humber, data we would later have access to.)
Findings in Research Interview
Using data we coded from transcribed interviews, our group began using this data to create an affinity board. Using the application RealTimeboard.com (so we could work remotely), we put all our coded data points into their respective categories. Then we began to re-organize the data into themes with consideration of what our original research question was.
From these themes, we came up with 10 insights about the users of Grocery Gateway:
List users will start their grocery shopping with their My List
List users still use the search and categories to finish their shopping cart
Users will get inspiration for what to add to their cart or lists from the Grocery Gateway lists, e.g. holiday essentials, or cart starters
Users also get inspiration from outside sources like social media or recipe sites
List users come up with work arounds for out of stock items
Lists are used as an inventory by users of the
My List
Users keep different lists for different occasions or purposes
Family is an influencer of purchases
Convenience is the major motivator of these users for using Grocery Gateway
Users feel annoyed when items are out of stock
Executive Research Summary
At this point, we prepared a presentation with all our findings at presented it. This included four recommendations for improving the My List functionality—ideas that we would sketch out and prototype.
An important part of presenting our findings was providing direct quotes from the participants we interviewed, as well as video/audio clips of them using the website to reinforce our insights.
Wireframing Mockups
During the synthesis phase, we came up with some recommendations. Each group member took some of the ideas to sketch out. I started by sketching some of the ideas, to add functionality to the site's search bar, and being able to add to large pre-made "Cart Starters" to a user's personal list.
I decided at this point that the ideas I was working on would benefit from a task flow before doing a digital wireframe, to better understand the steps each prototype would require. It helped flesh out the idea more than the pencil sketches.
Lastly, I created some digital wireframes for a responsive website (desktop, tablet, and mobile) using Sketch as a last step before prototyping. As a team, we went over some of these ideas, and made some changes.
Digital Prototyping
We created high resolution prototypes for usability testing. This was also done in Sketch, so we could use the built-in prototyping functionality.
At this point, I took the digital wireframes I did and began turning them into hi-res prototypes for desktop, tablet, and mobile websites. The prototype was developed in Sketch, but I pulled actual graphics from the website and mimicked the look using photoshop to give the testers as close-to-the-real-thing prototype as I could.
Usability Testing
At this point we had several prototypes that our group had put together. I took the lead in developing the test plan that ran through scenarios for each prototype. Users were given pre- and post-test questions to get their impressions of the prototypes. While the prototypes were being tested, we recorded each session using Tobii eye tracking hardware and software.
Reflections/Results
In the end we tested five prototypes of small functional changes on the website with different users. We used a feedback grid to help us analyze the data and help us develop insights about each prototype.
We presented the data in a slideshow and included video/audio of the tests, and quotes from the participants to illustrate our findings.
For example, one of the prototypes I developed where users could add items directly to their list from search bar suggested results, users responded that they found the new function easy to use, and potentially useful.