Accion.org & CFI Site Redesign

Agency: iStrategyLabs WPP Year: 2018

Role: Associate Creative Director, Design Lead


1. Business Objective

To establish new information architecture (IA), taxonomy, design, and a new WordPress build 🥲 for two websites as part of one master brand.

 

Project Objective

Build a design system to support both websites with individual needs while defining global UI/UX mechanics.

 

 

2. Discovery

Bold action
& presence.

 

Accion is a micro-finance nonprofit that provides monetary solutions and impact investments for low-income individuals and their growing businesses around the world.

With this project, they sought to appeal to a wider audience with an updated web presence that would provide clarity on its mission and values, generate awareness of its positive global impacts, and push its brand forward visually with kinetic and contemporary energy.

Brand Studies

 

With their existing aesthetic style as a foundation, the team and I focused on bolstering their visual language into a system defined by vibrant color, bold and legible typography, and a fusion of naturally lit and filtered photography.

Moodboard Study Image Full

Moodboard Image

Ui Brand Study - 3 mobile screens

UI Brand Application Study

Desktop Brand Study

Desktop brand UI Application Study


 

3. Exploration

Design Definitions

Once our studies were presented and rounds of feedback gave the client proper time to adjust some of the stakeholder’s needs, we moved on to defining our design system with color, photography, and modular sections.

 
 
Design System Study Image

Design system studies

Photography treatment study image

Photography treatment study

 
Color and Type Definitions Image

Color and Type Definitions


 

4. Delivery

Final Delivery

Our final product delivery for Accion and CFI was a modern and bold design website system, with easy to navigate functionality and clear content strategy to present the right content at any entry point.

 
 
3 Mobile Screen Layouts Image

Approved mobile Article, Home and Menu screens

Design System Mockup

We used Green and Dark Grey colors for The Center for Financial Inclusion branding, while keeping the main white space, black, and grey as our global UI pattern.

 

5. Outcomes

Results & Impact

 
 
Webby Awards Screen Shot

The Webby Awards Honoree - Best User Experience 2019 - Website and Mobile Sites