top of page

Shop, Share & Shine

Shop & Give back to society app

Overview

Shop, Shine & Share is a platform for users who would like to shop, and with every purchase they make, a small amount is contributed to a social cause of their choice. 

The Goal

Design a mobile app for Shop, Shine & Share company where users can combine their clothing purchasing experience with the opportunity to contribute to a social cause of their choice. The purpose is to allow the user to choose a social cause towards which they want their contribution to go. 

Role

UX Designer 

Project Software

Adobe XD

Project View

Mobile Version

S

HOP
HARE
HINE

The Process

Design-Thinking-Graphic-5-Stages-1.png
Empathize

Empathize

Understanding the user

Shop, Share & Shine concept is different from others because it comes with an opportunity to support the local society with different projects through different purchases. Most interview participants responded that they were happy to purchase clothing to help a cause. At the same time, a few of the participants also mentioned that they can support society in different ways or by themselves. However, the feedback through the research made it very clear that users are at least willing to work towards purchasing for a cause, to give back to society.

User Research: Pain Points

 1

Texts & Fonts

Using an app can cause the texts to be a little hard to read with overflowing texts.

2

Shipping Method

Users would like an option of shipping methods.

3

Homepage

On the homepage to not confuse the users it's best to showcase what is available and what the app is about.

Sitemap

While working on the responsive website, I used the site map to help me organize a structure to ensure consistency across the devices.

SSS-sitemap.JPG
Define

Define

Ideate

Ideate

Ideation

I did a quick ideation exercise to come up with ideas for how the app would look like.

20210811_104644_2.jpg

Usability Study: Findings

I conducted a usability study. The findings are a guide through the mockup designs and to make adjustments according to what the users need.

Finding

1

People want easy access flow through the app especially to see where the contribution is going.

Finding

People had some difficulty at first navigating through the app and locate for charities.

Finding

People preferred clear indications of which charity is their money going to and what is the charity about.

Prototype

Digital Wireframes

After the interviews with participants, I decided to change my initial design to a final one. 

SSS-LF.JPG
SSS 2.JPG

1st Attempt

2nd Attempt

After the feedback from the participants, I decided to change the look of the front page.

This makes it easier to navigate through the page and user-friendly.

Prototype

Test

Test

Low Fidelity Screen Flow

I created a Low-Fidelity prototype that connects the entire flow of the app. This also shows what users are purchasing and which charity they are supporting when purchasing the item.

SSS- LF prototype (1)_edited.png

Low Fidelity Prototype

Mockups

Homepage

After receiving some feedback from my usability study on my 1st attempt, I decided to apply the changes that needed to be made on the homepage and added some text for users to understand the app better.

Before

SSS-LF.JPG
SSS 2.JPG

After

SSS-Home page.jpg
Checkout page

The slight change I made is the yellow highlighted box. That is for users to click and view the charity their contribution is going to.

Before

SSS-CHECKOUT 1.JPG

After

SSS-checkout 2.JPG

High Fidelity Screen Flow

The high-fidelity prototype follows the same user flow as the low-fidelity prototype. This is including the changes made after the usability studies.

SSS-High Fidelity prototype (1)_edited.png

High Fidelity Prototype

Responsive Designs

The responsive designs are for the mobile version and Desktop version.

Mobile Version

SSS-Home page.jpg

Desktop Version

SSS-desktop.JPG

Takeaways

Impact

Instead of creating a usual clothing website, this particular one helps with giving back to the communities across the world while having fun and shopping.

“It is really good to see that we can shop what we want and see where It is going to."

Lessons Learned

I have learned that every thought, idea, and feedback makes a big difference and can affect the app in several different ways. It is always good to embrace the change and learn from it.

Takeaways
bottom of page