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.
Feb 2018 - May 2018
Cheng-Hong Wang, Dahye Chung, Micaela McCandless
Sketch, HTML/CSS, JS, Zeplin, Wordpress, Bootstrap, Firebase
Who are our users?
What is the problem?
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
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?
We separated the website into two perspectives, veterans and donors.
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.
This page allows donors to skim through the wish lists and choose a specified item to check out through Amazon.
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.