Vivien Logo.png

​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