NPO Website Redesign

Shop Goodwill

Redesigned shop goodwill’s online auction store.

BACKGROUND

Overview

Shop goodwill is a Non-profit organization that provides online auction to users without having to visit the location. We have observed that our user’s pain points includes: The ShopGoodwill.com website does not communicate the bidding process clearly. & does not take advantage of the Goodwill brand. We aim to redesign shop goodwill that customers are more successful.


MY ROLES

User Research, User Flows, Wireframes & Prototypes, UI Style guide, User Testing,
High-Fidelity, Web Design & Developement

DURATION

2 Weeks

TOOLS

Sketch
Adobe XD
Invision
Adobe Photoshop
Adobe Illustrator

Problem

The challenge

The ShopGoodwill.com website does not communicate the bidding process clearly.
ShopGoodwill does not take advantage of the Goodwill brand.
Shipping price estimator is too hidden.
It does not call out to users due to a lack of large images or any sort of section that calls out to the user.
The page could use an updated design to improve the user experience which in turn would increases click counts, sales, and profit.

Solution

Balance with work and life.

Personalize the experience
(“Recently viewed”, “because you viewed”).
Use larger category images or icons. Currently all the links are plain text hyperlinks to filters.
Present something to get excited over (Sale items, seasonals, etc).
Add a nice featured ribbon.
Motivate the shopper (ie “Why shop Goodwill?”)
Making the website look more modernized and exciting will increase browsing / engagement time leading to more sales.
Making the shipping price estimator more noticable will reduce the number of users surprised by the shipping costs, building on Goodwill’s reputation and trust.

User
Observation &
Research

Shop Goodwill Reviews

154 Reviews

Horrible experience stay away
Nefarious website
Deception, profit and conceit
Deceptive practices.
Hard to find out the process status


SWOT Analysis

Based on statistics

Strengths


Well known
Good intentions
Nationwide
A chat function is available
Has inspiring content for Goodwill (People back to work)
Contact info is bold and present

Weaknesses


Only "Goodwill" is well known
Lots of long text
Overwhelming
Cluttered
Important features unnoticeable

Opportunities


Well known
Page Nav is rather bland
Search bar is out of place
Location services can be improved

Threats


Salvation Army
Red Cross Donations
Other Clothing Donation Companies
Other non profit $$$ Donation

User Persona & Story

Held accountable by users.

User persona and story board was used to deeply understand the user. Using the user’s persona as the thesis of a story. With the story we would further understand the user as if it was us and easier to solve the problems that the user was facing by adding specific features on the app.

persona storyboard

Sitemap

Plan of the project

User persona and story board was used to deeply understand the user. Using the user’s persona as the thesis of a story. With the story we would further understand the user as if it was us and easier to solve the problems that the user was facing by adding specific features on the app.

Brainstorming note
Categories

Final Sitemap

User flow

Focus on what the user needs

From my user research, I created two user flow which rebuilds purchasing and signing up by simplifying user experience removing unnecessary features and making it easier to utilize the website.

Wire frames

Think like users.

I began with a user survey and sent them out to my email contacts, friends, social media, and subreddit in order to get a good grasp of my target audience. I needed to learn the following:)

Click for detailed view
A Ver.
B Ver.

User Testing

A / B Preference test

Two basic design tests were conducted to determine if one design preferred a different design.
The A version has an indicator at the bottom of hero image. B version has an indicator to the right of the hero image with the hero's UI style card.
73% of the students selected B version, and the remaining 27% selected A version. Since the card UI is immediately visible when the website is opened.

Style guide

Be an UI Designer

header font

Montserrat

Aa Bb Cc

Colors
colors
Icons
Icons
body Font

PT sans

Aa Bb Cc

Logo Redesign
logo design_white bakgound
Filter Option
input image
Typography

Far far away…

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Logo Icons
logo design_blue bakgound
Buttons
button image

High-Fidelity

Final Screens

The completed screens below show effects of several feedbacks and adjustments that were made.

Prototype

Web Design

Conclusion

What I experienced

Beginning with non-profit website redesign, we chose Goodwill among many other NPOs. The reason is that Goodwill is much more accessible and close to us than other institutions. But we have seen many things that needs improvement when analyzing a website. The problem consisted with 1.5-star reviews and 90-year style auction website. We wanted to turn this institution into a modern website and redirected the most important bid flow. We have reduced the number of steps, modified the bead confirmation and rebid to access it in a short time. It was a very enjoyable experience, but we could not send the result because we could not reach them. I hope shop goodwill to be a website that many people can use with a good design.