Chenxin Wang
make.png

Make It Count - Web Redesign

Make It Count

We can't help everyone, but everyone can help someone


 

This is a in-class project for advanced web design. In this project, we re-designed and shipped a responsive website for a non-profit in Pittsburgh, Veterans Place, to collect veterans’ wish lists and encourage donations.

My role on the team was the UX designer. I collaborated with the product manager to learn about clients’ needs and improved the user flow. I then designed the screens and implemented part of the website.

 

My role:

UX Designer

Time:

Feb 2018 - May 2018

Team Members:

Cheng-Hong Wang, Dahye Chung, Micaela McCandless

Skills/Tools:

Sketch, HTML/CSS, JS, Zeplin, Wordpress, Bootstrap, Firebase

screen.png
 
 

Who are our users?

 
veteran.png
donor.png
 
 
 

What is the problem?

Heuristic Analysis

I conducted heuristic analysis based on Jacob Nelson’s 10 general principles for interaction design.

 
 
  • Visibility of system status

  • Match between system and the real world

  • User control and freedom

  • Consistency and standards

  • Error prevention

  • Recognition rather than recall

  • Flexibility and efficiency of use

  • Aesthetic and minimalist design

  • Help users recognize, diagnose, and recover from errors

  • Help and documentation

 
 
original_new.png
 
 

The problems could be summarized as follow:

  • The site’s stakeholders are veterans and donors. However, they are not distinguished well in the existing website.

  • Too much redundant information (image and text) will let users easily lose their focus when they are browsing the site.

  • Get rid of directly using Amazon’s screenshots on the site.

  • The veteran’s profile should be saved into a database so that the non-profit could match the donors directly with the veterans.

  • The existing website does not allow donors to make donations directly on the website.

original user flow

old2.png

In the redesigned website, we should reduce the work that our client do, which means that we should design a website that is easy for veterans to create wish lists by themselves.

How might we re-design the existing web and make it usable for both veterans and donors and reduce our client’s work?

 
 
 

Design

 

site map

We separated the website into two perspectives, veterans and donors.

user_flow_new.png
 
 
 

user flow

flow.png
 
 

design details

Landing Page

This screen helps separate Veterans and Donors.

landing.png
 
 

Create Wish List Page

This page is designed for veterans to create wish lists. The form limits the information to the minimum in case it’s hard for veterans to control.

 
input.png
 
 

Donor Page

This page allows donors to skim through the wish lists and choose a specified item to check out through Amazon.

 
donate.png
 
 

Style Guide

 
style.png
 
 
 

Reflection

It is important to think for the users and think from the users’ perspectives when designing. In this project, I learned that a good design should minimize the user work flow, and not require users to learn a completely new thing, especially when they are not familiar with the recent tech. I also learned how to connect front-end interface to backend data using API.