Future Considerations
I only designed a simple version of the happy path for a specific type of consumer. If given more time, I'd conduct more robust user research and usability testing.
Some things I would like to consider are:
-
The experience for the local coffee shop
-
Edge cases and unhappy paths, such as order disputes or cancellations
-
Nice-to-haves like being able to set a pick-up time or saving order history
Some early decisions
Target users: Adults in their 20-30s
-
Knowing that I would rely on my peers for some quick user research, I decided to target young adults for convenience sampling
Chosen app: Instagram
-
I chose the app that my peers most actively use in order to get the most out of my user interviews
Time management
-
Approaching it like a mini design sprint, I divided my allocated 6 hours as such:
-
Discovery and research: 3 hours
-
User flow and early sketches: 1 hour
-
Visual and interaction design: 2 hours
-
Discovery
I conducted 15 minute interviews with 3 friends who are avid coffee drinks and enjoy going to local coffee shops. I wanted to better understand:
-
When and why do you users go to coffee shops?
-
How do users interact with Instagram?
Insights from interviews
-
Coffee shops and Instagram are, respectively, physical and virtual spaces where people go at their own leisure for social reasons.
-
On coffee shops: Users often discover coffee shops based on recommendations or by chance. Users are also usually open to trying recommended menu items.
-
On Instagram: Front page feed, Instagram Stories and Reels are the most used features in that order. Discover and Shop are less frequented.
Deciding The Use Case
From the interviews, I had a small list of possible use cases. Choosing a use case that benefits all 3 stakeholders involved (Instagram, local coffee shop, and consumer of both) was a difficult but interesting problem. I voted on each use case based on its:
-
Desirability: user wants or needs it
-
Feasibility: quick and easy to build
-
Viability: sustainable business model
-
Uniqueness: a use case that can be unique to Instagram
Note: These are purely based on my limited knowledge of each criteria. If this was an actual product, I would consult business stakeholders, PMs, engineers and target users to inform the votes.
I picked the use case that met all 4 criteria:
an integration where users can buy from coffee shops directly from the shop's Instagram posts
-
Ad revenue
-
Users can purchase and still remain on the app
-
More reasons for people to browse on the app
Consumer
-
Easy to browse and buy
-
No need to create a separate retail account to purchase
-
No need to navigate to a different app
Coffee shop
-
More traffic and visibility, leading to more sales
-
Smoother funnel from Insta post to sales
-
Minimal tech maintenance
the case for buying from coffee shop through Instagram
Understanding
User goals
-
Buy from and support local coffee shops
User tasks
-
Browse menu items on Instagram
-
Decide on their order
-
Check out and pay
Potential painpoints
-
Difficulty in browsing menu and ordering
-
Hesitant to add their credit card number directly on Instagram
-
Don't know when their ready for pick up
User stories
-
As a consumer, I want to
-
Easily browse menu items, so I can quickly decide my order
-
Feel secure in my transactions, so I can keep my financial information safe
-
I want to know when my order is ready, so I don't have to keep checking
-
Design Goals
Seamless
Reliable
Not distracting from user's normal use of Instagram
Provide users with necessary updates and information
Sketches
Final Design
Seamless integration into main feed
By integrating it into the main feed instead of a separate tab, users aren't distracted from their usual browsing. This also allows for easy discovery.
Easy browsing
Visual heavy menu (as opposed to just a word list) helps guide users through the menu while being consistent with Instagram's branding.
Secure checkout
-
Paying with Google or Apple Pay
-
More secure than sending raw credit card numbers due to the use of digital tokens
-
Most users already have either one
-
-
"Swipe to pay" interaction
-
Adds another layer of security so users don't accidentally check out
-
Transparent
Clear success message when order is placed and notifies user when orders are ready for pick up. This allows the user to continue browsing on Instagram at ease while they wait.
Taking A Step Further
Feature discovery
I designed an extra screen so users can learn about the new feature. This will only pop up once after the integration has been released so it doesn't become interruptive.