Revere the Brand

Summary
Redesigning the website of an online shopping store of a local business with an emphasis on updating the UI and adding addition features to expand the buyer’s online shopping experience.
My Role
UX/UI Designer, UX Researcher
Timeline
Jan 2023 - Feb 2023 (4 weeks)
Tools
Figma (wireframe + prototype), Optimal Workshop
Jump to Final Solution
This is a student project and I am not affiliated with Spotify. All rights are reserved to Spotify.

Project Background

Reimagining our next steps.

REVERE THE BRAND is a local online clothing store based out of Southern California, initially aimed at creating a community of women who “support and empower each other to reach their fullest potential.” However, they are now wondering what is next for the business after displaying stagnant activity a year since their launch in December 2021.

THE PROBLEM.

Since they were a newly-launched company, REVERE prioritized the development of an easy-to-use online store, favoring functionality over elaborate design elements aimed at enhancing the shopping experience for potential returning customers.

However, the current website lacks a gender-inclusive design, which is crucial for aligning with REVERE's future plans to introduce menswear products alongside their existing offerings targeted primarily at women.

THE DESIGN PROCESS.

No items found.

data analytics

Understanding our data.

Before diving into competitor research, it was most important to evaluate analytical data and understand what it's telling us. I retrieved the data from REVERE's current support platform, Shopify, and looked at the following data through its definitions:

Shopify definitions

revere data analytics

What is the core problem and why is it happening?

By the looks of REVERE’s data analytics provided by Shopify, we witness a clear problem in retaining returning customers and increasing visitor traffic and sessions.

Stakeholders define the reason behind the problem is due to limited product issue and lack of promotion. As more products continue to sell, it caused a decrease in supply and the brand had to cut back on promoting the products via social and email, thus causing a dive in visitors and sessions.

Key Takeaways from Data Analysis.

Their month of launch, December 2021, was their busiest
Product issue/Shortage of Supply = Less Promotion = Less Visitors
As of Jan 2023, the returning customer rate is 0% due to product issue 
The core problem is failing to retain returning customers and inviting new visitors 

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

Comparing the competition.

I wrapped up my research by lasting looking at competitor companies and products to analyze their strengths and weaknesses for potential market gaps. This served as the foundations of future ideation for features.

competitive analysis strengths and weaknesses

Key Findings from Secondary Research.

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 personas

Who are we doing this for?

My research findings brought me to generalize my user as the millennial online shopper.

PAIN POINTS - Overcomplicated navigation systems and unclear policies deters her from purchasing
VALUES - Convenience of shopping online with flexible shipping and return policies
MOTIVATIONS - Shopping for clothes through new brands IF the policies, price, and product information are justifiable

shelly the online shopper user persona

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.

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 7 participants (3M/4F). 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.

revere the brand new sitemap

I made the following changes to REVERE's original structure:

  1. Adding product categorization to create distinction once the brand introduces more products, including menswear.
  2. Relocating the "Our Mission" page to the Footer categories

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

revere the brand task flow

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

Sketching out the possibility.

Through Figma, I began digitally sketching the skeleton of the possible redesign of REVERE's key screens, and made them responsive for desktop and mobile.

With the early feedback I received on the sketches, I eliminated a Promotion pop-up module as it seemed distracting and ineffective in gathering email sign-ups. I decided to relocate it to the footer to be a fixed element.

mid fidelity wireframes with detailsmid fidelity wireframes with details

visual brand

A Modern Makeover.

REVERE's end goal of this redesign is to reimagine a brand new look for their store and create a gender-inclusive shopping space for their future launches. I plan on introducing a sense of modernism and simplicity by using a neutral color palette and a sans serif typeface for uniformity.

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

Testing functionality and aesthetics.

For my usability testing rounds, I asked 4 users to test my initial prototype on both desktop and mobile devices.

This helped me gain insight and feedback on the visual design, navigation fluidity, and flow of completing average shopping tasks such as finding products and adding to bag.

Usability Testing
Results & Iterations

100% of the users were able to complete the tasks without any confusion.

100% of the users were satisfied with the redesign, notably enjoying the design layout and aesthetics of a modern online store.

I received feedback on a few visual design choices, including:

  • The size and position of the category tags, 'Featured' and 'Trend'
  • The layout of the hero picture
  • The width of the ratings and reviews section

Here's how I iterated on this feedback:

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

Reflections

  • Analyzing real data: The data analytics played a huge factor in determining my direction for the redesign as it helped in identifying the core problem and how real users thought it could be resolved in the future.  
  • Responsive designing: Within the time limitations for this project, I pushed myself to quickly develop a design that is responsive for common devices - mobile and desktop view. I learned about sizing and layout positioning for design elements in order to look responsive of one another.
  • Next Steps: If I had more time, I would talk to more users of the target audience and gain insight on what they prefer in a unique and enjoyable online shopping experience. I'd also push for additional usability testing to gain further feedback on the responsiveness of the design.

Collaborating with a local business for this project pushed me to get comfortable in communicating with stakeholders and working to align their business goals with user goals. I hope I have delivered an acceptable redesign for their online store that could help with future launches and solve their core problem if they decide to actually rebrand their store with my design in the future.

Update: As of January 2024, the owners of REVERE THE BRAND had decided to temporarily close their online store to plan their next business steps. The online website currently cannot be viewed.

arrow up image for back to top scrolling