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 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?
We separated the website into two perspectives, veterans and donors.
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.
Input through the website is stored as JSON
Wish lists displayed to the donors
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.