A Designlab project, Instashop is an online grocery shopping and delivery platform. Groceries delivered to the doorstep are only a few taps away.
To test the viability of this online grocery and delivery platform, I first had to better understand the problem space. This involved outreach to Instashop's target audience, conducting empathy research, and devising a plan to design a web and mobile platform that empowers users.
Instashop is based on a fictitious brick and mortar grocery franchise based in the United States that is experiencing a gradual decline in sales. They are exploring the market of online grocery delivery with an idea to create a website and mobile app in order to compete in the rapidly changing marketplace.
I created a research plan in order to qualify the demand for online grocery shopping. I aimed to uncover consumer behaviour (feelings, needs, desired state) towards online shopping and brick & mortar shopping by conducting market research, a competitive analysis and one-on-one interviews.
The feature matrix below details Instashop’s top 3 competitors. Each competitor’s product features were analyzed and categorized according to the value and cost of implementation to determine which features provide the most value while being cost effective.
From my research findings I further detailed the goals and pain points for both users and Instashop and outlined shared objectives as well.
I held five 1:1 user interviews and with these insights I then created the primary persona of the Busy Urban Professional to embody the goals and needs identified through the interviews.
SECONDARY USERS: Of the five users I interviewed, one of them represented a secondary persona. This user represented the archetype of the "The Parent" who is juggling the demands of work, kids and their social life. These users are gradually adopting services and technology to help relieve them of some of their daily to-do's.
TERTIARY USERS: Understanding reasons why individuals would not use Instashop also gave me insight into different user pain points. The third persona is defined by the archetype of "The Retiree" who has time to go grocery shopping and enjoys finding deals and the process of planning and preparing meals. However, in the future, if mobility becomes an issue, there would be a compelling event to draw The Retiree to use a service such as Instashop.
I then conducted a card sorting activity which proved to be the most helpful tool in determining the content and hierarchy to organize Instashop. I identified three participants that fit the Busy Urban Professional persona and asked them to sort through a set of 60 cards of food items and to categorize and label the groupings as well. The activity revealed patterns that I leveraged to inform my decision in organizing the overall structure for the sitemap.
Interesting observations included:
1) Affordances from in-store shopping influenced the participants' perception of web/mobile layout
2) Participants mentioned they should have multiple ways to achieve their goal such as ability to "tag" or "filter" items in overlapping categories
3) The concept of "future-proofing" categories was brought up several times, a participant even stated: "even if I don't have enough items to form a category, the category should still exist on the site or app to account for inventory additions and changes.
I developed the following user flow with the data collected from my research. This user flow was the precursor to the development of wireframes and a prototype to test with users. Given time constraints, I focused on users' primary objective scenarios and I focused on the checkout and payment process for the wireframes further below.
Based on the main user flow, I hand sketched potential designs on paper before turning them to low fidelity wireframes using Sketch. Below, I developed a first version of a set of annotated wireframes for Instashop's three main screens.
Additional wireframes were created based on the previous Homepage screen to illustrate responsive design and how the page layout would adapt to tablet and mobile screens.
I developed a further set of mobile wireframes used to create a prototype for testing. I took a mobile first approach to designing my wireframes because it's easier to scale up than down. The wireframes are a first iteration, focusing on the tasks of selecting items, adding them to the cart, and a detailed checkout process. With more time I would have liked to update and refine these wireframes based on user test results. With these wireframes I built a low-fidelity prototype using InVision to test several tasks with five users.
The low fidelity mobile app screens were used to build a prototype in InVision to test the application flow and identify challenges users faces while completing a set of tasks.
I conducted in-person & remote interviews using InVision, observing how users completed tasks while identifying successes and pain points.
I leveraged the style tile and the responsive wireframes developed earlier in the case study to develop a desktop, tablet and mobile view of Instashop's homepage.
1) Persona Development: First and foremost, define users and their pain points and motivations. Creating personas to solve the business problem without defining the actual users beforehand is backwards.
2) Usability Testing: Testing should be a constant. With so many data points to consider, it is imperative to learn to contain some ideas for the future, and focus on developing an application that meets user goals and primary scenarios.
3) Ask Big Questions: Is this application or technology necessary? Would anyone benefit from it? What makes it different from its competitors? Who even cares? Make sure the data can back these questions.
4) It's Never Done: The project is over due to time constraints. Developing additional user flows and wireframes that capture more processes and further rounds of usability testing would continue to point to problem areas and room for improvement.