Gifty

Summary
End-to-end mobile app designed to help users discover ideal gifts and remember important gifting events.
My Role
UX/UI Designer, UX Researcher
Timeline
Jun 2023 - Jul 2023 (4 weeks)
Tools
Figma, FigJam
Jump to Final Solution
This is a student project and I am not affiliated with Spotify. All rights are reserved to Spotify.

Project Background

More than just a gift.

The act of giving gifts can serve many purposes and hold various forms of importance, including how humans express love and affection, celebrate special occasions, strengthen social bonds, and many more. However, the sentiment behind a gift often carries more weight than the material value. The act of giving itself can have a positive impact on both the giver and the recipient, fostering a sense of connection, happiness, and gratitude.

THE PROBLEM.

We aim to address the common challenges associated with gift-giving, recognizing that finding the perfect gift can be daunting due to various factors such as individual preferences, fear of disappointment, and budget or time limitations.

Additionally, we understand the struggle some face in ensuring timely gift procurement, whether due to difficulty in remembering dates or uncertainty about where to start shopping.

THE DESIGN PROCESS.

double diamond design process
No items found.

research plan

Understanding our problem.

I crafted a research plan aimed at conducting user interviews and performing a thorough competitive analysis. The primary objective is to gain deep insights into the problem, focusing particularly on understanding the motivations and pain points of individuals who have engaged in gift shopping.

Research Goals.

  1. Identify the context or motivations behind wanting to find an "ideal" gift
  2. Determine what methods or platforms that do or do not work for users
  3. Learn what challenges and frustrations arise when trying to find a gift

user interviews

How do people find the most ideal gift?

I conducted 4 one-on-one interviews with users who have recently bought a gift for another person and/or value the act of gift-giving as an expression of affection. My participants expressed what gift-giving means to them and shared their frustrations and challenges when failing to find a good gift for someone. Here is what they said:

User Quotes.

"It's a challenge to plan ahead to see if I'll get the gift in time because I'm usually forgetful with dates."
Participant #1
"I always doubt that they will like what I chose... I know it's the thought that counts but sometimes I worry if they'll like it. [This] makes me feel frustrated, doubtful, and skeptical of what the "right" gift is."
Participant #2
"I'm a little overwhelmed if the dates are approaching and I haven't found a gift yet..."
Participant #3
"I feel happy when people give a good gift or something I like because they put a lot of thought and time into it... Even if it's something I can't use, I appreciate the sentiment and that they thought of it during the process of finding it."
Participant #4

current assessment  

The Before Shot

After analyzing the business' data and determining their core problem in retaining their customer base, I took in a full assessment of what we currently have as their active website, in order to highlight where we should focus most of the redesign. 

analysis of current home screen and landing page
analysis of current product listings page
analysis of current product details page
analysis of current bag overview screen

user interviews  

Affirming with our audience. 

In part of understanding the data is  connecting with previous users to gain insight on real user opinion of the current website, as well as to understand their mindset when shopping online. I talked to 3 participants who have previously shopped with REVERE THE BRAND in attempt to learn what does or doesn't work for them with the current website, and determine what makes an enjoyable and effective online shopping experience. 

user survey

Collecting a general impression.

Next, I conducted a survey of 25 people to gain a broader understanding of the level of interest in Spotify's social feature, and to gain insight into their opinions on the platform and the potential for music sharing to enhance social connections.

Survey Results.

  • 96% of users strongly agree that music can help build stronger connections with friends.
  • 88% of users believe that listening to the same music can create shared experiences.
  • 76% of users would rather listen to music recommended by a friend than an algorithm-generated playlist.

competitive analysis

What are other apps offering? 

To better understand similar apps on the market and identify key features, I created a competitive analysis of some popular shopping and gift suggestion applications.

Competitive Analysis of gift suggestion apps

Key Takeaways.

Don't be too broad or vague.

Shopping guides being too broad or vague can make the gift shopping process overwhelming, adding on stress and deter users from finding anything truly potential.

A personal and unique experience.

If it's curated or personalized, it helps users feel like they have their own personal shopping assistant, someone who is specially there to help only them.

Make it intuitive.

A huge online marketplace like Amazon can be hectic, but is actually user-friendly due to its intuitive UX design and layout.

Strong landing page.

These websites feature strong call-to-action buttons on their landing page to immediately captivate users.

AFFINITY MAPPING

Synthesizing our user research data.

Next, an affinity map was created to organize and synthesize the data collected from user research, primarily from user interviews. It helped in gathering common themes surrounding motivations, pain points, and needs, which will essentially create the ideal user persona for this product.

INSIGHTS + USER NEEDS.

Insight #1: Users find it stressful and uneasy when are unable to obtain a gift in time.

Need #1: Users need to get a gift in time to prevent feeling stressed.

Insight #2: Users feel anxious when they are unsure about what gift to get.

Need #2: Users need a way to discover ideal gifts.

Insight #3: Users feel more confident and excited to give gifts when they are guided through what to get the other person.

Need #3: Users need a form of guidance to know what to shop for others.

INSIGHTS + USER NEEDS.

Insight #1: Having common music interests with friends helps users feel closer to them.
Need #1: Users need to know if they share common music interests with others to feel closer to them.
Insight #2: When sharing music with others, users feel good when they receive positive feedback.
Need #2: Users need to feel validated through their music recommendations.
Insight #3: Users find it limiting to use Spotify's algorithm-curated playlists to discover new music.
Need #3: Users need an alternative method to discover new music.

user persona

The Thoughtful Gifter.

Through key insights collected from user research, I developed a user persona for someone to feel more confident when shopping for others.

gifty's user persona, daniel

What features would best help our user?

Given the key insights I've gathered along with a clear user persona, I've concluded that those who use a gift-suggestion app would benefit most from the following features:

  • Gift Guide Curation, so users can personalize a shopping guide for anyone, based on the individual's interests/hobbies, preferred brands, etc.
  • Event Reminders, so users will never miss the chance to be empty-handed for any event.
  • Saving Products, so users can gather several gift options by adding or saving items they like and viewing them in an organized space.
New Social Features to be added:
  • Social feed for sharing and interacting
  • Direct-messaging within Spotify app
  • Two new playable options
  • A re-vamped user profile

Brainstorm, brainstorm, brainstorm.

I used my HMW questions as a starting point to ideate multiple solutions, which I then prioritized based on insights gathered from user research.

information architecture

Defining the layout and flows.

In order to create a well-structured and user-friendly app, I crafted an app map detailing the information's designated locations. This helped me gain a clear visualization of the app's architectural layout and improved the understanding of its functional flows.

gifty sitemap

Moreover, a user flow was also created to demonstrate the functionality of the app's features.

User Flow: gift shopping for a friend

gifty user flow

brainstorming

Ideating by sketching.

Based on the developed information architecture, I began sketching several wireframes to illustrate the general design and framework of the gift suggestion app. I included the key features that users will be using, such as inputting friend information into the app to build their profile, viewing the curated gift guide, and viewing upcoming events.

brainstorming / 

Stepping up our features.

With my persona in mind, I brainstormed key features that would serve their needs.  

Based on my research, I believe that the following features would have an effect on retaining customers and creating an enjoyable online shopping experience:

  1. An appealing landing page, since it is the user's starting point where they should be quickly drawn to a product or various selling points.
    Shelly is visiting this brand for the first time and is immediately drawn to the newest collection and their ongoing sale promotion.
  2. A review and ratings section would be an effective addition because it would assure buyers who value shopping with confidence.
    Shelly is unsure if this shirt would fit her boyfriend, so she looks at the reviews and photos from other users that are similar to her boyfriend in order to make a decision.
  3. A 'Complete the Look' feature that would suggest new items as it would promote other products and also inspire users on styling choices.
    Shelly likes the top she's buying and notices other items suggested to go along with the top. She completes her look with the recommended items.

wireframes

Digitizing the vision.

Transitioning from rough low-fidelity sketches, I refined the design by creating mid-fidelity wireframes, providing a more detailed visual depiction of the app's structure and optimal utilization of key features.

mid fidelity wireframes with detailsmid fidelity wireframes with details

style guide

Animating the app's essence.

In designing the app, I aimed to encapsulate the essence of positive energy, enthusiasm, and excitement—emotions that I believe are inherent in the act of giving and receiving gifts. By blending vibrant and bold oranges with neutral tones, I brought to life that sense of positivity and excitement within the app's design.

For the logo, my goal was to incorporate the brand's colors into a simple logotype of the brand's name, while also attempting to include a shape reminiscent of a pompom bow typically found atop presents.

The name of the app, 'GIFTY,' was chosen intentionally to evoke the adjective 'nifty,' as defined by Merriam-Webster Dictionary with meanings including 'very pleasant or enjoyable' and 'well-executed.' Above all, its informal definition conveys 'very good.' My aspiration is that if the design of GIFTY is well-executed, users will excel at giving gifts and find the experience highly enjoyable.

high-fidelity mockups

Putting it all together.

By adhering to the UI style guide, I transformed the mid-fidelity wireframes into a tangible representation of the GIFTY app. Next, I updated areas with information mockups and stock photos to provide relevant content. When I finally got a realistic mock up of what the product could be, I began tweaking certain areas to maximize its usability before I introduce the app to usability testing.

the visual branding palette for revere's redesign

high fidelity mockups

Bringing the vision to life.

With my foundations set up through wireframes and visual branding, I can now begin piecing everything together by updating the brand's content and playing with the UI elements. With this, I produced high-fidelity frames for my initial prototype for responsive devices through Figma.

usability testing

Seeking affirmations.

With high-fidelity wireframes in place, I developed an initial interactive prototype to send out for usability testing. I wanted insight on design decisions and inconsistencies, as well as to detect any user frustration and confusion when engaging with the app. I asked four participants to perform the following tasks:

  • Complete signing up for an account
  • Add a friend into the GIFTY app
  • Browse and save gifts

Usability Testing
Results & Iterations

100% of the users were able to complete signing up and adding a friend's info into the app

100% user satisfaction with the layout and UI

"This app feels youthful and makes me excited to look for gifts... it's pleasing to look at."

100% would like to see this concept developed into a real app

"This would help me a lot because I never know what kind of gifts to get..."
"I like that it helps me feel closer to my friends as I'm trying to understand what they like"

However... only 75% of users were able to successfully save a product and expressed confusion with certain flows within the app.

Pain Points.

  • The home screen was under-utilized in highlighting the main goals and features of the app—the curated "Gifty Guides" and reminding users of upcoming events
  • The verbiage and UI surrounding the save function confused users on where the saved product will go
usability testing iterations
Iteration #1: Prioritizing our goals.

On the home feed, I rephrased 'Upcoming Events' to 'A little reminder ⌛️' to express how quickly events are approaching; added how many number of days are away, to prevent any date confusion; and pushed content higher up to highlight its value. 

Replaced Saved Gifts with quicker access to curated "Gifty Guides" so users can begin exploring potential gifts and provided context into what "Gifty Guides" meant. 

Iteration #2: Optimizing extra space

Reframed the original content to create space for saved items so users will always be reminded of gift options whenever they visit a Friend's Profile. 

Iteration #3: Vertical = Effective

Rephrased 'lists' as 'collections' to mitigate confusion and transitioned the save function to a vertical format. This change was aimed at optimizing user-friendliness, allowing for improved content viewing and the ability to save to multiple options. 

iterations made on the home screen
iterations made for the reviews

Final Solution

interacting on social feed gif

Introducing 'Spotify Circle'

Explore a new social presence called Spotify Circle where users can  share music, see what friends are listening to, and interact with friends to engage in a whole new music-bonding experience. 

Re-vamping the user profile.

Check out a friend's shared music activity on their user profile, along with discovering your music taste compatibility with them.

With this feature, you can effortlessly utilize Spotify's existing Blend  feature and create a mix that fits both of your tastes. 

user profile gifwalkthrough of finding spotify circle playlists on prototype

Finding music from friends.

Spotify Circle will also introduce two new playlists, allowing for users to discover music outside of their preferred genre as well as learn what friends are listening to through the convenience of a playlist. 

Share directly within Spotify.

Send song recommendations to friends directly within the Spotify app to make music sharing easier and faster than before. 

how to share or send music directly on spotify gif
onboarding prototype gif
Onboarding: New users can sign up and personalize their settings to create a Discover Feed with suggestions made just for them.
Topics and Filters: With accessible topic links on the landing page, users can easily navigate to areas under chosen topic. They can further refine their results by using the filters.
topics and filters gifexplore an area task gif
Explore an Area: Upon finding an area of choice, users can explore surrounding amenities such as parks and read reviews from locals.
Explore through navigation
Browse the home page for trends and featured collections or navigate the menu to shop different categories.
browsing home page gif
Filtered browsing
Browse through products with simplified categorization to narrow down your search.
browsing products gifadd to bag gif
Shop with Confidence
Read reviews from other buyers to make an assured shopping choice.
Simplified Styling
Complete the look by browsing through our style suggestions for an easy and quick shopping guide.
complete the look gif

Available on desktop and mobile!

image for revere's responsive models

Personalize your profile.

Sign up and complete your profile by adding your information and hobbies or interests to customize your own curated guide and begin discovering gifts,  even for yourself.  

Never miss an important date.

Event reminders are a top priority so you will never miss a chance to get a gift for an important date. Let it lead you to the friend's profile so you can begin shopping for them or pick up where you left off. 

Discover the right gifts.

Add a friend into  GIFTY  by inputting their information (as with your own profile) to begin exploring numerous gift options that were curated just for them. And saving it to buy  later is as easy as a single tap. 

Save for any event or anyone.

Like what you found while browsing? Save it to a collection you made or a friend you think it'd be perfect for. All within one action. 

Closing Thoughts

What I learned.

It was easy at times to become biased towards a design direction I had in mind and convince myself to try to make it work. I found designing based on a specific vision had led me to face confusion and ineffectiveness in initial designs. Although I wanted to bring this vision to life, I focused on the insights derived from data research about the target user and integrated the feedback from usability testing to understand what was effective and what wasn't. It was important to learn now that the design process is never linear—I ran into several hiccups along the way with how I designed the application, and getting feedback from users proved that repeated iterations are crucial to bring forth the best design possible.

Although designing an end-to-end app was challenging in fulfilling all users' needs, I thoroughly enjoyed executing it with more creative freedom compared to previous projects. The most rewarding aspect is when real users show enthusiasm for the concept, expressing their wish to see it actualized in the future.

If given more time, I would like to explore additional features and design it into the app, as well as conduct extensive user testing to make sure users are not confused by my verbiage and understand the task flows. In the end, I acknowledge that my skills and competence as a UX designer has been further solidified and is set to continue improving, thanks to the challenges met at every step of a not-so-linear design process.

arrow up image for back to top scrolling