title.png
 
 
 

 
 

IDEATION

WORKFLOW

 
workflow-line.png
 
 

TOOLS

 
logos.png
 
 

Overview

The ECMC Foundation hired me to explore a new website and brand experience with the following features:

  • Mobile and web examples of two site pages

  • User friendly and easy-to-navigate

  • Communicates vision, mission, and brand values

  • Strategically positions most important content

  • Parallels the sophistication of their competitors

The website’s target users will primarily be grantee partners, the press, and higher education and philanthropic communities.

Wireframe.cc & Balsamiq were used to create wireframes. Sketch was used in the design. Adobe Photoshop was used to convert deliverable files.

 

RESEARCH

COMPETITOR ANALYSIS

competitors-text.png

• Headline over dark hero image • Hamburger icon for portals

competitors-2-text.png

• Latest news stories ticker • Story features to show mission


Takeaways

  1. Include newsletter call-to-action on every page

  2. Add navigation bar under hamburger menu on left side of page

  3. Keep colors muted and serious; too many could be childish looking

 

WIREFRAME

Website Analysis

analysis.png

SKETCHES

sketches.png
 

SCREENS

screens.png
 

DESIGN

STYLE GUIDE

 
colors.png
 
 

LOGO

 
ecmc-logo.png
 
 

SCREENS

screens-2.png
 

CASE STUDY: Move – Ride Share (Mobile)

CASE STUDY: Move – Ride Share (Mobile)

 
CASE STUDY: Starter Pack - Life Improvement (Web)

CASE STUDY: Starter Pack - Life Improvement (Web)