Simple Alternatives

UIUX Design Case Study - eCommerce Responsive Web App Project

About this app

Simple Alternatives is a tool and support for consumers looking for more sustainable products, don’t know where to start to get good quality eco-friendly products, or are confused about which “eco-friendly” are genuinely eco-friendly. Their motivations are all good. They want to do a good thing for our planet.

Problem

Trash float in the ocean

Only 5% of plastic is being recycled

We are in a massive plastic crisis right now.

Studies show after China banned most US plastic exports, only 5% of plastic is being recycled as of May 2022.

And the remaining goes to the landfill or the ocean. If the plastic goes to the sea, it eventually becomes microplastics that measure less than 5mm (or nano plastics smaller than 5mm). Fish or other aquatic animals think it’s food so that they can consume it. After all, we could end up eating the fish, for example. After I read the studies, that alerts me to do something as a consumer.

Do you want to eat fish that has been consuming plastics? I don’t.

Plastics are everywhere when you look around your household. In the bathroom, in the kitchen, in the office, in the living room, in your clothing. EVERYWHERE.

So how do we reduce buying or using plastics and become more sustainable?

Solution

Our goal is to have our clean, beautiful ocean back

Reduce the usage of plastic products but how?

Simple Alternatives can be a hub for the consumer like you who wants to look for eco-friendly products, but you are overwhelmed because there are a lot of products out there. Some are genuinely B Corp Certified companies. However, some are not, and some could be greenwashing. So we carefully hand pick only the high-quality, sustainable products for you.

Design Process

Competitive Analysis

I ran the competitive analysis on the Sustainable Shop, Earth Hero, Earthling Co., and Package Free. Each company has a clear concept, guidance, and user flow. My thoughts on the Pros and Cons are the followings:

Approach

“Reduce” Theme

As you may know, Sustainability stands based on 4Rs - “Recycle,” “Reduce,” “Reuse,” and “Rethink” (sometimes you find 5Rs depending on your beliefs). So what would be the closest and easiest thing to do to participate in a Sustainable Lifestyle? I think it’s recycling. So I created ReTHNK app concept, which lets you scan the item to seek the potential of recycling (please check my other project ReTHNK app, in my portfolio. 😊 )

Plastics are the third most significant contributor to solid waste. If we reduce plastic usage or don’t use it at all, we can contribute to less waste and low impact on the plastic crisis. So the concept of Simple Alternatives is based on the “Reduce” theme.

Key User Flow

One of my favorite UX processes - is to design User Flow. I carefully planned the flow to make it less complicated. When many things go on, the consumers can get frustrated and leave the website in a few seconds.

Key Task:

"As a customer, I want to place multiple items in a shopping cart to purchase more than one item at a time."

Lofi Wireframes v1

I created simple lofi wireframes based on the key user flow."As a customer, I want to place multiple items in a shopping cart to purchase more than one item at a time."

Lofi Wireframes v2

After I had user testings, I modified and added some elements in the lofi wireframes for better experience.

Midfi Wireframes

At the midfi wireframes stage, more details and steps are added to create a pleasant user experience. I also conducted user testing at this point to have an “earlier the better” approach. The feedback and improvements are below. So what you see here is already improved with the results AFTER the testing.

Feedback

POSITIVE 👍♥️

CONSTRUCTIVE 💡✨

Improvements

I received feedback from my peers and it always enlightens my creativity and blind spots that I missed looking into. I know how to turn constructive feedback into a gem. :)

UI Process - Mood Board

After I applied the changes with feedback and suggestions, I moved on to the UI Process. My goal was to have organic, natural, bold yet sophisticated in mind. I got inspired by those images below.

UI Process - Style Guide

Once the mood board is set, I chose these color palettes to aim at the organic atmosphere and the typefaces for sophistication yet strong to incorporate the concept of this app.

UI Process - Logo

One of my favorite UI Design processes.

My sketches of logo - whatever comes in my mind. by -Yuko Shiozaki

I sketched a lot of nature, such as the sun, tree, and ocean, and incorporated them into a symbol. My ideas went in many different directions initially. Many of them didn't feel "eco-friendly," according to my husband (especially the Pelikan with trash)...  However, I kept the simplicity in mind and tried some of the ideas digitally. Sure enough, the most simple idea came to click in my mind.

With the icon, I wanted to add the app's name so it would be more memorable. So I used and combined two different typefaces: Raleway and Moneta, to emphasize modernness and cleanness at the same time.

Hifi Wireframes

Home

Simple Alternatives Hifi Wireframe

Category Page

Simple Alternatives Hifi Wireframe

Product Page

Simple Alternatives Hifi Wireframe

Checkout Page

Simple Alternatives Hifi Wireframe

Shipping Info Page

Simple Alternatives Hifi Wireframe

Billing Info Page

Simple Alternatives Hifi Wireframe

Thank You Page

Simple Alternatives Hifi Wireframe

Mockups

Mobile Version

Simple Alternatives Mockup  Mobile Version

Desktop Version

Simple Alternatives Mockup Desktop Version

Challenges

I encountered a lot of eCommerce app design challenges as well as marketing perspectives and challenges. When they get free shipping, coupon code, email address, or creating account leads, how do we make the consumers shop with more empathy? Do we show the coupon code until the end so they can use it? Or do we hide it at the end when they can fill out the code so we can save the 15% or 25% we are offering as a coupon code as a company?

Like everyone else, I do online shopping from time to time, and those processes are something that I am very familiar with as a customer. However, I’ve never thought about how to show those good deals on the website for consumers until now.

I overcame those questions and challenges was to asking my mentor and peers in the UIUX community for their feedback, user testings, and researching online. They gave me great insights and let me think about the UX approach with empathy.

Takeaways

Creating an online shopping web app was an excellent experience. I was able to think and design with the mind of marketing, user experience, and empathy. Do I make design decisions based on the business profits or the consumers' happy experiences? I understand this depends on the company's and its stakeholders' decisions. However, I would choose the consumers' satisfying experience that will bring great reviews and ratings, and the happy consumers can get more consumers (their friends and family). - Some of you are probably rolling your eyes and thinking, "dream on," but I genuinely believe in the positive experience.

Thank You for reading this far!