Thank you for your help!!!
Thank you for your help!!!
Fashion design
Fashion design
The relationship between
seniors and their pets
Redesign waterfire.org
Project Type: User interfaces and user experience
Date: Fall 2019
Brown University: User Interfaces and User Experience
Group with: Ziying Qiao
Role: Concept, Research, Analyst, Usertesting, Wireframing, Visualization, Prototype, Ideation
Skills: UIUX Design
This UI/UX case study documents the processes involved in the redesign of a non-profit organization website. Through this redesign, we hope to deliver an inclusive and professional-feeling for the visitors and donors to access the site.
he problems https://waterfire.org has are hard to navigate, the content is overwhelming and users are ignoring the critical information because of the bunches of posts and texts.
It becomes hard for potential visitors to be participation. As a non-profit organization, the website does not show the characteristics of the activity clearly, unable to attract people to participate in, let alone attract people to donate.

| Project focus
| Original Interface:
Home page

Schedule page

Visit page

Event map page

Event info page


| Redesign Wireframing:
Home page

Schedule page

Visit page

Event map page

Event info page


| Wireframing Flow Chart:
| Explanation


| User Testing - Wizard of Oz

| Redesign wireframes
Home page: Before & After

Schedule page: Before & After


Event map page: Before & After



Visit page: Before & After


Event info page: Before & After


| Visual Redesign
For readability, we use obvious hierarchy, high contrast, excellent line-height, nice letter spacing, and short line length to make the website very readable. We choose Helvetica Neue because it contained many additional weights, which can be used into multiple text style. We use grids to help with layout. Everything on the website is employed grids and alignment correctly. For the color palette, we chose orange and blue, which are the primary color of the WaterFire logo. We simplicity the website, and well-considered navigation flow during our visual design process to improve the intuitive design. We also focus the navigation flow on how to make users essay to get the information nearly effortless and easy to remember and improve efficiency.

We use grids and alignment on all pages.

Home page

Schedule page

Before & After


Before & After


| Responsive Redesign - Annotated Mockup - Home page

iPhone XS


iPad Pro 12.9’’
4K widescreen desktop monitor
