Bubble Wrapp Redesign

Client: Bubble Wrapp | Duration: 2 weeks | Solo Project UX/UI

Bubble Wrapp is a retail store that specializes in Japanese and Korean collectibles, including popular brands such as Soony Angels, Sanrio, and Skull Panda. For my UX project aimed at enhancing the Bubble Wrapp experience, I started by capturing my initial impressions and conducted thorough research in key areas: Accessibility, Organization, Navigation, and Aesthetics.

Project Scope

Business Objective:
Enhance the organization and navigation of the Bubble Wrapp website to improve the overall digital shopping experience and facilitate smoother purchasing processes.

Research Objective:
Investigate how users interact with the current website from entry to checkout and understand how the e-commerce experience influences their buying decisions.

Approach:
To address the Scope of Work (SOW) and Research Goals, I implemented a multi-faceted approach to gain a comprehensive understanding of user interactions and expectations.

Usability Test

Test with target, secondary, and tertiary audiences to assess the broader user experience and identify pain points in the e-commerce process

Card Sorting

Preformed card sorting with four categories and 29 cards to inform information architecture (IA) for both global and local navigation.

Survey

Collection of quantitative data on users' needs and preferences for business offering similar products.

C&C Analysis

Comparative grid and SWOT analysis of direct competitors and comparators to benchmark and identify opportunities for improvement.

Research

I conducted an in-depth user interview using concurrent think-aloud methodology to gain insights into users' immediate cognitive processes and identify usability issues or areas for improvement. Additionally, I administered a survey to understand what users consider most important in the e-commerce experience.

Participants reported the layout and information as cluttered, with notable issues in text and image alignment, and expressed dissatisfaction with visual spacing and proximity.

Users often relied on the search bar because they found the vertical global navigation to be "irregular[ly]" placed and lacking in hierarchical structure. Survey results further underscore this issue, with 77% of users highlighting the importance of ease of navigation and 55% indicating that a website's first impression significantly impacts their purchase decision.

Although users appreciated the dark background, they experienced difficulties with text readability. Many found the font and color choice suboptimal and "abrasive" against the dark theme. Additionally, font and colors were not in compliance with ADA regulations.

Information Architecture

Although users valued many aspects of the brand identity, the structure of information emerged as a priority. To address this, i audited the extensive range of products and used Optimal Workshop to conduct a closed card sort with four categories and 29 cards. The result from six target users led to the development of a consensus-driven information architecture.

Persona

Amy, 28

Single

Full-Time

" I am passionate about collecting Sonny Angels and love adding new pieces to my collection. Since they're hard to find in stores, I shop online for new releases and limited editions. I prioritize easy browsing, accurate details, and quick checkouts.

Goals

adding to collection
community building
finding new series

Behaviors

shop in-store & online
shop online for series she can't find in-store
collects blind boxes

Needs

easy navigation
information accuracy
convenient shopping
quick checkout

Pain Point

difficult site navigation
difficult shopping/ browsing
inaccurate information

Problem Statement:

Shoppers find it difficult to find what they need because of the disorganized layout and hard-to-read text

How Might We:

keep the branding integrity, while giving users the functionality and organization they desire?

Design Improvements

re-locate global navigation to meet user expectations on design conventions.

eliminate image and text misalignment with appropriate spacing and proximity.

leverage c&c analysis and card sorting to improve user familiarity.

maintain the dark theme that users appreciate and aligns with the business. Enhance color use and font choices to improve readability and accessibility.

Wireframe

Mid-Fidelity Usability Test

*Usability test goals: 1 misclick | 1 Error | 4/4 task success | 2 duration to complete | 4/5 Usability Rating

Results

Avg Misclicks: 2
Avg Error: 1
Avg Time: 2.8 minutes
Avg Task Success: 4/4
Avg User Usability Rating: 3 /5

Design Iterations:

Simplify breadcrumbs to address user confusion.
Update the button text from "Add to Basket" to dynamically change to "Checkout" based on user flow.
Create indire success path from global navigation

Hi-Fidelity Screens

I tested the final prototype with three participants, who provided overwhelmingly positive feedback. They described the navigation as "straightforward" and "intuitive". Additionally, the layout and IA were praised for being organized and easy to digest.

The improved Bubble Wrapp e-commerce experience retains the brand's signature teal (#66FAFF) and fuchsia (#FC0795) colors, thoughtfully applying them in strokes, icons, and buttons. A softer dark theme (#212121) was introduced to create a more comfortable visual experience, with white used strategically to enhance contrast. I also designed components to minimize visual clutter and reduce cognitive overload in key areas.

The outcome is a reimagined Bubble Wrapp website that elevates the user's e-commerce experience through better organization and a simplified visual interface, all while preserving the brand's identity.

Reflection

I often refer to this project as 'The Project of Many Firsts.' Initially designed to revamp an existing website with basic components like dynamic buttons, I decided to push my limits by incorporating advanced features such as scrolling text, dropdown navigation, and a carousel. Balancing an 8-hour instructional day, with learning to build advanced components and project deadlines required meticulous planning, a skill honed from my background in enterprise sales. This project highlighted areas of improvement while boosting my confidence, preparing me to contribute effectively to my first upcoming group project.