INSTASHOP
Interaction Design / User Interface Design / BRANDING
Instashop is a fictitious grocery franchise aiming to expand its customer base and market share. With the rise in online grocery ordering & delivery products, Instashop was in need of a new convenient online grocery shopping experience.
Business + Customer Goals
LET’S CUT TO THE CHASE
Instashop conducted is own market and user research that determined young busy professionals made up a large portion of their product’s target market. After reviewing their research, I began evaluating both the business and customer goals and pain points to find a common goal.
Interaction Design
SORTING EVERYTHING BUT THE KITCHEN SINK
The initial version of the online store will have only the 100 top selling items. So to help build the information architecture for the website, I performed card sorting sessions with a few target market participants. The results from the session helped me organized 100 grocery items in 7 main categories.
With these main categories, I then created a sitemap and also mapped out potential user flows from browsing to checkout. The user flows highlighted decision points that helped me think about the UI requirements.
BACK TO THE DRAWING BOARD
Once I determined the interface elements, I created low fidelity mobile wireframes in Sketch of key screens that were necessary to reach each stage in a users’ journey. Then, I generated an interactive prototype in InVision to test first-time users. I decided a mobile-first approach to focus on the key essentials of the website page.
Are first-time users able to perform grocery shopping task flows intuitively with ease? (landing on the homepage, finding items, adding/removing items from the cart, sign up, checkout)
Findings
Users performed grocery shopping task flows with ease.
Ability to browse without committing to signing up was preferred.
Signing up upfront had no effect on shopping experience ease
Help section needed in the footer
Add a way to save favorites
Add checkout as a guest option
User Interface Design
PUTTING THE ICING ON THE CAKE
With Instashop being a fictitious grocery franchise, it was in need of a visual brand. So I decided to explore a couple of mood board concepts. Simple, friendly, fresh, and locale were thoughts that came to mind to describe the brand. But that seems expected. So I tried a mood board with a creative direction around pop, fun, play, joy, and humor.
From this concept, I decided to design Instashop’s visual brand that included a logo, colors, typography, imagery, and copy.
I then applied the style to create high fidelity mockups of key mobile screens. In the end, I created a new convenient online grocery shopping experience with a new fun approachable brand that’ll appeal to young busy professional consumers.
TAKEAWAYS
As a designer specialized in graphic design, I enjoyed the brand exploration phase. But what I found a bit challenging was designing solutions that’ll work for everyone after performing the usability testing.
