Responsive Web Design
Funk Off Website
Project Overview
Project Type: Responsive Web Design Team: Independent project with feedback from mentor and peers
Tools: Figma, Optimal Sort, Miro, Zoom Role: UX/UI design, branding
Context:
Funk Off Outdoors, a local business specializing in activated charcoal cleaning products for outdoor enthusiasts, required a comprehensive website redesign. The existing site was divided into separate pages for product information and sales, causing user confusion and hindering the overall user experience.
Problem Identified:
The fragmented website structure made it difficult for users to navigate, find information, and complete purchases. Additionally, outdated information and inconsistent font choices detracted from the brand’s identity, leading to a disjointed user experience.
Research
Research Objectives
Identify the pain points and obstacles users encounter while navigating the site, including difficulties finding product information, understanding product benefits, and completing purchases.
Evaluate how clearly and efficiently product details are presented to shoppers. Identify areas where content is overwhelming or unclear, which may hinder user engagement. Insights will guide layout improvements, making it easier for users to understand product value and make informed purchase decisions.
Assess the flow from product selection to payment to pinpoint any steps where users encounter confusion or delays. Identify any friction points that cause users to abandon their carts, and determine ways to simplify and optimize the process for a smoother, faster checkout experience that encourages conversions.
Competitive Analysis
What’s this?
Assessing competitors' products to evaluate their UX and UI design. It helps identify strengths, weaknesses, and opportunities for improvement, guiding your own design by learning from what competitors do well or poorly.
The chart compares four different eco-friendly hand cleaning products: Funk Off, Sea to Summit Pocket Wash, Campsuds, and Summit Suds Powdered Soap. It highlights key aspects such as target market, pricing, strengths, and weaknesses. Funk Off stands out for its built-in scrub brush and use of activated charcoal, while competitors like Sea to Summit and Campsuds focus on portability and versatility. Summit Suds offers a powder format but may face issues with clumping in humid conditions.
Key Takeaways
Target Market: All products focus on outdoor enthusiasts, but Funk Off specifically targets a broader range of "outdoorsy humans" beyond just campers and backpackers.
Unique Strengths: Funk Off's built-in brush sets it apart from competitors, who prioritize lightweight and compact designs.
Pricing Variations: Funk Off is more expensive per unit compared to others, though it offers features like a scrub brush and activated charcoal.
Weaknesses: While Funk Off offers innovative features, it's limited by plastic construction, higher cost, and lack of availability in physical stores
User Interviews
I conducted interviews with five individuals to understand their purchasing behavior for outdoor cleaning products. The key factors influencing decisions included eco-friendliness, brand reputation, and customer reviews. Most participants rely heavily on online shopping, using detailed product descriptions, reviews, and how-to videos to make informed decisions. They also highlighted the importance of website usability, including clear navigation, thorough product information, and a smooth checkout process.
Key Takeaways
Eco-friendliness and Brand Reputation: All interviewees prioritize eco-friendly products and trust brands known for sustainability and quality.
Customer Reviews Matter: Reviews are a critical factor in purchasing decisions, helping users gauge product effectiveness.
Online Shopping Convenience: Most participants prefer shopping online for convenience but value in-store shopping for tactile experience.
Website Usability: Clear navigation, detailed descriptions, user-generated content, and an easy checkout process were identified as essential for a good e-commerce experience.
Improvements Desired: Better product filtering, comparison features, and user-generated content like photos and videos would enhance the shopping experience.
Personas
What’s this?
Personas are important because they provide a clear, human-centered understanding of target users, helping designers and developers create products that better meet user needs. Personas are developed through a combination of user interviews, research, and data analysis. By gathering insights from real users—such as their goals, challenges, behaviors, and preferences—designers can create fictional representations that reflect common user types.
How might we?
What’s this?
"How Might We" (HMW) statements are crafted from insights gathered during user interviews, research, and observations. By identifying key challenges or pain points, these insights are reframed into open-ended, solution-focused questions beginning with "How might we..." This approach helps to inspire innovative ideas by turning problems into opportunities for improvement and exploration.
How might we redesign Funk Off Outdoors’ website to create a cohesive and engaging user experience that emphasizes accessibility, clear and comprehensive product information, and seamless integration of product discovery and sales, while reinforcing the brand’s eco-friendly values?
Design and Prototype
Site Map
Planning the site map for the Funk Off Outdoors website involved streamlining the site's navigational structure to enhance the shopping experience. The significant change in the new site map was consolidating all product information, sales, and brand storytelling into one cohesive site. By organizing these elements in a simplified and logical way, the site map ensures that users can easily find what they need without navigating through multiple pages. This clear structure enhances user flow, improves access to product details, and simplifies the shopping experience. Site maps like this are crucial because they guide both users and designers through the layout, ensuring a smooth and organized user experience as the site evolves.
What’s this?
A user flow is a detailed diagram that outlines the complete journey a user takes to achieve a specific goal, including decision points and alternative paths. It visualizes various routes based on user actions and choices. Informed by user research, user flows help designers understand how users navigate the product, identifying any potential bottlenecks or friction points in the experience.
User Flows
What’s this?
A site map is a visual representation of a website or app's structure, outlining how pages or sections are organized and linked together to guide users through the content.
The user flows for the Funkoff website were designed to create a streamlined and intuitive shopping experience. Users can easily navigate from the homepage, where the product is prominently displayed, to sections like product details and reviews. The checkout process was simplified for efficiency, with clear and consistent visual elements such as call-to-action buttons and credit card information boxes. These flows ensure users can move smoothly from browsing to purchase without unnecessary friction.
Low- Fidelity Wireframes
For the Funk Off website, I developed low-fidelity wireframes to establish the basic structure and layout of key pages. These wireframes focused on simplifying the shopping experience by consolidating product pages and improving navigation flow. The design elements were kept minimal, allowing me to focus on the overall layout, user journey, and functionality before moving into higher-fidelity iterations. This phase helped visualize the primary navigation paths and ensure that the site's core functionality was intuitive and user-friendly.
What this?
Basic, rough sketches focusing on layout and structure without detail. Used early in the design process to explore ideas quickly.
High-Fidelity Wireframes
What’s this?
High-fidelity wireframes are detailed, interactive mockups that closely resemble the final product. These wireframes include finalized design elements, such as precise typography, color schemes, and imagery. They are used to showcase the app's visual identity and overall user experience. Based on user feedback from earlier stages, the design has been refined to improve usability, ensuring that navigation and functionality are intuitive and aligned with user needs.
For the Funk Off website, I created high-fidelity wireframes that closely resembled the final design, incorporating refined visual elements such as typography, color schemes, and imagery. These wireframes showcased detailed layouts for product pages, streamlined navigation, and interactive components like the cart sidebar. By using high-fidelity wireframes, I was able to test and fine-tune the user interface, ensuring a seamless shopping experience and maintaining brand consistency throughout the site. The final wireframes provided a clear representation of how the finished website would function and look.
What’s this?
User testing is a process where real users interact with a product or prototype to identify usability issues and gather feedback. It helps understand how users experience the product, ensuring it meets their needs and expectations. Feedback from user testing is analyzed and used to refine the design, addressing pain points and improving the overall user experience to better align the product with user needs.
UI Interactions
User Testing
The usability test results for the Funk Off site highlight several key insights. Users found the website easy to navigate, with a smooth shopping and checkout process, particularly enjoying the cart animation and pop-out feature. However, several improvements were suggested, including making the "Upload Pictures" button more intuitive for reviews, reducing text and adjusting fonts for better readability, and enhancing the product display through image galleries or carousels. Additionally, users recommended incorporating a video or animation to showcase the product's functionality and aligning the font style more closely with the brand’s identity.
Iterations
During the Funk Off website redesign, key updates improved both functionality and aesthetics. A review preview and "add a review" button made user feedback more accessible. Wordy sections were adjusted with smaller fonts for better readability, and checkout page colors were unified for consistency. Backgrounds and photos were redesigned to match the brand's fun vibe, while a prominent product image was added to clarify the offering.
Key Takeaways
What’s this?
Iteration is the process of repeatedly refining and improving a product, design, or solution based on feedback and testing. Each cycle of iteration involves making adjustments, testing the changes, and evaluating the results to move closer to an optimal outcome.
Enhanced Product Visibility: Adding a prominent product image in the top third of the page helped address user confusion about the product, making it clear and engaging from the start.
Improved Review Access: The addition of a review preview on the main page and a more intuitive "add a review" button enhanced user interaction and encouraged engagement with reviews.
Refined Aesthetic and Brand Alignment: Adjusting text-heavy areas to a smaller, more visually appealing font improved readability, while background and photo design changes infused more of the brand’s fun and funky personality.
Consistent Checkout Experience: Standardizing the color of credit card information boxes at checkout created a cleaner and more cohesive user experience.
Simplified Navigation: The iterative changes streamlined the overall user journey, making it easier to browse products, leave reviews, and complete purchases, while maintaining the brand’s playful identity.
