Rational-animal is a non-profit organization that has been support animals at risk since 2002, through organizing local fundraising events and partnering with artists to form ecommerce gallery to bring capital to organizations
Rational-Animal has the vision to bring users' awareness for at-risk animals through campaigns & eCommerce galleries, however, their website suggests otherwise. With the bold color scheme and disorganized layout, it's not doesn't reflect such a goal, whether a disconnection to users.
Our goal for the redesign is to improve the user return rate by 10% through the use of easier site navigation and transparency of funding distribution.
We want to understand what concerns users when making a donation
Based on the interview findings, users are most concerned about funding distribution and organization reliability.
We established a persona that fit the criteria of a regular busy individual who is available during the weekend and wants to give back to the community.
Brainstorm sessions were held to analyze data collected from interviews and categorized in the level of impact on the users and complexity of the functions to help set a direction for the redesign
To test out the fundamental functions of the site, we decided to mockup 3 flows that users encounter the most in websites that involve a purchase.
After 1st round of user testing on flows, we found the new simplified flows has improve user return rate by 20%
Complete flow can be viewed by clicked at flow:
To better understand our position in the established market, we went out to research other apps with similar functionalities in both direct and indirect markets.
We drafted out a basic wireframe to test out the functionalities and overall layout of the mobile platform before the web platform, as mobile devices has a more dominated market nowadays.
The original Rational-Animal has a bright orange color scheme, it's cute nonetheless, however, it feels more like the color is competing with elements in the webpage.
In the redesign, we want to keep the originality of the color scheme, added accent colors for a more playful vibe.
Adjusted the predominant orange to a warmer tone and simplified the distribution of the accent colors to support the mellow orange we finalized.
After testing our low-fidelity mockups, we were able to create high-fidelity mockups.
A major change that occurred during this mockup was that the color scheme set the tone for the entire website, making it more welcoming for users. We also removed repetitive links to make the website user-friendly.
