Instashop

Project Overview

INSTASHOP is an online shopping service specializing in delivering fresh local groceries and produce to customers, with the added option of selecting localized pickup locations for convenience and flexibility. The service caters towards individuals who are looking to simplify this aspect of their lives in order to save time, such as busy professionals and parents.

Course: Designlab’s UX Academy Program

Client: INSTASHOP Stakeholders

Timeline: 10 weeks

Key Activities: Secondary research, primary research, ideation, wireframing, prototyping, interaction design, usability testing, user interface design

Tools used: Sketch, Illustrator, InVision

Research

I conducted interviews with a sample of users who matched the initial target market group, young professionals living in urban areas. All my participants were females in their 30s, not all were primary shoppers and ranged in status from being single, to being married with children. Having a range of people with differing family dynamics gave me some insight into what the shopping behaviours were like for each group. I was looking to find similarities in needs and habits that would help guide the design of INSTASHOP and its features.

Problem Space

As most consumer shopping is heading towards the online space, there is still a hurdle to convince shoppers to buy their groceries online as well, especially with so much competition. Most shoppers have certain reservations with not being able to see and feel the quality of the product, worry about more expensive or non-transparent fees, and think that selection may be limited. Yet they still crave the convenience and flexibility that online shopping could provide.  

Key Goals & Pain Points

After the competitive analysis and interviews, I determined some key business and customer goals, including pain points. While it’s important to consider the customer’s experience with INSTASHOP, it’s also necessary to consider the business objectives to ensure that the product is a viable return on investment for the clients.

UX Strategy & Ideation

With INSTASHOP’s business/customer goals in mind, I used feedback from the user interviews, competitor analysis, card sort, feature matrix, and empathy map to create a persona, sitemap, user flow, and responsive wireframes based on popular design patterns.

  • Persona
  • Sitemap
  • User Workflow
  • Website Wireframes & Annotations
  • Mobile Wireframes
Persona

From the interviews conducted, I mapped out some variables to better determine which patterns and characteristics would be most representative for a persona based on similar needs and lifestyles. The following persona was created from the most recurring patterns and helps to determine which features and services of INSTASHOP would be most appealing. Accompanying storyboard and empathy map helped me get into her mindset. 

Persona

Empathy Map

Storyboard

Sitemap
User Workflow
Website Wireframes & Annotations
Mobile Wireframes

Interaction Design

View Prototype

My research indicated that users would be most familiar with using a desktop website, but also receptive to the convenience of mobile technology to shop online. For this project, I focused on creating only the mobile app for testing due to limited time and future trends towards mobile shopping.

User Testing

Testing of the prototype was conducted with representative users via a mix of face to face and moderated remote sessions with live screen-sharing. Remote sessions were conducted in the participant’s home environment with their own iOS mobile devices, ranging from iPhone 5s to iPhone 6s Plus. Users were given a scenario and several tasks to complete to evaluate navigation, labels, buttons/icons, overall flow and satisfaction levels. The 5 main categories of focus were: user behaviours, success, prototype issues, areas for improvement and user delight. Based on the findings, I was able to identify some common themes for the design that could be changed, further developed, and clarified in the next iteration of the UI designs.

Branding

The visual branding for INSTASHOP was based on these key adjectives: fresh, organic, healthy, quality, and vibrant. From those adjectives, I sketched out and iterated on a number of logo concepts before settling on the current logo and brand style tile.

Icons are from the Noun Project website.

Iterative UI Designs

Implementing some changes from the user testing, here are a few high-fidelity responsive UI mockups and accompanying UI Kit.

  • Homepage
  • Navigation
  • UI Kit
Homepage
Navigation
Icons are from the Noun Project website.
UI Kit
Icons are from the Noun Project website.

Project Findings

The research and feedback from the user tests indicate that there is a positive outlook and viable market for online grocery shopping. Users are likely to use both a desktop and mobile version of the service for mobility and situational convenience. Further refinements are needed, incorporating feedback and recommendations generated from the user tests, the next step is to create more mid to high-fidelity mockups and prototypes for additional testing.

Personal Reflections

This was my first project where I learned and applied UX research and design techniques, I found the overall experience very practical in helping me develop my foundational skills as a UX designer. From the research and testing, I learned of such differing perspectives and representations of how others approached online shopping and grocery shopping in general, and encountered challenges that defined the features and direction that I went with for this product. Although it may not have been the most innovative subject matter, it truly opened my eyes to how much thought and effort goes into creating a really pleasant and intuitive experience for users.

This is a unique website which will require a more modern browser to work!

Please upgrade today!