Homeful

Summary
Homeful is an online platform for users who are looking to move gather resources and useful information on new areas. It is designed to deliver helpful information without stressful and tedious research so that more users can find a place they will be happy with.
My Role
UX/UI Designer, UX Researcher
Timeline
2 months
Tools
Figma (wireframe + prototype)
Jump to Final Solution
This is a student project and I am not affiliated with Spotify. All rights are reserved to Spotify.

Project Background

Moving can be stressful.

With the current competitive real estate market, users often find themselves stressed and discontent when making life-changing decisions. A lot of research and decision-making go into the moving process, especially during the “before” phase, when you are still deciding what area to move to.

It can be difficult to compile all the information you’d consider when looking for a new place--safety, cost, compatibility, etc. Users typically conduct intensive research on several areas until they find the perfect match and the effort tends to become stressful when it’s under pressure of a competitive market.

THE PROBLEM.

Users find it challenging and stressful to move to a new place to live if they aren’t prepared with useful information about an area which leads them to become unmotivated.

THE DESIGN PROCESS.

No items found.

user interviews

Understanding our users.

After establishing the issue at hand, I began putting together a research plan to help me define specific goals for user interviews.

I wanted to learn:

  1. What is the mindset of users when they are looking for a new place?
  2. What challenges do users come across when searching?
  3. What are the top factors that are considered when moving to a new place?

Who we talked to:

  • People between the ages of 25-36
  • People who have recently moved
  • People who have thought about moving in the last year
  • TOTAL PARTICIPANTS: 7

Key Insights from User Interviews.

key insights from affinity mapping and interviews

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.

user personas

Who are we doing this for?

My interview research led me to conclude my users fall into the following 2 categories:

"The Acute User" - someone who is not in a rush.

  • PAIN POINTS - Feeling unprepared in a competitive market and underestimating the amount of required research
  • NEEDS - A place that meets requirements—pet-friendly, lifestyle, work—and feeling certain in their decision
  • MOTIVATIONS - Hopes of starting a new chapter of their lives and seeking independence

acute user

"The Avid User" - someone who is urgent and frequently searching.

  • PAIN POINTS - Little time to reconsider in a competitive market along with pressures from urgently finding a home
  • NEEDS - A suitable place within a certain time limit, usually seeking places that are safe & good for families
  • MOTIVATIONS - An important new change in life, such as starting a family or having to relocate

avid user
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.

competitive analysis

Scoping out the competition.

To understand the market and user behavior, I looked at competitor companies and products and analyzed their strengths and weaknesses to see potential market gaps. This served as the foundations of future ideation for features.

I found that while these services provided users with information useful to the searching process, their targeted user group was either too broad or too specific. Most of these products provide resourceful features, but are designed to serve a specific task or user; they did not focus distinctly on delivering information to a general user who is looking to move to a new place.

My assumptions were confirmed when I created a features list and noted each product’s specialty, thus concluding that there is not a product that is an “all-in-one” provider for the general user who is looking to move.

competitive analysis chart
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.

project goals

Setting our goals.

Before I determine my full set of features, I took a step back to get a clear overview of what my goals are, in terms of user, business, and technical, as well as any common goals in between. Understanding clear goals will aid in making the best decisions when it comes to prioritization later on.

project goals venn diagram

ideation

Brainstorming our features.

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

Based on my research, I determined that users who are looking to move might benefit from the following features: 

  1. New user onboarding, so that users can personalize their discoveries to their liking and needs.
    This would allow for quick and easy searching because data would customize recommendations to the users that are more aligned with their preferences.
  2. Search filters would be a great addition to the platform because it simplifies the searching process by narrowing results to the user’s liking.
    The avid user would especially benefit from this feature as it would speed up the process.
  3. Reviews are a useful source of research because it delivers insight to other users who are looking at specific needs.
    Users who are looking for family or pet-friendly areas would utilize a reviews feature greatly so read what other parents or pet owners are saying.


sitemap + task flows

Creating our Information Architecture.

Following my ideation of key features, I organized a card sorting study that was completed by a total of 4 participants. From this study, I wanted to learn how users categorize information and topics as well as to understand their mental models.

My analysis of the card sorting helped with the development of the sitemap that would outline and expand on my core features and topics.

sitemap

After establishing my core features, I developed 3 task flows to demonstrate the navigation and determine key screens to wireframe.

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.

sketches + wireframes

Low to Mid Fidelity

I began sketching low-fidelity wireframes as a rough draft to form the structure of my product based on the created task flows. This invited early feedback before I begin creating mid-fidelity wireframes. I wanted the layout of the screens to be very intuitive and easy to navigate for users. I brought my vision closer to life by adapting the sketches into digitized wireframes with clearer structure, features, and content.

mid fidelity wireframes with detailsmid fidelity wireframes with details

style guide

Visual Branding.

The visual direction I went for was to be growth-driven, calming, and reliable. I chose the name ‘Homeful,’ because it's a mix of the words ‘home’ and ‘hopeful’ in which I hope users can be hopeful they will be find their perfect home through our help.

high fidelity mockups

Life in Color and Detail.

Now in the final stretch, I started combining my wireframes with my visual UI and thus creating an initial high-fidelity mockup of the key screens for Homeful. This version would serve as my initial prototype for 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.

explanation of onboarding screens
explanation of main screens

usability testing

Testing the prototype.

For my usability testing rounds, I conducted 5 user tests on my prototype. In each test, I asked participants to complete 3 main tasks.

  1. Get started on building a user profile by completing the onboarding process
  2. From the home screen, find areas that are good for families
  3. Find information on what dog-owners are saying and if the area has parks

Usability Testing
Results & Iterations

Results showed that all participants were able to complete all 3 tasks successfully and easily.

Participants mentioned the visual appearance and aesthetics of the product stood out the most and it was very eye-pleasing.

Participants were satisfied with the ease of use of the product, including the features and content provided.

However, there were 3 areas suggested for improvement:

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

  • Feedback matters: The feedback I received for my deliverables were extremely helpful in the way I did my iterations. It's important to ask for feedback because you'd never know how else you can improve if the only perspective you have is yours! 
  • The more ideas the better: When it comes to generating ideas for designs, it's important to push beyond your first idea and see how many others you can come up with! There is never just one solution.

For my first design project, I would say I am extremely proud of the final product. If this were to become a real product, I hope it can deliver extensive data to users who will utilize it in their decision-making and improve their confidence.

Overall, I learned valuable lessons about the design process and tested my abilities when it comes to challenges I never thought I could do. There's always more to learn and I can't wait to expand my skill sets from this point on! 

arrow up image for back to top scrolling