InstaShop

Instashop is an online grocery delivery service aiming to make online grocery shopping convenient and easy for its users.

The discovery phase

The Design Challenge of Instashop

Hypothetically speaking, I was approached by an investor who believes that there is a big market out there for online grocery shopping. The current working title for the project is ‘Instashop’. I manage to convince her that it would be best to understand the problem space a little better, to build some empathy with the customers and find out what really drives them to online shopping.

User Research

The client provided rough details of the end users that they wanted to target initially. The collective demographics were coined as “The busy professional” – Individuals aged 20 to 50 and who work in offices fulltime.

Using this approximation, I conducted interviews with shoppers to gain a better understanding of their needs and pain points as shoppers.

Personas

Based on the the qualitative and quantitative findings in my interviews, I created a realistic representation of my key audience segment. The goal here was not to represent every possible audience member but rather to address the major needs of the most important user group.

Empathy map

Although typically a group exercise for the team, I decided to create an empathy map to help organise my research into a human-centered view of the product, and evaluate the ideas I would be coming up with for Instashop.

Business goals

After conducting several user interviews to gain a better understanding of users’ needs, I began evaluating both business and user goals.

It’s important that while we are focusing on creating a good experience for the end users, we are also setting out to fulfil the business’s objectives to generate a return on investments for the business.

Information Architecture

Based on the market research on current competitors’ websites and user interviews, I realised that in order to cater to our target demographic and set ourselves apart from the competition, we needed to focus on creating a seamless and efficient experience.

Card sorting and sitemap

To ensure that the site’s structure and the way that items have been categorised matches our users’ mental models most efficiently, I conducted a series of card sorting exercises in-person with participants who represented the target audience. The results from the card sorts were then translated into a detailed site map.

User flows

We used the sitemap to see how users would complete essential tasks, and mapped these tasks out with user flows to identify any opportunity for additional streamlining of task completion.

Wireframes

Once I hashed out the overall structure and navigation patterns of the site, I drew up the product’s blueprints, or wireframes to illustrate the overall layout of the product interface, define the rules for displaying information and define the behaviour of its elements.

Prototyping and User Testing

Low Fidelity Prototype

I used Invision to create a low fidelity prototype with which we could test user flows and then iterate the wireframes quickly and efficiently.

Feel free to try the prototype

Test Results

We tested the UI and user flows using Usability Hub and Verify to ensure that all of the most crucial user tasks were being completed with ease and that business goals were being facilitated as well.

One common observation from the initial prototype tests was that certain important elements and UI were hard to find or notice. At this stage, we assumed that this was due to the low fidelity of this prototype.

We decided that we would re-test the instances of this with the high fidelity versions at a later stage in the project, where we can utilise colour and other visual properties.

View these test results

Branding

By focusing on who “The busy professional” is and what he or she needs from this product, we explored options for typography, colour, and images to communicate concepts adjectives like “Easy”, “Reliable”, and “Fresh”.

Brand Style Tile

UI Design

After finalising the branding, I started creating the high fidelity UI components in Sketch. I used the findings from my evaluative research, wireframes and branding as a basis and iterated from there.

High Fidelity Mockups

Summary

What I have found to be the most challenging part based on my research is that people have different definitions for the same object – Most still think of tomatoes as a vegetable – and it could be challenging to design a solution that caters to everyone.

I found that cross-referencing between the business and user goals has helped me to find a middle ground between both ends for my design decisions.

More case studies

App Design

TurnUp

User Research Ideation Information Architecture Wireframing UI Design Prototyping User Testing Visual Design

Coming Soon

Amma

User Research Ideation Information Architecture Wireframing UI Design Prototyping User Testing Visual Design

Coming Soon

Glu Global

User Research Ideation Logo Design Brand Guidelines Corporate Literature UX Evaluation

Get in touch

If you’re after a designer with a dedication to user needs and business goals, please get in touch with me.

  • Tel: +44 7917 571944
  • Email: leonthedesigner123@gmail.com
  • Linkedin
  • Twitter