make.png

Make It Count

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

 
originalweb.png
 

The problems could be summarized as following:

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

  • The user flows are not clear. Users keep jumping back and forth between Amazon and 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.

How might we re-design the existing web and make it usable for both veterans and donors?

 
 
 

Solution

 

information architecture

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

Information architecture_v2.png
 
 
 
 

User flow

flow.png
 

Highlight features

bothUsers.png


We used two main entries on the landing page to separate two user groups. It appears much clearer compared with the former navigation bar.

 

Other than a complex wish list form, we designed a simple form for veterans to input their requests.

form.png
 
Screen Shot 2018-10-09 at 4.36.13 PM.png

Input through the website is stored as JSON

Screen Shot 2018-10-09 at 4.35.56 PM.png
 
Screen Shot 2018-10-09 at 4.45.09 PM.png

Wish lists displayed to the donors

 

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.