USER INTERFACE CASE STUDY
Hearts in Motion
Non-Profit Website Mockup Re-Design
PROJECT DETAILS
Objective:
Select a non-profit website to re-design with an optimized user interface
Solution:
Simplify the brand logo, create a new color palette and design clean, intuitive user flows for web and mobile.
Target Audience:
Potential donors, volunteers, and sponsors for the program.
Desktop and Mobile Video Walkthroughs
New Brand Identity
Logo Before & After
AFTER
BEFORE
PRE-DESIGN PROCESS
Internal Benchmark Analysis
Before re-design work began, I started by analyzing the pros and cons of the original site.
A) LOGO - The logo design is a bit too detailed.
B) ICONS - The gloss effect on the icons is dated, but the placement is easy to find.
C) NAV BAR - The dropdowns are complex with too many tabs to allow for easy navigation.
D) COLORS - The colors represented in the logo are not represented in the site. The green and blue seem arbitrary.
E) SLIDESHOW - The slides cycle through a bit too quickly and the captions are consistently aligned.
F) GRIDS - The site does not have an overall grid.
G) VIDEOS - Videos are displayed at the bottom of the page and are difficult to find.
H) GRAPHIC ELEMENT - This interactive graphic is dated and does not look clickable from a new visitor's perspective.
Competitor Analysis
After the internal analysis, I looked at the Obakki Foundation's website to compare.
A) FIRST IMPRESSIONS - The homepage is beautifully simple, legible, and compelling. The visitor does not need to ask "where do I go next?" because their options are few and clarified. However, a primary navigation bar might help orient the visitor better.
B) POP-UP NAVIGATION - The hamburger icon creates a simplified layout on the homepage at the expense of easy navigation.
C) INTEGRATED STOREFRONT - While H.I.M. sends visitors to a different website to buy merch, this site integrates the store into its homepage.
D) READABILITY - Clicking on a product brings up a display with readable information about the item.
E) EASE OF DONATION - The site creates repetition without redundancy. There are several simple ways to find the donation interface, which is the primary purpose of the website.
Heuristic Analysis
A participant attempts to interact with the original H.I.M. site and records their experience.
"How can I sponsor a child?"
An unbiased participant clicks through the original website to try to find information on child sponsorship. This helps the designer see the site through new eyes and gain unique insights. This analysis also serves as a test of the website's user interface and intuitiveness of the information architecture.
Overall, the clicks created pain points for the user. They did not know what to expect when clicking links, and found the overall interface to be visually unappealing.
The user also noted that the child sponsorship page looked more like a pet adoption system, and suggested a more random assignment of children to their sponsors to encourage equity.
DESIGN PROCESS
Information Architecture
Participants sort cards into their ideal navigation order. The designer uses this to create the new information architecture for the redesigned website.
CARD SORTING
INFORMATION ARCHITECTURE
Paper Wireframes
Sometimes working on paper just makes more sense that going straight to digital.
Paper wireframes allow the designer to get their ideas out before committing to a layout.
