Wrapped – App Design Project
Concept
Gift giving can be stressful for many of us, and yet it is often an essential part of many celebrations every year. What if there was a product that could alleviate some of the stress of gift-giving, while allowing everyone to enjoy the process? This is the idea behind Wrapped – an app for creating gift lists, gift suggestions, and sharing them with friends and family.
Research
In our market research we didn’t find any app that focused specifically on gift lists. Every shopping platform has their own wishlist functionality, but nothing out there to centralize them. This meant we were building from scratch in terms of what the app should do, feel like, and look like.
Process
We started with outlining the key functionality of the app, and then organized those features into pages using sticky notes in FigJam. We knew the core of the app was to browse products, save them to your list, and Wrap them (purchase) for other people. We also included secondary features like making shared lists, suggesting products based on tagging, and adding custom items to lists.
Next we moved to InVision Freehand for wireframing. We worked through 3 different flows – onboarding, adding items to your own list, and browsing a shared list. We nailed down our navigation structure, the flow of the app, and the layout patterns.
When the wireframes looked solid, we moved to Figma for mockups and prototyping. We chose our colors and fonts to evoke a celebratory mood – a light champagne background and deep green accents. We used an elegant serif font – Eugusto – for a classy feel.
We created components first, starting with smaller things like buttons and chips, then combining them into bigger elements like cards (following Atomic design principles). We split up the work of creating the screens once the components were done, since that ensured we were staying consistent across the design.
Once the key screens were done, we connected them together in a clickable prototype using animations, transitions, and various trigger types. We also made use of Figma’s new (at the time) interactive components.
Result
It’s always fun to design something you can actually see yourself using, and Wrapped was no exception. This project taught us about some new features of Figma at the time, new ways to wireframe in flows, and the power of collaboration. We created over 20 screens in just 8 hours. You can check out the prototype for yourself!
DuoSongs
