Simplifying the gift exchanging process with a social gift list app for iOS

  • Role
    Product Designer, UX Researcher
  • Project scope
    iOS App
  • Tools used
    Figma, Spline, Typeform, Notion, Maze
Overview
We've all heard the question, "What do you want for you birthday?" I personally don't typically have a list of things in mind prepared for when this question comes up, so my response is usually, "I don't know." After being asked this question leading up to my most recent birthday, I decided to take some time to draft up a single gift list in Notion to share with everyone at once.

It was a hit! The list made it easier for my family to coordinate and plan with each other so two people didn’t gift me the same thing. “Did you get him the headphones? No? Ok, well that’s what I’m getting him!” Selfishly, I also benefited and got some cool stuff.

I have every reason to believe there's an opportunity to create a fun, engaging social product that streamlines a collaborative gift list / gift planning process between family and friends.
Solution
Design an app that helps simplify the gift exchanging experience through a fun, engaging gift list app

iOS App

  • Social features
  • Create, share and browse gift lists in multiple views
  • Beautiful, intuitive UI
  • Follows Human Interface Guidelines

Branding

  • Fun logo
  • Engaging
  • Celebratory
  • Simple

Design process

Although presented here in a linear format, I prefer to take a more lean approach in my design process.

For example, at the very beginning of a project when I'm conducting research, I'm never afraid to take note of good and bad UI patterns, or explore UI ideas before any substantial research has been completed. I do this for the sake of staying locked in and stimulated, adding context to what kind of challenges I may be facing ahead, which strengthens the overall quality of the research that follows. Even when I'm confident I've gathered enough research and data to make informed design decisions, I make a continuos effort to seek new insights and constantly challenge my decisions to drive my work forward.

I don't believe there is ever a true "end" for great design work, and there is always room for improvement, which requires me to be agile throughout the entirety of my design process.
1. Research
- Competitor analysis
- User survey

Jump to Research section →
2. Define
- User personas
- Feature prioritization
- Sketches and wireframes

Jump to Define section →
3. Design
- 3D Logo process
- Brand kit
- End-to-end iOS application

Jump to Design section →
4. User testing
- Prototyping
- Usability testing
- Next steps and learnings

Jump to User testing section →

1. Research

Being that this app will include a number of social features, it was important for me to get a good understanding of people's current gift exchanging experiences.

1. Understand how people currently exchange gifts with people they care about
2. Validate the need for a new gift list app

Competitor analysis

I started by taking a look at existing gift list and wish list apps work, and how successful they are in simplifying the gift exchange experience. I downloaded a handful of apps from the App Store, and played around with each. I logged my experiences with each app in a Notion document.

I quickly found a handful of these apps offered a less than optimal user experience (clunky interfaces, hard to reach features, or lack of features). There were only a couple of apps that stood out as having invested more time and thought into creating a delightful user experience.

As I sifted through reviews of each app, I found consistencies in the features users seemed to get the most value out of these apps, such as the ability to fetch gift data by importing an e-commerce link, and having the ability to share lists with family and friends.

User surveys

I decided it'd be helpful to conduct surveys to collect a subset of data that would give me deeper insights on how people exchange gifts. I had 2 goals for the survey.

1. Learn about who participants exchange gifts with, and how they shop for those people (giving)
2. Learn about how people shop for the participants (receiving)

I organized my questions under those two themes. Here was my survey process:

1

Recruitment

Criteria for participating in the survey is simple: participants must have exchanged at least 1 gift with someone within the past year.

2

Create survey

I spent some time designing the survey with a total of 16 questions focusing on the two themes above: gift giving, and gift receiving.

3

Deploy survey remotely

I hosted the survey on Typeform and sent out it out to friends, family, and anyone else who fit the criteria and was willing to participate. In the end, I collected responses from a total of 26 participants with an age range from 17-64 years old.

2. Define

Prior research confirmed there was a clear demand for a better, more delightful way to improve the gift exchanging experience and that gift lists were a proven method of doing so. Now it was time for me to plan what that experience would look like. My goals for defining the product were to:

1. Determine exactly who I'll be designing for
2. Clarify a structure for the way content will be presented
3. Organize a list of features to build based on prior research
3. Visualize potential design solutions and prioritize flows

User personas

I started by creating two personas for the app. These personas will be used as reminders of who I'm designing for throughout the remainder of the design process. Josh was a reflection of the likely average user of the app, who was attempting to find a simple solution to exchanging gifts with his family, who happen to live further away. Daya was in a bit more complex of a situation, mainly looking for an app for her boyfriend not only to make sure she gets him what he wants, but also to find suggestions for other gifts based on the items he provides.

I ultimately decided that the primary persona would be Josh, being that his story presented high-priority product opportunities that presented a good starting point for building out an MVP, whereas Daya needs could be met in future updates and iterations of the app after basic functionality was worked out.

Feature prioritization

I referenced previous research to compile a list of high-priority features that were critical to the success in my goal to offer a simple, engaging gift list product. The features I would be building out were:

- Familiar, low friction onboarding flow
- Add a gift to a list with the simple option to paste the link of an item from an e-commerce site to grab all necessary information
- Add and invite friends
- Multiple views for lists (list owner view, list visitor view)
- Gift claiming, which notifies other users that someone is already gifting the item
- Activity feed, to allow users to easily keep track of updates to the lists they follow

Sketches and wireframes

Once the features were planned, it was time to start hashing out the structure of how the lists will be presented. To start, I rapidly sketched some potential grid-based list layouts for the app, and explored views both with and without a profile at the top of the screen.

After reviewing my sketches, I reminded myself that in order for this app to be successful in feeling familiar and simple to use, it was important for me to adhere to Apple's Human Interface Guidelines and leverage the design patterns and functions that iOS users were already familiar with. This was a rule I reminded myself in every design decision moving forward as I began wireframing some initial flows and ideas in Figma.

3. Design

With a solid foundation in place and lots of data on hand, I began the design process. My goals were to:

1. Develop a brand identity for Gifty List that is fun and engaging
2. Design a 3D logo
3. Plan the start of a scalable design system for the Gifty List brand
4. Design an end-to-end iOS application

3D Logo process

Even though product design is my strength, for this project I decided to experiment with the process of creating a 3D logo. I jumped into a new web-based 3D design tool, Spline, and began experimenting.

As you can see, the logo went through quite an evolution since the first version. After some time, I came up with a simple gift logo that was colorful and to the point. These influenced the brand colors heavily. Feel free to scroll and play with the logo embedded straight from Spline below!

Want to give it a spin?

Click and drag the Gifty List logo below!
(If it has trouble loading, you may have to refresh the page)

Brand kit

Color explorations that took place during the logo design set the trajectory for the creative direction of the rest of the brand moving forward. I explored styles with the existing wireframes and began building Gifty List's design system which evolved as I continued to flesh out screens and flows throughout the app.

End-to-end iOS Application

The design continued to evolve and the UI of the Gifty List experience came to life.

view prototype

4. User testing

It was time to test this design and see if it was as big a hit as my original Notion version was amongst users! I wanted to make sure it was easy for people to navigate, so I can validate the features that worked and iterate upon any kinks in the design that were brought to surface through testing. My goals for user testing were:

1. Conduct and analyze user tests to measure user friendliness of the design
2. Prioritize feedback in order to iterate on the design

Usability testing plan

It was time to test! I wanted to make sure this app was easy to use, delightful. The test plan was:

Participants
Gather a handful of participants who have exchanged gifts recently, or have made a gift list in the past.
Scenarios
Scenarios will include missions such as adding a gift to a list, adding a friend to the app, and checking friend activity.
Methodology
Testing will be conducted remotely on Maze. Participants will be given a link, and then presented several missions to complete based on scenarios in the prototype.

User testing and results

The goal for testing was to validate the design's ease-of-use when going through task flows for each feature.

42 anonymous participants
User test results
  • Average of 4 seconds spent on each screen in Add a Gift flow
    Users were easy able to navigate how to add a gift to their list. The most time spent was on the home screen, which was the first screen they were presented in the product, where they tended to click around (likely seeing if it was a fully interactive application). Once they got in the flow of the mission, they wasted no time adding a gift to their list!
  • 93.9% success rate on sharing a gift list
    The "Share" feature lived within the menu which user's could only see when they clicked the floating action on the top right of the list page. This proved that users were conditioned to knowing how to navigate Human Interface Guidelines, and were able to find a seemingly hidden feature near effortlessly.
  • Users expressed confusion when leaving the Add a Friend flow
    Despite the test numbers showing a high success rate in the Add a Friend flow, some users pointed out that some patterns were less than obvious, such as using a "Cancel" button to complete the action.
Takeaways
The app proved to be super easy to use for almost every participant. One big takeaway is that the friend flow could be improved upon by making it a bit more clear where to go next after adding your friends.

Iterations

Following feedback received in usability tests, it was clear the Add a Friend flow could be improved.

Being that the Human Interface Guidelines didn't fail me in the past, I decided to clarify that an additional action was required to complete the flow by removing the nav bar from the bottom of the screen, bringing the card forward from the notch up top for the entirety of the flow, and then also made a stylistic decision to change the "Add friend" icon because it felt very too strong in the visual hierarchy.

Next steps and learnings

Now that the app is proven to be functional and an MVP is designed, next steps would include further polish on the visual design by animation delightful interactions and transitions throughout the app in a tool like Flinto and Principle. Once the app is fully interactive, it'd then be worth exploring additional features that would be possible to implement to our secondary persona Daya's needs, such as providing gift recommendations based on existing items in the list, and an option to add things someone might not want.

This project taught me so much about the importance of working within an existing framework such as Human Interface Guidelines, and sparked some newfound passions for me to learn more about 3D and interactive motion design to push the needle with this app further.

view prototype