INSTASHOP

eCommerce, UX, Web Design

CLIENT:
Designlab, Instashop

PROJECT TYPE:
eCommerce Responsive Website

TOOLS USED:
Photoshop, Invision

Background

Designlab has been asked to design an eCommerce platform for a big grocery franchise, Instashop. Instashop is a physical grocery franchise that is struggling to keep up with the competition. Their market shares have been decreasing by 8% each year.

Role & Responsibilities

This was the first project I worked on while attending the UX Academy. I was the only designer working on this project. My responsibility was to make sure that the project was finished to meet the deadline and the client’s requirements. The process included: UX research, Interaction design and UI design.

The Challenge

Instashop is undergoing a major change in its focus and strategy and needs to launch a new online shop, the platform needs to be both web and mobile friendly, intuitive, engaging and easy to use for the user. The project also had a 8 weeks time deadline.

PHASE 1


DISCOVER

Interviews + Personas

I wanted to get a better understanding of our target audience so I conducted a few in-person user interviews. asking questions about in-store and online shopping habits, likes and dislikes about their shopping experience and how it could be improved. From the interview gatherings I then proceeded to create a persona: “the busy professional”.

persona

Research Methods

To understand what features and services needed more focus and improvement I adopted a few different research methodologies: competitive analysis, storyboarding, empathy map and business vs customer goals.

STORYBOARD

research

COMPETITIVE ANALYSIS

research

BUSINESS VS CUSTOMER GOALS

research

EMPATHY MAP

research

Research Findings

From the User Interviews findings I noticed that most of the participants preferred to shop in store but were discouraged because it would often require too much time.

PHASE 2


DEFINE

Sitemap

Once I defined all the requirements for the redesign, I created a site map, which helped me focusing on the key design screens and overall architecture of the website.

userflow

User Flow

While the sitemap helps with the structure of the website, user flows are very useful when it comes to focusing on a specific task the user needs to do when using the features we built. In this case I created a User Flow for the checkout process.

sitemap

Wireframes

With the sitemap and user flows at hand, I started doing some rough sketches of the main pages of the website and then proceeded in making a digital version in Photoshop.

wireframes
wireframes
wireframes
wireframes
wireframes
wireframes

Prototype

After completing the wireframes I created a prototype and started the user testings. Some of the testings were taken in person, where I had a better understanding of what the user was thinking and feeling as I asked them to share their thoughts with me. Some testings were taken remotely via Skype and Invision Liveshare.

PHASE 3


DESIGN

Branding

Instashop needed a fresh and clean look for the new website. I was assigned the task to create a new branding for the company and I did so by creating a new logo and a brand style tile.

branding
branding

Final Mockups

With a clear idea of the Instashop branding, I designed the desktop, tablet and mobile versions of the homepage.

Desktop

uidesign

tablet

uidesign

Mobile

uidesign

CONCLUSIONS

If I had more time to work on this project I think I would’ve done some more user testing before moving on to the design phase.

With this being my first UX project with Designlab, I’m pretty happy with the outcome and how it improved my design thinking.