Overview
Social Good eCommerce Website
Project Brief
Create an e-commerce mobile app/website. Develop your navigational skills, pushing users down the sales funnel, and flex your forms best practices skills for checkout.
The Outcome
Mobile First Website
Timeframe
Two weeks
Team and Roles
UX/UI Design and Branding:
Meade Peers McCoy, Thais Quintana, and Carolina Munoz
Tools Used
Adobe XD, Overflow, Keynote, Google Forms, and Scan Genus.
Note:
Patria was an academic project completed during my UX Design Intensive in 2019; rebuilding my portfolio now in 2023, I had to stop myself from redoing the design work multiple times. My more experienced eye for color, spacing, and typography sees all the mistakes and design decisions I would make differently today. Still, I have chosen to leave my old work as I find it, a time capsule of the beginning of a Product Design career.
Problem Space
Problem Statement:
A rapidly changing and expanding world is either leaving indigenous populations behind economically or forcing them to abandon their traditional lifestyle and arts and craft practices to survive in the modern economy.
How Might We
HMW provide a marketplace for indigenous artisans to sell their goods for a fair price to help support their communities and protect ancient crafting methods?
Framework
Desk Research
"While 66 percent of global consumers are willing to pay more for sustainable goods, a full 73 percent of Millennials are (Nielsen defines Millennials as those born from 1977 to 1995)."
"In 2015, brands that showed a commitment to sustainability saw sales grow more than 4% globally. Those that had no such commitment grew less than 1%."
Learn
Survey Results
Competitive Audit
The good
- Movement
- Clear branding
- Consistent colors
- Floating menu and cart
The bad
- What's the name of the company?
- Is this delivery?
The good
- Bold, clear links
- Full-screen takeover removes distractions focusing the user on the options
The bad
- Centered text, negatively impacting reading comprehension
The good
- The feel of the site reflects the design of the product. Light and Airy.
The bad
- Words and cart are hard to see on top of images.
The good
- Whimsical
- Visual with a tactile feel
The bad
- Centered text, negatively impacting reading comprehension
The good
- A clear pathway to shop
- A clear indication of different product categories
The bad
- Text on top of images is not accessible.
The good
- Simple and clear
- Promenade link to cart
- The style and feel of the site maintained
The bad
- Arrow on the left side, pointing to the right meaning and use, is unclear.
Guerrilla Testing of Competitor's Sites
User Interviews (in context using competitors' products)
Questions Asked
- Do you shop online?
- Now scroll through the home page and tell me you're thoughts about it.
- What stands out to you about this site? Color clean design
- What feels different about it from the sites you normally shop on?
- Now can you go through the steps of purchasing a product (ask why they clicked where they did)?
- On the product page: How do you feel about the navigation?
- Now that you have added your first product to the cart, can you tell me what your thoughts were about the process and where you are now on the site?
- What didn't work for you about this site?
- What did work
Testing Results
- 2/3 loved the images
- 2/3 felt the site had clear navigation
- 2/3 understood that sales of the products benefited a Native American tribe
- 2/3 liked the inclusion of PayPal as a payment option
- 1/3 I Felt that the location of the PayPal button was confusing
- 2/3 liked that "sale" was listed in the global nav
Define
Persona
Site Map
Heuristics
Education
Educating the user about the products, the process, and the company.
Personality
The personality of the site reflects the products sold and the values of the organization. The interaction feels intuitive and personal, with questions asked and answered.
Problem-solving
Providing income for indigenous populations, a means of selling their handcrafted artisan materials to a wide audience with fair pay for goods.
Checkout
A clean, simple checkout process designed for users with low tech literacy.
Design
Sketches
Home Screen
Mid-Fidelity Wire Flow
Mood Board
When we were ready to move from mid to high fidelity, we started by putting together a mood board to set the look and feel of our UI and decide on a color palette for the app.
We chose to go with a palette of natural colors to invoke feelings of calm and remind shoppers of the mission of the e-commerce company to support indigenous communities.
Iterate
High Fidelity Wireframes
Version 1
Version 2
Version 3
Order Confirmation
High-Fidelity Prototype
Experiment
User Testing
Testing Script
- Can you scroll through this site and let me know what your initial thoughts are?
- Can you go through the process of selecting and purchasing a product?
- What are your thoughts about the product pages?
- What are your thoughts about the navigation on this site?
- How do you feel about the checkout process?
- Do you have any final thoughts you would like to share?
User Testing Results
6 Testing Participants
6/6 Users reacted VERY positively to the hero image and the feel of the design
6/6 Missed the text on the hero explaining the meaning of the site name
4/6 Liked the map
6/6 Wanted the icons to be clickable
4/5 LOVED the order confirmation page
3/6 Liked having the PayPal option
Hand Off
Shop with a Purpose
Patria is Latin for Native Homeland
We chose this name to honor the idea that all of our homelands and native cultures should be celebrated and preserved.
Patria is a company founded on the belief that preserving the handcrafts of indigenous cultures and the methods the artisan's use is best accomplished by purchasing the crafts directly from the artisans for a fair price and committing to investing 50% of all profits made by Patria into the artisan's local community.