Chenxin Wang

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


Feb 2018 - May 2018

Team Members:

Cheng-Hong Wang, Dahye Chung, Micaela McCandless


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


Who are our users?


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


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


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?




site map

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


user flow


design details

Landing Page

This screen helps separate Veterans and Donors.


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.


Donor Page

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


Style Guide



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.