UI/UX Design
Case Study
GearSwap Ecommerce
Mobile App
Project Overview
For outdoor enthusiasts, finding the perfect gear is crucial to their passion. However, the process of trial and error often results in a closet full of lightly used equipment that goes unused, or worse, ends up in a landfill. Despite the availability of exchange and return policies, many enthusiasts are left with a dilemma: how to responsibly dispose of gear that no longer serves them.
This project aims to tackle this challenge by designing a platform where outdoor enthusiasts can buy and sell gently worn gear. By connecting buyers and sellers within the outdoor community, we can provide a sustainable solution to the cycle of buy, try, and discard. Buyers can save money on quality gear, sellers can recoup some of their investment, and together, they contribute to reducing waste and promoting sustainability.
GearSwap's proposed e-commerce platform offers outdoor enthusiasts a win-win solution that not only fulfills their gear needs but also aligns with their values of conservation and responsible consumption.
Problem
Outdoor gear is not only expensive but also highly personalized, often leading to unused equipment accumulating in the garages and closets of outdoor enthusiasts.
Goal
Provide a sustainable and environmentally conscious solution to this problem by enabling outdoor enthusiasts to buy, sell, and trade quality lightly used gear.
Solution
Design a platform for outdoor enthusiasts that fosters peer-to-peer transactions with negotiation and real-time chat features to facilitate seamless transactions between buyers and sellers.
Competitive Analysis
Before designing the GearSwap user interface, I conducted preliminary market research to survey the competitive landscape and gain a comprehensive understanding of the target demographic. Drawing from personal experience and conversations with fellow outdoor enthusiasts, I compiled the following list of websites and applications to use as the foundation of my research.
Ebay is a popular platform and mobile app for buying and selling various items, including used outdoor gear. It is well-established and trusted, offering advanced e-commerce features like buyer-seller communication and price negotiations. Transactions on Ebay are peer-to-peer.
SidelineSwap is a platform and mobile app where users can sell their used, returned, and repaired athletic equipment. It operates similarly to Ebay, offering advanced e-commerce features such as buyer-seller communication and price negotiations. Transactions on SidelineSwap are peer-to-peer.
Rerouted is a website where people can sell their used outdoor gear. The platform manages sales and customer service, while sellers are responsible for shipping. Peer-to-peer communications and transactions are not permitted on the platform.
Geartrade is a website that consigns used, returned, and repaired outdoor gear. Perhaps the best known platform specifically catering to the outdoor community. It offers full service order fulfillment, from listing and sales of items to shipping and returns. Peer-to-peer communications and transactions are not permitted on the platform.
Outdoors Geek is a family-owned business in Denver, Colorado that offers rental and sale of outdoor gear to customers across the country. The company sells both new and used gear, with all used items previously being part of their rental inventory. Peer-to-peer communications and transactions are not permitted on the platform.
Patagonia Worn Wear exclusively accepts for trade-in and sells used Patagonia brand gear for credit towards future Patagonia purchases. Peer-to-peer communications and transactions are not permitted on the platform.
REI Co-op offers discounted prices on used gear and returns through their Re/Supply used gear and trade-in site. Users can trade in lightly used gear for an REI Gift Card, but the items must have been purchased or available for purchase at REI. Peer-to-peer communications and transactions are not permitted on the platform.
Summary of Findings
Out of the competitors I reviewed, only Ebay and Sidelineswap offer a mobile alternative for users who want to sell their used gear. Additionally, they are currently the only platforms that allow buyers to make offers on items, as well as facilitate peer-to-peer communication between the buyer and seller.
While the other companies all specialize in outdoor gear, both Ebay and Sidelineswap serve a larger audience. Sidelineswap concentrates on sports equipment in general while Ebay offers an extensive range of products outside of sports and outdoors gear. This creates a void between the larger companies that facilitate peer-to-peer transactions but do not specialize in outdoor gear and those who specialize in outdoor gear but do not provide peer-to-peer transactions.
Definition and Planning
Having identified a gap in the market for pre-owned outdoor gear, I started working to define and plan the app in more detail. A series of tools were used to help define the target audience, their motivations, and how they would interact with it.
Personas
Based on the findings of my competitive analysis and the user stories, I created a persona for two types of users, Emily and Jake (pictured left), who are likely to use an app such as GearSwap that allows for the exchange of used outdoor gear.
User Journey Maps
Journey Maps were created to further empathize with the Personas and to gain a deeper understanding of their motivations and expectations. Journey Maps help to personalize the user experience by highlighting potential friction points within the user's journey. Identifying these issues early will prevent issues with the design from popping up later when they are more costly to address.
User Flows
To get a more comprehensive view of how a user might interact with the app, I created User Flow diagrams based on the individual goals of each persona. Each User Flow outlines a path, or series of tasks, that a user might follow to accomplish his or her goals. The diagrams allow for the visualization of various decision points and system interactions that may arise during their journey.
Mood Board
As I worked through the planning process, I started gathering images of apps with features that inspired me and organizing them into a mood board. I have found that mood boards are an effective visual tool for organizing and communicating ideas before spending too much time on the actual design work.
Information Architecture
Feature Prioritization
By this time, the core features required to help users accomplish their goals within the app have become clear. This list was refined over time by removing any feature that was not essential to the app’s functionality.
User Registration and Authentication: Users should be able to create accounts, log in securely, and manage their profiles. This feature is essential for facilitating transactions, communication, and trust-building within the community.
Messaging and Communication: Messaging functionality that allows users to communicate with each other to negotiate prices, arrange rental terms, and ask questions about listings facilitates interaction and transactional communication between buyers and sellers.
Listing Creation: Sellers should be able to easily create listings for their outdoor gear, including photos, descriptions, and rental availability. This feature enables the core functionality of the app – facilitating the buying, selling, and trading of outdoor gear.
Secure Payment Processing: Implementing secure payment processing is crucial for facilitating transactions within the app. Users should be able to make payments securely using credit/debit cards, digital wallets, or other payment methods supported by the platform.
Search and Filtering: Users should be able to search for gear based on criteria such as activity type, location, brand, and availability. Advanced filtering options enhance the user experience and help users find relevant listings quickly.
Rating and Review System: A rating and review system allows users to provide feedback on their transactions and experiences with other users. This feature builds trust and transparency within the community and helps users make informed decisions.
User Touchpoints
Having identified all of the essential features, I created a list of user touchpoints that served as a road map for the design of the app’s user interface. Each touchpoint represents a screen, or series of screens, that a user might encounter (or touch) during the course of their journey using the app.
Registration/Login: Creating a new account or logging into an existing account is the first touchpoint for users to access the app.
New User Onboarding: Onboarding screens that introduce new users to GearSwap's features to help them get the most out of the app.
Browsing Listings: Users can browse listings of outdoor gear that is available for sale.
Searching and Filtering: Users can search for specific gear items or filter listings by criteria such as category, brand, size, type, etc.
Viewing Listing Details: Users can view detailed information about each listing, including photos, descriptions, and pricing.
Add to Wishlist: Users can add listings to their wishlist so that it is easy to find again later on or receive notifications if the listing is updated.
Messaging Other Users: Users can communicate with each other via messaging to negotiate prices or ask questions about listings.
Making a Purchase: Buyers can proceed to make a purchase directly within the app, using secure payment processing methods.
Receiving Notifications: Users receive notifications for various actions, such as new messages, offers, purchases, or updates on listings they've wishlisted.
Rating and Reviewing Transactions: After completing a transaction, users can leave ratings and reviews for each other to provide feedback on their experience.
Managing Profile: Users can manage their profile information, including updating contact details, preferences, and payment methods.
Creating a Listing: Sellers can create new listings for their outdoor gear by uploading photos, adding descriptions, setting prices, and selecting shipping methods.
Managing Listings: Sellers can manage their listings, including editing, updating, or removing them as needed.
Reporting Issues/Disputes: Users can report any issues or disputes related to transactions, listings, or interactions with other users for resolution.
Logging Out: Users can log out of their accounts when they're done using the app.
User Interface Design
Wireframing
The next stage of design involved laying out the user interface for each of the previously identified screens. To accomplish this, I chose to work with medium fidelity wireframes, which allow me to focus on the layout of the app’s UI without getting caught up in details like colors and imagery.
Prototyping
With wireframe layouts in place for each of the primary screens, I chose to develop a low-fidelity prototype using Figma that focuses on essential interactions. My goal with this prototype was to create a basic model of the messaging and negotiation feature that could be presented to users for quick feedback on interaction touchpoints and the general flow of the system.
Visual Design
At this point in the project, I have developed a strong understanding of how the app should look and feel to the user. The underlying structure of the user interface has been defined in detail, including the general size and spacing of various elements such as buttons, icons, and form fields. Visual Design involves deciding how the final product will look and laying out essential components and screens in pixel-perfect form.
Logo and Wordmark
I used a basic geometric shape with knockout lettering for the logo to give it a crisp, modern look. It's simplicity makes it extremely versatile and well-suited for use as an app icon.
Color Palette
Sticking with the theme of simplicity, the color palette has a soft, earthy feel with a forest green primary color set against a muted gray back drop with firebrick red and peppermint highlights.
Typography
To ensure consistency within the UI, Roboto serves as primary font face of choice with sizes ranging from 12pt to 24pt and weights including regular and medium.