Designing an E-Commerce Platform within FINI
My Role
Product Designer
Timeframe
2 weeks
Team
Solo Designer
Overview
FINI Marketplace: Partnering with Brands to Sell Specific Products
FINI is a digital health platform that allows user to track progress towards physical and mental goals through a concept known as challenges. Users will participate in self made or community wide challenges with the primary goal of bettering their physical or mental health.
The FINI Shop is an initiative to promote two things:
1. Allowing FINI to partner with fitness and health brands to sell products that fit their audience
2. Giving fitness influencers a platform to sell their products
The FINI Shop is an initiative to promote two things:
1. Allowing FINI to partner with fitness and health brands to sell products that fit their audience
2. Giving fitness influencers a platform to sell their products
My Work: End to End Mobile Design
During this project, I worked with another product designer to define our design decisions and brainstorm on solutions to fit our goals. Our work was cross-functional by nature, to ensure that we were creating designs that were solving the problems of our users and addressing requirements by founders and engineers.
User Research: Gathering existing User Data and Personas to inform my decisions
Engineering: Showing low-fidelity designs and discussing feasibility
Founder / Head of Product: Seeking their continuous feedback and making variations and iterations to support their suggestions
User Research: Gathering existing User Data and Personas to inform my decisions
Engineering: Showing low-fidelity designs and discussing feasibility
Founder / Head of Product: Seeking their continuous feedback and making variations and iterations to support their suggestions
User Research
Understanding Our Target Personas
I conducted formal and informal user interviews to understand the personas we were trying to target. These personas boiled down to two types: fitness coaches/instructors that want be able to sell products and brands that were interested in associating with FINI. While designing, we kept the major goals and pain points of these brands in mind to design an ecommerce-flow that was as intuitive as possible
Janet Lemmings
Yoga Instructor
Janet is a yoga instructor who holds bi-weekly yoga classes at the beach. She conducts her yoga challenges and payments through FINI and aspires to start her own yoga clothing brand.
Goals
- Starting own yoga clothing brand
- Advertising clothing brands directly to her students and followers.
- Increasing her social media reach
- Advertising clothing brands directly to her students and followers.
- Increasing her social media reach
Pain Points
- Struggles to find a good platform to sell her clothing with reasonable fees
- Struggles to find product-market fit and targeting her specific demographic
- Struggles to find product-market fit and targeting her specific demographic
Aspen
Partnering Fitness Brand
Aspen is a brand of running shoes that aspires to help reduce foot pain while running. As a new business, they need a platform to sell their products and find their target demographic
Goals
- Finding influencers to advertise their products
- Finding ways to advertise directly to their demographic: Runners and Fitness
- Increasing their social media reach
- Finding ways to advertise directly to their demographic: Runners and Fitness
- Increasing their social media reach
Pain Points
- Struggles to find a good way to market to their current demographic
- Struggles to find influencers to market their products and consistently uses multiple different platforms.
- Struggles to find influencers to market their products and consistently uses multiple different platforms.
Design Process
Feature Scoping
Our main features/screens within this marketplace would be standard of e-commerce flows:
1. Marketplace Home Screen
- Discover Products
- Search + Filter for Products
- Access Brand Specific Pages
- Search + Filter for Products
- Access Brand Specific Pages
2. Item Details
- Product Description
- Product Price
- Ratings and Reviews
- Product Price
- Ratings and Reviews
3. Shopping Cart
- Add and delete items
- Cancel Order
- Cancel Order
4. Check Out and Payment
- Standard Forms
- Payment Screen
- Confirmation Screen
- Payment Screen
- Confirmation Screen
5. Reading and Writing Reviews
- Write a Review
- Review Tags
- Review Tags
6. Order History
- See past orders and current orders
- Cancel Orders
- Cancel Orders
Our primary challenge came in making sure that we were accounting for and designing an end to end experience that covered the extensive edge cases such as, but no limited:
1. Accounting for different payment methods
2. What happens when a certain color/size is out of stock?
3. Can a user edit their order? Cancel Order? All Post Order Actions that are available?
1. Accounting for different payment methods
2. What happens when a certain color/size is out of stock?
3. Can a user edit their order? Cancel Order? All Post Order Actions that are available?
CARD VARIATIONS
Finding Card Variations
I crafted diverse iterations of the e-commerce shopping cart, refining its design through a thoughtful iterative process. This involved careful consideration of user experience, interface elements, and feedback loops to ensure an optimal and user-friendly shopping journey.
Explanation for Review Rating Placement
Explanation: Reviews are the only information within the card that may be missing if there are not enough or no reviews to display a number rating. This card is meant to go on a horizontal carousel meaning that the card must stay the same size. Therefore we need to place the reviews in a place where it would not affect sizing if missing
SCREEN FLOWS
How Might We Visualize Progress Between Badges?
We crafted diverse iterations of the e-commerce shopping cart, refining its design through a thoughtful iterative process. Simultaneously, we conscientiously incorporated references to conventional e-commerce flows, drawing from established industry standards, while remaining attuned to the distinctive goals and pain points of our personas.
Discovering and Purchasing a Product
Order History and Cancelling an Order
Writing a Review
Using the Filters Button
HIGH FIDELITY CALL OUTS
Finalizing Designs
We thought carefully about the products for the marketplace, aiming to support various brands in our UI and screen flow design. Our focus was on creating a user-friendly experience that caters to different product types and brand preferences.
Partnering Brands for FINI
- We created specific sections where users could find specific brands from different products
- Top Banner would be given to Brands who pay for that ad space, generating additional revenue for FINI
- Top Banner would be given to Brands who pay for that ad space, generating additional revenue for FINI
Personalized Products
- (e.g.) users who were in fitness challenges would be recommended products that were categorized as “fitness”
- Products would be personalized based on what challenges the user was partaking in
- Products would be personalized based on what challenges the user was partaking in
Order Confirmation
- Provides necessary information that a user might want to edit
- Shopify Platform will secure credit card information
- Shopify Platform will secure credit card information
Order History + Cancellation
- Provides one place for users to view all orders
- Users can cancel their orders here
- Users can cancel their orders here
TAKEAWAYS
Balancing Business Goals with User Goals
Balancing user perspectives and a business-centric approach was key in designing the e-commerce flow, ensuring accessibility and appeal to a broader audience. We focused on strategies that not only drive more products to people but also prioritize a seamless user experience, aligning the design with both business goals and user needs.