Roles: UX Designer
Skills: Research Process, Wireframes, Prototypes, Testing and Visual Design
NOTE: THIS IS A DESIGN LAB PROJECT AND I WENT BEYOND WHAT WAS REQUIRED.
Helped a brick and mortar grocery store expand its market share by designing an online shopping experience for its customers.
Designed a website, and mobile app, centered around an efficient online shopping experience with delivery options.
Seasoned Harvest’s Business and User Goals
Seasoned Harvest noticed their market share had been decreasing by 8% each year. After some user research, they determined that this decline is most likely due to the increase in online grocery ordering and delivery products.
Seasoned Harvest plans to improve their market share by launching an online grocery shopping and delivery service. Two pilot programs will start in New York City & San Francisco. If this is a success, they can expand to different locations.
To figure out which customers to target, Seasoned Harvest did user research. Based on this research, they created the following persona to summarize key findings in their target market:
- Age 25–35
- Tend to live alone or with one roommate
- Have limited time
- Have disposable income
- Tech savvy and tend to shop on their phones
- Work long hours (most said 9 am — 7 pm), but have some flexibility
- Go out about half of the nights of the week
Usability Competitive Analysis of Main Competitor
I visited Freshdirect.com and Instacart to dive deeper into the competitors’ methods, to see how well they solve the problem. I kept the principles of learnability, efficiency, memorability, errors, and satisfaction in mind while noting the overall experience. If you would like to know more about the analysis, I can provide more details upon request.
User-Centered Tasks and Information Architecture
I set up a card sort test to see how people grouped together the grocery items. Based on these tests, I created the information architecture blueprint for the Seasoned Harvest website, including the site layout, structure, and navigation. I organized and labeled the content in a way that makes the information findable for the users.
The included user flow outlines the full process of ordering groceries from Seasoned Harvest from arrival on the site to delivery of an email receipt.
Based on the user flows, I put together a list of product requirements for each task. This list included features, calls to action, and other user interface elements that those pages needed for the user to navigate the site.
I created a landing page to see if the users understood the service offered by Seasoned Harvest and the types of items that were available. I drew several sketches of layout ideas. I created two gray-scale wireframes for the layout and did a preference test to determine which layout to use. After designing the high-fidelity mock-ups, I also asked for feedback from the users and other designers on this design. The reason I asked designers is they are in tune with what is a good design.
Wireframes & Testing
Testing allows me to validate the designs. I like to get feedback early and often in the process, allowing me to improve the final design and reduce the need for changes during development.
Wireframes & Testing Set #1
I built wireframes based on the previously mentioned product requirements. The medium fidelity wireframe included labels for navigation elements for use in testing.
I recruited in-person users to test these wireframes. If you would like more detail, these tests are summarized in the Moderated Usability Test Results.
While I was designing the wireframes to be user-friendly, I looked for ways to assist the company in making more profit. For example, I included reminders of free shipping at multiple points throughout the site to encourage higher spending.
Many design choices were considered, such as a making a sidebar menu that can be easily expanded to include more categories. If you would like to know more about my design choices, I can provide more details upon request.
Wireframes Set #2
Using the feedback from testing, I made the changes and clarifications to the product wireframes. This updated set will be used in further testing.
I combined the wireframes with the sitemap, showing a clear idea of how the site fits together. This hybrid sitemap became the basis for my prototype.
One of the wireframes was updated with commonly-used design patterns to describe the interactions that will take place.
Prototyping & Testing
I developed a prototype based on the wireframe sitemap. Using a prototype program, an interactive prototype was built for testing.
In-Person Usability Testing
I explained to the in-person users that my goal was to see how they would naturally respond to the site. I communicated that I was not looking for “correct” answers and that their original feedback and insights would actually be very helpful to me. I made sure not to talk too much about the prototype itself as I didn’t want to influence their reactions.
Here is the prototype I used for the testing: https://marvelapp.com/9gf2ja
Based on the feedback, I prioritized the changes I planned to make to the wireframes. While there were no major usability issues, I considered possible areas for improvement and designed a series of small remote tests to address these targets.
Types of User Tests
Usability Testing Plan & Remote tests
I put together a usability test plan to define what to test and why. I designed the remote tests to be simple and quick so that they could be easily completed without a moderator.
Landing Page Tests (Unmoderated)
Two tests were based on the landing page. Every user did this test first: Five-second test – What do you think this company offers? The five-second test results revealed that 90.90% recognized it as food related.
The second test had 4 Questions about the design of the landing page:
- What is the first thing that catches your eye? Any reason?
- What do you LIKE about the design of this page? Why?
- What do you DISLIKE about the design of this page? Why?
- Is there anything else that we should add or clarify on that would make someone more likely to sign up?
Scenario Task Click Tests (Unmoderated)
The user was given a scenario task to complete.
Task A- Find the liquid eggs Click to see the questions asked and 4 screenshots.
Test B- Buy eggs. This link includes the questions asked and 6 screens.
A/B Remote Tests
Pick A or B -Shopping cart style and Product Window Style
Sign In/Register Screens Tests
To be able to purchase, the user would need to sign in their account. I tested the idea of using the same button for Signin and Register. People found it confusing, so that was scrapped. Since Seasoned Harvest is expanding into a new territory, most of the traffic will be new users. This means that the registering process needs to be as effective as possible, so this idea was not used.
Based on user feedback, the final designs were updated and were made responsive. For this case study, I will show the iPhone & Android mobile versions and the colored homepage.