
At-a-glance
Stamply translates the nostalgic experience of getting a loyalty card stamped at your favorite local business to a digital experience that prioritizes discovery and convenience. In this concept app, I participated in a team of two with my partner, Liv Jenks. Stamply was a first place winner for Adobe College x Ring Creative Jam out of 200 teams!
My Role
Product Management
Prototyping
Interaction Design
Visual Design
Tools used
Adobe XD
Whimsical
Team
Liv Jenks
Timeline
1 week, July 2021 (Hackathon)
01 The Problem
The Challenge
Adobe College + Instagram Creative Jam was an event for student designers across the United States, Canada, Australia, and New Zealand. Teams had a week to work, and all submissions were scored by a judging panel of professional designers and product managers. At the Finale, finalist teams presented live to a panel of expert judges from Instagram and Adobe.
Our challenge is to design an accessible third-party app for Android mobile devices that highlight people’s favorite local and undiscovered small businesses.
Constraints
- Mobile app that solves an accessibility need
- Liv was a first-time user to Adobe XD
- Both of us were new to Android design
- Designing for low-bandwidth areas where connection may not be as strong
- Brief project timeline to complete
02 The Solution
The solution proposed is an Android loyalty application that uses a reward system to increase engagement with small businesses. On Stamply, you can support diverse, local businesses that align with your values and needs. You will also earn stamps for shopping small that can be used for exclusive rewards. To make the app more accessible, we also designed Stamply to be accessed anywhere, even in low-bandwidth areas, by designing a text-only version of our app.
03 User Research
Defining the problem space
Liv and I went through the phases of the design thinking canvas, thinking clearly through the people, challlenges, storytelling, problem, solutions, management, vision and impact using the design thinking canvas. This helped us evaluate the strength of our ideas to ensure we were thinking of our users in mind.
Design Thinking Canvas created to help us ideate different parts of our concept
User flow
For the user flow, we decided on different interactions in our app based on our initial brainstorm of features. This served as a reference for us later when prototyping our design.
Brainstorm of features we wanted to include in our app
04 Ideation
Low-Fidelity
We began with low-fidelity wireframes, trying out different versions of screens and outlining sections of our app using Whimsical. Visual explorations through low-fidelity wireframes.
Medium-Fidelity
We then transitioned to Adobe XD, where we referenced styles from Adobe XD UI Kits and applied preliminary styles from our design system to create medium fidelity wireframes. We relied greatly on Material Design principles to help us think through visual hierarchy on screen. Visual explorations through medium-fidelity wireframes.
Design System
We built a modular, component-based design system to prioritize consistency and usability across our product. Our visual design takes inspiration from the brand identity of the Shop Small movement while maintaining a highly minimalistic and simple design with only a few accent colors to increase accessibility between the text-only and default modes for our app.
We created our own design system and built our branding!
05 Prototyping
Final Prototype
From here, we went on to implement branding, microinteractions, animations, and color through our high-fidelity wireframes. Prototyping on Adobe XD taught us how to tell a visual story through microinteractions. We took advantage of the smart-animate and timing features to make our app more interactive and realistic. View the interactive prototype here.
Onboarding
App Preview
We wanted to let users preview the features available and start filtering for small businesses they wanted to shop.
Micro-interactions
We added small, subtle animations for our app start screen and connecting to wifi.
Accessibility tools
From the onboarding, you can opt out of location tracking to use your last saved location when connection is limited and choose to use a text-only version of the app.
Stamply Lite
“Lite” version for low-bandwidth connectivity
Stamply Lite lets users experience Stamply without media while still getting the information and details you need. Our app automatically detects when a user's connection is low bandwidth and prompts them to switch to a text-only version.
Minimalist design
We prioritize showcasing essential information and details needed to discover small businesses that matter to you through a light, minimalist interface to lessen the transition between Stamply and Stamply Lite.
Discover Small Businesses
Small Business Pages
Learn more about a small business and its story, save it as a favorite, and stamp its card for rewards.
Digital Stamps
Earn digital stamps for shopping small that can be redeemed for rewards to help businesses build a loyal customer base.Redeem using scannable QR codes and mark offers as used.
Search & Explore
Filterable tools
Flexibly search and filter by category, goods and services, and location to find businesses by BIPOC owners that mathc your criteria.
Location search
When your bandwidth is low, Stamply will use your last saved location to locate businesses near you. You can also use predetermined major cities to search.
06 Presentation
We won first place at the Adobe Creative Jam!
We received notification that we made it to the top 10 and had a few days to prepare for the next round! As finalists, we presented in the Finale with a live 3-minute demo of our app and its user flow.
Finalist Presentation
Feedback
“I might just be old school, but I love the loyalty program aspect of [Stamply] and the gratification of getting stamps for rewards. It was done in a very simple and concise way, which was great.”
– Paula Guzman, Product Designer at Instagram
“It felt incredibly straightforward and intuitive to use. I appreciate the focus on ‘lite,’ having a text-only version, and I liked that that feature was mentioned early in the onboarding flow to show the value of the app.”
– Adam Kopec, Product Designer at Instagram
“I love that the value props are clear in the onboarding, and it’s a really lovely idea to highlight minority-owned businesses. I would definitely use this app.”
– Celeste Lam, Creative Director at Adobe
Award ceremony
07 Next Steps
Refine the visual system to be more friendly and warm
To represent our mission of supporting local businesses, it is important that we consider how best to reflect that sense of community in the visual identity of our app. Creating this approachability while still maintaining a minimal, streamlined look would be central to next iterations.
Expand to include customer reviews and feedback for businesses
One of the pieces of feedback we got from the judges was to incorporate features that invite users to engage with the platform (i.e. by leaving reviews and feedback) to create a sense of engagement and community.
Build business version of the app
“Stamply Business” would allow businesses to create and tailor their profiles with photo galleries, their origin/founding stories, and customize the rewards they offer customers.