Instashop

Instashop is an imaginary brick and mortar grocery store chain looking to expand their capabilities by delivering groceries to their customers. My role was to conduct user research and analyze the competition and create wireframes, prototypes, interactive design, and visual design for this new service.
USER INTERVIEWS
After receiving the project brief and coming up with a research plan, I interviewed real consumers over the phone about their grocery shopping habits. This helped me see different perspectives than my own.
EMPATHY MAP
​​​​​​​After creating a persona, I created an empathy map to help me understand how consumers might experience a grocery store. This helped reveal what features Instashop should include as solutions to the problems consumers experienced with traditional grocery shopping.
STORYBOARDING
​​​​​​​To further my understanding of a grocery shopping experience, I created a storyboard that illustrated how my persona might grocery shop. Like the empathy map, this helped me figure out how Instashop could attract new users and grow Instashop’s consumer base.
CARD SORTING
​​​​​​​As I began to create the foundational structure of Instashop, I performed a card sorting exercise with potential users. I had friends organize food products (the cards) into categories. This gave me some insight on how users could expect to look for products in the navigation tool of the mobile app.
USER FLOWS
​​​​​​​After creating a site map, I created a user flow diagram to identify the paths that a user would take through Instashop to complete certain tasks, like signing up for an account, ordering a specific product such as apples, and checking out.
WIREFRAMES
​​​​​​​To begin envisioning the visual aspect of the product, I created low-fidelity desktop wireframes using Balsamiq to add structure to my ideas. Instead of creating wireframes for the entire mobile site, I used my user flow diagrams to create the individual screens.
SITEMAPS WITH WIREFRAMES
​​​​​​​In order to see the structure of the website as a whole, I created a sitemap with wireframes. Combining wireframes with my sitemap helped explain how the experiences I created within each of the screen maps as well as the overall path a user would take within the application.
PROTOTYPING
After evaluating the overall structure of the site, I created a mobile prototype using Invision to see how a user would interact with the application. The prototype featured screens from Balsalmiq and begins with a user onboarding process. The tasks associated with the prototype were to select and order three Macoun apples and checkout.
USABILITY TESTING
​​​​​​​After completing the prototype, I tested its usability. I asked friends to perform the task of ordering three apples and checking out. I watched their actions and noted any difficulties with the functionality of the app. After these users tried the app, I debriefed the trial by asking them to reflect on the quality of the app and their ability to navigate its features easily. This feedback revealed a few things that needed to be modified and I iterated these changes on the next prototype version.
BRAND STYLE
I created a branding identity for the company, as well as UI kit to pass off to developers.
HIGH FIDELITY MOCKUPS
For the conclusion, I designed the main screen of the app in three breakpoints: desktop, tablet, and mobile.
Back to Top