herimage
SUMMARY

User Experience design & Branding

Reusable shopping bags are becoming more and more popular, but people are wanting bags that are durable and help the environment. Friendly Totes is an e-commerce website focused on selling sturdy, collapsible totes that not only help the environment, but also support the special needs community. When someone purchases a Friendly Tote, they are not only being friendly to the environment, but also the special needs community all around the world.

Design Role

  • UX Research
  • Visual Design
  • Branding & Identity

Deliverables

  • User Surveys
  • Personas
  • User Stories
  • User Flows
  • SWOT Analysis
  • Paper Prototype
  • Wireframes
  • User Testing
  • Visual Design

Tool

  • Figma
OVERVIEW

PROCESS

  1. Phase 1. Research and Testing
  2. Phase 2. Branding
  3. Phase 3. Testing
  4. Phase 4. Conclusion

PROBLEMS

  1. 1. Shopping totes are normally flimsy and can't carry a lot of items. Friendly Totes wanted their shopping bags to be sturdy and collapsible while also providing a way for the customer to carry numerous items with ease.
  2. 2. Most shopping totes only help the environment because the customers are using reusable bags instead of plastic bags. Friendly Totes wanted to make sure they were also supporting the environment by using 100% sustainable materials when they made the bags.
  3. 3. There are a lot of shopping totes that one can purchase at the grocery store but Friendly Totes stands out because it is founded by a family who is passionate about supporting the special needs community.

SOLUTIONS

  1. 1. Use images throughout the website that show how the bags are strong, sturdy, and can expand to carry numerous items.
  2. 2. The best way for someone to know that the totes are helping the environement is by seeing it right when they open the page. By adding the rotating bar that says "Friendly to: The Special Needs Community and The Environment", the user automatically knows the totes support the environment. There is also information about how the bags are made from sustainable materials on the "Our Story" section of the website.
  3. 3. Make it clear on the website that Friendly Totes supports the special needs community by displaying it in the rotating bar on the homepage, using images of the family members that founded the company, Friendly Totes, and have an about section that gives the vision behind the company and why this family is passionate about supporting the special needs community.
PHASE 1: RESEARCH & TESTING

PHASE 1: OVERVIEW

  1. 1. Assumptions
  2. 2. User Research
  3. 3. User Personas
  4. 4. Competitive Analysis
  5. 5. User Stories and User Flows
  6. 6. Content Strategy & Wireframes
  7. 7. Wireframe Usability Testing

ASSUMPTIONS: CUSTOMERS

  1. 1. People who want to buy a product to support a cause (special needs community or the environment).
  2. 2. People who purchase the product because it is a great shopping tote at an excellent price and perceive the causes the company supports as a bonus.

The assumption is that most people fall into the second category. They want to buy a durable, reusable shopping tote at a great price, but appreicate what the company stands for and are happy to support the causes as long as the product is excellent.

USER RESEARCH

68%

Users would buy the product because it's functional.

73%

Users would buy a product if it helped the environment.

54%

Used reusable bags when shopping.

80%

Users who used store bags chose to use them for convenience.

70%

Users would switch to reusable bags if they knew the impact it had on the environment.

80%

Users would purchase reusable bags online.

58%

User purchased their bags from stores.

58%

Users liked their bags because they were sturdy.

58%

Would purchase a tote that's light grey.

USER PERSONAS

I created two target audiences in my personas represented by a millennial working woman who cared about protecting the environment and a middle aged working woman who wanted a sturdy tote that could hold lots of items and didn't take up a lot of room in her car.

persona image

NATASHA SMITH

25 year old project manager living in Stockholm, Sweden.

GOALS

Make sure the tote is helping people who are in need of support and have a bag that’s 100% sustainable/biodegradable.

NEEDS

I don’t have a large living space so I need to be able to use the totes for school and shopping. The bags need to be able to carry a lot of items and be comfortable to hold.

FRUSTRATIONS

Most of the bags are plain and don’t have fun designs or colors. Reusable Bags are flimsy and are normally uncomfortable to carry long distances.

persona image

WENDY JOHNSON

38 year old teacher, mother of three, living in San Francisco, CA.

GOALS

Live a more sustainable life by lowering plastic usage and using reusable bags. I need a way to transport my teaching supplies and go on trips with my family without a flimsy bag breaking.

NEEDS

The reusable bags need to be sturdy and have firm walls, but also collapsable. Also, The bags need to be machine washable.

FRUSTRATIONS

Most reusable bag options don’t stand up or provide protection if you have fragile items inside them. Most bags are too flimsy and break when I try to put all of my supplies in them.

SWOT ANALYSIS

The goal with Friendly Totes was to make a shopping tote site that differentiated itself from its competitors. I performed an in-depth competitive analysis of the most popular tote sites which included, BagPodz, Baggu, and Colony Co. Reusable Grocery Bag.

STRENGTHS

  1. 1. BagPodz Strengths: comes with 10 bags and a storage pouch, water-resistant, machine washable, clip that attaches to a shopping car, 4.8-star Amazon customer rating based on 605 reviews, durable - strong ripstop nylon, and high weight capacity.
  2. 2. Baggu Strengths: reusable shopping bag that could double as a regular bag, interior zipper pocket, two sets of straps — top handles and shoulder straps, machine washable, and durable
  3. 3. Colony Co. Reusable Grocery Bag: Stylish, Functional, Strain resistant, Easy to clean, Vegan, Sustainable, Well-made (stitching), Carries large amount, Durable, Long-lasting, and stands up on its own, making it easy to load

WEAKNESSES

  1. 1. BagPodz Weaknesses: Lacking in diverse design patterns, some have said they wish the bags were bigger, and does not stand on its own
  2. 2. Baggu Weaknesses: The size makes it better for smaller runs and not good for a big shopping trip. It needs to be hung to dry so it doesn’t fade. There's a lack of interior padding making it difficult to carry fragile items like eggs, bread, or glass. They are expensive, do not stand on their own and no organization or padding.
  3. 3. Colony Co. Reusable Grocery Bag Weaknesses: Expensive only has top straps, not machine washable

USER STORIES & USER FLOWS

The survey’s results lead to creating user stories which highlighted five main features of the product. These features were converted to user flow tasks, which would later be tested by users.

  1. Tasks Included:
  2. 1. Logging In & Signing Up
  3. 2. Checking Out
  4. 3. Viewing the "Our Story" Section.
  5. 4. Removing an item from the cart.
  6. 5. Finding the prices of the totes.
user flow images user flow images

WIREFRAMES

low-fidelity wireframe images

low-fidelity wireframe images

low-fidelity wireframe images
PHASE 2: BRANDING

PHASE 2 OVERVIEW: BRANDING

  1. 1. Branding Strategy
  2. 2. Color Palette
  3. 3. Typography
  4. 4. Logo Design

BRANDING STRATEGY

The target audience is females, ages 21-45 in the upper, middle class living in urban centers and suburbia. Therefore, the colors and typography are focused on representing this group of people.

STYLE GUIDE

logo sketches
PHASE 3: TESTING

USABILITY TESTING

I performed three usability tests on the design.

Corrections that needed to be made included:

  1. 1. Making the images for the totes clickable so a customer could click on the image to get a close look at the product.
  2. 2. Creating a "sign in as a guest" option for the checkout process so customers didn't feel obligated to sign up for an account to purchase something.
  3. 3. Fixing typos throughout the site.
  4. I made the changes in mockups to reflect the feedback given.

HIGH FIDELITY MOCKUPS

High Fidelity Mockups
PHASE 4: CONCLUSION
CONCLUSION

The project began with three problems that needed to be solved. These problems included: (1) Shopping totes were flimsy and couldn't carry a lot of items. (2) Most shopping totes were only helping the environment because the customers were using reusable bags instead of plastic bags. However, Friendly Totes wanted to stand out by using sustainable materials. (3) There were a lot of totes for sale but they didn't support a cause.

The solutions to these problems were: (1) Using images throughout the website that showed how the bags were strong, sturdy, and expandable. (2) Show customers that the totes were not only helping people use less plastic but that the product was biodegradable and the materials were sustainable. (3) Make it obvious that Friendly totes supports a cause by placing it on the homepage and "Our Story" section.

There were a couple vital takeaways from the project, which included:

  1. (1) Customers want a product that helps improve their lives and usually focus on finding a great product first. Then, looking to see if it supports a cause or helps the environment. (2) E-commerce sites need to be extremely clickable. Customers want the easiest possible way to be able to glance at something to checkout. Removing extra steps from this process makes the customer happy and wanting to come back for more.