Bunger Surf
E-commerce website redesign with an improved online shopping experience and refreshed visual design.
Client
Bunger Surf Shop
Role
UX Research, Visual Design, Prototyping, Product Design, Usability Testing
Timeline
4 Weeks
Team
UX Research report, Mifi Prototype, Hifi Prototype
Tools
Figma, Photoshop, Illustrator, Miro
Project Deliverables
UX Research report, Mifi Prototype, Hifi Prototype
Overview
Focused on E-commerce strategy while supporting a local business, our team partnered with Bunger Surf Shop in Babylon, New York, an iconic surf retailer seeking to rebound from the pandemic. Collaborating with like-minded peers, we aimed to revitalize their online presence and accelerate growth through targeted digital solutions.
Problem
The original website seemed outdated and unreliable, discouraging potential customers to shop due to doubts about its legitimacy and security.
This was damaging the store's ability to attract and retain online shoppers, which made it hard for the stakeholder to drive sales and expand.
Project Goals
To increase online sales and customer retention by creating a more engaging and trustworthy shopping environment.
To achieve this, we focused on improving the website's visual appeal and functionality to build customer confidence. In addition, we seek to enhance the user experience by encouraging visitors to search for products and make purchases effortlessly.
_edited_edited_edited.png)
Streamlining
Shopping Experience
I directly addressed the four pain points identified through usability testing.
The goal was to create a visually harmonious interface, establish coherence across interactions, provide comprehensive and relevant information, and streamline the shopping experience.
Optimized Navigation
Our revamped footer and navigation bar have simplified user navigation, ensuring easy access to all desired content.
With better organization and categorization, users can quickly find what they need, significantly improving their browsing experience.
Product Pages and Dynamic Filters
Now users can access a complete overview of the store's offerings, with detailed descriptions, images and specifications for each item.
We have also added filtering options, for users to refine their search based on criteria such as price range, brand, size, color and others. This will allow users to quickly locate products that match their specific preferences and needs.
Simplifying Checkout Decisions
The new order summary screen plays a crucial role in helping users confirm their selections and make informed decisions before proceeding to checkout.
Secure Checkout
To increase the sense of security throughout the shopping experience, we have streamlined the checkout process to include simplified input fields and integrated secure payment gateways.
This ensures users a secure and reliable transaction, reinforcing confidence in their shopping process.
Purchase Success
This screen serves as a final confirmation of the transaction, ensuring that users have successfully completed their purchase and can expect their items to be delivered as scheduled.
It also provides the user of the order number and order tracking link. In addition to this the user receives an automatic email with all the order details.
Results
The revamped site will prioritize information organization and visually captivating design, ensuring a seamless and streamlined shopping experience.
#1
Cut search time from
3.2 minutes to just 1
65%
reduction in time
Visual Design
We established a mood board and style guide, along with a vibrant color scheme that embodies the spirit of surfing. As our design evolved, we continued to refine our style guide, integrating fresh and colorful tones and fonts to create relaxed yet engaging vibe.
The resulting high-fidelity visual design is intentionally fun and clean, aiming to provide users with a pleasant and immersive experience.
Research Plan
We designed our research plan with the objective of understanding users' needs and their main weaknesses.
Existing Website Analysis
We met with the Stakeholder at the beginning of our research, as well as throughout the project to learn more about the existing experience and identified the following pain points:
-
Problems when optimizing search queries.
-
Poor browsing experience due to disorganized and diverse navigation bars.
-
Information overload without clear navigation guidance.
-
Current color palette is perceived as outdated.
Our team took on the responsibility of improving the navigation and website's appearance, with the objective of promoting spaying/neutering while also encouraging the participation of new volunteers and donors.
Understanding the User
Based on the results of our research, we developed a user persona that represents the potential users that the Bunger Surf Shop's website might have.
Ideation
Based on our persona's needs, our team came up with ideas to meet them and prioritized them based on their impact and feasibility.
Ultimately, taking into account the needs of our user, the main ideas that emerged from the ideation phase were the following:
-
Simplify Navigation
-
Improve Search Functionality
-
Enhance Branding Consistency
-
Streamline Product Presentation
-
Enhance Security and Trust
By implementing these, the Bunger Surf Shop can improve its UX/UI design, address user pain points, and create a more seamless and enjoyable shopping experience for its customers.
User Journey
With the user in mind, our team created the current and future user journey. The future journey will make sure to eliminate user pain points when searching for the required information and build user engagement.
Drag to see Future User Journey
Key Research Themes
We conducted 30 surveys and guided 10 semi-structured interviews from possible users of the Bunger Surf Shop website.
Based on the survey and interview findings, we identified the following user's pain points in using the existing website:
-
Confusing navigation due to overwhelming and disorganized product categorization, making difficult for users to find what they need.
-
Locating specific products is complicated, resulting in more time being wasted than anticipated.
-
The purpose of the site remains unclear to users on their first visit, adding to their frustration.
-
Fonts and color schemes vary from the company's branding, resulting in an outdated aesthetic.
-
Users perceive the shopping experience as insecure, and the final checkout process seems unsafe.
_edited.png)
Information Architecture
The new user flow simplifies and streamlines the experience for web users. The underlying conceptual model demonstrates good behavioral design; you only need to understand the process once to navigate through the various tabs smoothly.
User Flow
With the user in mind, our team created the ideal user flow focusing on the shopping experience specially. The future user flow will make sure to eliminate user pain points when searching for the required information and build user engagement.
Iterations
Due to the remote nature of the project, our team started the process with exploratory sketches in FigJam, which evolved into Lofi sketches. We then merged ideas to develop a Mifi prototype using Figma.
The process was dynamic and interactive. Following an initial approach, we presented it to stakeholders and incorporated their feedback to iteratively adjust and refine the design until achieving the final result.
User Testing
We conducted virtual usability tests on our mifi prototypes with
7 possible users of our website. The testing sessions allowed us to identify critical issues and also receive valuable feedback to inform our design. The main findings from the usability testing were:
-
Refine the navigation bar design to address issues of confusion and squished icons.
-
Include multiple product photos to offer users various angles.
-
Resize elements in the checkout process to prevent participants from needing to scroll to view their cart summary.
-
Expand filter options for better product browsing experience.
-
Add sale section and information about returns in more places than just the footer.
Home Page
_edited_edited.png)
Product Page
_edited.png)
Creckout Page
The Solution
After 1 month of virtual collaboration, the final solution is a collective effort that enables Bunger Surf customers to conclude purchases in a simple, pleasant, and secure way.
Our collaborative approach has resulted in an intuitive platform that prioritizes user experience, ensuring smooth navigation and a seamless checkout process. By focusing on simplicity and security, we've created an environment where customers can shop confidently, knowing their transactions are protected.
Goals
Returning to the project's original goal, the revamped Bunger Surf Shop website offers users a straightforward, secure, and visually appealing experience.
Our focus on enhancing the website's visual appeal and functionality inspires confidence in potential customers, while efforts to improve the user experience encourage effortless product searches and purchases.
Old vs. Optimized Home Page
Project Reflections
The original site felt outdated and untrustworthy, turning users away.
Its poor usability and dated design hurt customer retention and limited growth, making a strong case for a complete redesign.
Key Takeaways
-
User-Centric Approach: Prioritizing user needs has resulted in a personalized and immersive shopping experience for the surfing community.
-
Streamlined Navigation: Intuitive navigation simplifies browsing and checkout, reducing pain points and enhancing conversions.
-
Enhanced Visual Design: Vibrant imagery, cohesive branding, and intuitive layout boost Bunger’s online appeal, improving brand perception and customer engagement.
-
Continuous Improvement: Commitment to iterative design ensures the site evolves with user feedback, market trends, and technological advancements, maintaining long-term relevance and success.