My Role
Product Designer & PM – feature scoping, end-to-end design process, design system, etc
Team
Engineers (4), Designer / PM (1)
Time
Ongoing Passion Project
Overview
Stampd is a passion project my best friends and I started in college to address a need we identified from our personal experiences.
I have since redesigned the app, giving it a more sleek and refreshed visual identity and improving the interaction design. This project is what I've been working on for fun to keep my the spark in my creativity!
Enjoy seeing what we have come up with so far 💟.
Stamping
“Stamp” things you've enjoyed (like an endorsement) for your friends and close network to save and try out for themselves. You can do this by creating your own Stamp or endorsing something someone else's Stamp first.
1.0
Stamping from feed.
VIDEO LOOP
1.1
Stamping by creating new.
VIDEO LOOP
Organizing
Create collections and save things that either (1) you want to try, or (2) things you have loved & stampd. The goal is to make these collections shareable and collaborative for more engagement with friends.
1.2
Browsing from your collections.
VIDEO LOOP
1.3
Creating a new collection.
VIDEO LOOP
Discovering
Dive in to popular Stamps, view your friend's collections for inspiration, and save new things to try for yourself on the Explore feed. Spark interesting conversations & connection points with your friends by sharing Stamps via iMessage.
1.4
Explore feed; Update Center; iMessage Sharing
IMAGE
Media is a central axis in our daily lives that can drive connection and spark interesting conversations.
One of the things people bond over most is the media we consume. It sparks enriching conversations and gives us deeper insight into each other's personalities and preferences. Also, something as simple as sharing media recommendations can make someone valued and seen – creating a genuine connection rather than just another superficial social media interaction.
2.0
User journey to identify key pain points.
IMAGE
By mapping out a relatable user journey, we were able to see the big picture a little clearer to identify key opportunities to enhance with Stampd.
How might we leverage media discovery as a way to deepen connections and inspire individuals?
At first, the team had too many grand ideas. We wanted to push a creative solution but were getting stuck in the weeds thinking too deeply about innovating on the wrong things before we established the basics.
2.1
Team's very first brainstorming sketches.
IMAGE
After going through several rounds of brainstorming, I decided to run a Crazy 8s exercise so we could get all of our amazing ideas down on paper. This helped us to understand each other's ambitious visions and start narrowing down the base features.
The focus is not virality, but rather unleashing the power of a trusted network (as a friend-based application).
As the engineers started to built out the backend, we had to decide whether Stampd would be a friend-based model (you can only see what your friends post) or a more public model (you can see what all Stampd users' activities unless they are private).
2.2
Comparing user journey outcomes to help decide which model to go with.
IMAGE
We decided that the goal of this app was not to share with a public audience or boosted virality (like many other apps that promote influencer culture, marketing, etc), but rather to foster a “give and take” culture where friends share things they've loved.
Scoping out the V1 features.
In the simplified version of Stampd, we wanted to focus mainly on building out 1) feed interactions with Stamps and 2) personal collections as the foundation of the application.
3.0
Stampd Information Architecture
IMAGE
I scoped out the four core pages (Home, Create, Collection, Profile) and put things like intra-app messaging and DMs, linking to streaming services, and shared recommendations in the product roadmap icebox 🧊 for now.
Creating interactions around a the full card display.
I wanted the user flows to lead users to the most detailed level of a Stamp: the full card display. The intention was for Stampd users to explore from various entry points of the app, but ultimately end up in a deep dive of the selected media and what their friends are saying about it.
3.1
High level entry points and flows to a full card display
IMAGE
Mapping this out also helped the engineers understand the navigation structure of the app and also grounded the Full Card Display as the "final destination" of the app routing.
Testing skeletons of the core screens.
Once I solidified the general UX of Stampd, I zoomed into the core screens and started testing layouts. I conducted quite a bit of A/B testing with our peers as well as informally going up to people and allowing them to test prototypes using Figma Mirror. Here's an example of how I iterated through the Full Card Display layout:
3.2
Initial Iteration
IMAGE
"Too much visual focus on the wrong thing"
Users expressed a desire to see more of the media imagery and details over a focus on the comments when initially landing on the full card display; especially if there are only a few comments to view.
3.3
Further Iteration example
IMAGE
"Don't scroll the interesting stuff away"
Users liked the zoomed in media cover, but disliked that once you scrolled, it would "awkwardly cut off" the media details or completely wipe it out of view.
3.4
Final Iteration
IMAGE
"This feels fluid and helps preserve the media context"
Bottom sheets allow users to access additional content without significantly disrupting the "main" view.
Initially, I didn't go with a bottom sheet because I made an assumption that the Stamp comments would be the most interesting / "main" part of the full display view (that Stampd users would care most about what their friends are saying on the full card view, since that is the piece of information that isn't displayed in the card preview).
Through user testing, I found my assumptions to be incorrect and realized that users care a lot about maximizing interesting cover visuals and media details.
Molecules of a new visual design system.
I put together a simple design system that would help me keep the visual identity consistent and clean. I didn't sweat making too many complex components for the V1 execution because I knew things would change as we iterated.
3.5
Snapshot of basic styles and components used in Stampd visual system.
IMAGE
The first visual concept of Stampd had a bright orange theme, which I since decided to pivot from because I felt like the overuse of bright hues were detracting from the media imagery. I chose to go with a dark mode theme instead that would enhance the imagery let the media visuals pop a bit more.
1.0
Components and zoomed in screens.
IMAGE
Mapping out the main user flows for effective handoff.
Along with an interactive prototype and a handoff file with all the annotated screens, the developers relied most on the user flows I mapped out to understand the core interactions and navigation.
1.0
Final user flows Figma page.
IMAGE
We released the beta, and people loved it – honestly way more than we expected.
Before we took Stampd off the app store (for budget reasons), we had 50+ people within our friend networks who were using the app consistently. As the team reflected, we felt really proud of all the positive feedback we were getting. We really didn't expect people to actually use the beta app when we released it, but everyday we would open the apps and see new Stamps being posted!
4.0
Testimonial from one of my friends / frequent Stampd user.
IMAGE
Learnings
and reflections:
The solution doesn't have to be so complicated.
Sometimes overthinking innovation and creative solutions can lead to poor user experiences. Focus on the core interactions and go back to the basics when in doubt.
Leverage visuals for a more immersive experience.
When working with a platform that uses a lot of media imagery (e.g movie posters, album covers, etc), like that shine through!
Having talented friends who love to build is so cool.
Shoutout to the team: Adrienne Ko (SWE @ Netflix), Camden Hao (SWE @ Anduril), Devon Chen (SWE @ Amazon), Benedict Tedjokusumo (SWE @ Google), and Will McCall (CTO @ Codeviz - YC24)
With love, the Stampd team (sorry for the crusty Zoom photo – we were working very hard in this call ☕️🤓).
IMAGE