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.

goal.png
| Project focus
| Original Interface:
Home page
Web 1920 – 6.jpg
Schedule page
Visit page
Web 1920 – 4.jpg
Event map page
Web 1920 – 9.jpg
Event info page
Web_1920_–_10.jpg
| Redesign Wireframing:
Home page
home.png
Schedule page
schedule.png
Visit page
map.png
Event map page
visit.png
Event info page
info.png
6671571797584_.pic_hd.jpg
| Wireframing Flow Chart:
| Explanation
Explanation-01.jpg
Explanation-02.jpg
| User Testing - Wizard of Oz 
Wizard of Oz  .jpg
| Redesign wireframes
Home page: Before & After
Before.jpg
Schedule page: Before & After
Before-1.jpg
After-1.jpg
Event map page: Before & After
Before-3.jpg
After-3.jpg
After.jpg
Visit page: Before & After
Before-2.jpg
After-2.jpg
Event info page: Before & After
Before-4.jpg
After-4.jpg
| 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.

styles guidelines.jpg

We use grids and alignment on all pages.

Screen Shot 2019-10-15 at 11.49.00 PM.pn
Home page
Home.jpg
Schedule page
Schedule.jpg
Before & After
Web 1920 – 6.jpg
Home.jpg
Before & After
Web 1920 – 7.jpg
Schedule.jpg
| Responsive Redesign - Annotated Mockup - Home page
Resposive Presentation.png
iPhone XS
Home - iPhone X-XS.jpg
Home - iPhone X-XS menu popup.jpg
 iPad Pro 12.9’’
Home - iPad Pro 12.9in.jpg
4K widescreen desktop monitor
Home - 4k screen.jpg