Design for America Website

Redesigning the website for a national network of students and professionals leveraging design innovation for social good. Visit the site at designforamerica.com.


Project Brief

Client: Design for America
Timeframe: September 2015 - March 2016
Platform: Responsive Web through Wordpress

Team:
- Stacy Klingbeil - Designer, Project Manager
- Allison Chen - Designer
- Andy Rench - Developer

My tasks and responsibilities:
- User research and synthesis
- Low and high fidelity prototyping
- User testing
- Content creation

Design for America is an award-winning, national network of university-led teams using design innovation to improve their communities and create social impact.

DFA operates as student organizations called DFA studios that run events and work on projects ranging from inspiring low-income middle school students to pursue their interests to combating loneliness in the elderly community. The network currently includes 29 DFA studios, 900+ students, 70+ industry and faculty mentors, and 60+ community partners.

img_dfa_website_responsive.jpg

The Design for America website defines what the organization does and invites students and professionals interested in design, innovation, and social impact to get involved.

  • It communicates a legitimate and growing brand by highlighting key partnerships and achievements of both the network and non-profit organization headquarters (DFA National).
  • It engages people and helps expand the growing network by displaying content that tells powerful stories of impact and definitive calls to action.
  • It shows design values by introducing a responsive layout with clean, modern UI elements.

I worked as an in-house UX Designer as part of my Fellowship at DFA National (a combination of marketing, design, and student mentorship).


Discovery

User Interviews
When I joined the project Stacy had jumpstarted the process by creating a research plan to learn more about our stakeholders. I joined her in conducting user interviews both in-person and on the phone to better understand our stakeholders’ pains, gains, and motivations.

Synthesis
We collected and synthesized our research findings in order to identify trends and key user goals that would inform user personas - color coded by stakeholder!

Here Stacy and I laid out key information about all of our stakeholders, varying from students to professionals and those very involved to those just learning about us.

Here Stacy and I laid out key information about all of our stakeholders, varying from students to professionals and those very involved to those just learning about us.

We clustered this stakeholder data to identify goals of coming to the website.

We clustered this stakeholder data to identify goals of coming to the website.

The most common goals were: learn about our organization, process, and projects as well as specific ways to get involved.

The most common goals were: learn about our organization, process, and projects as well as specific ways to get involved.

User Personas
I worked with Stacy to identify 4 target user personas to focus on. After collecting data and defining the design requirements, I created user persona documents for us to reference while designing.

Left: Based on organizational goals, we decided to focus on the “Interested Deliberator” persona to support our growing organization. Top: We still kept in mind the goals of the other personas throughout the process as well.

Left: Based on organizational goals, we decided to focus on the “Interested Deliberator” persona to support our growing organization.

Top: We still kept in mind the goals of the other personas throughout the process as well.

Quantitative Analysis
We were curious about how people were interacting with the existing site, so I created a brief report based on Google Analytics data.

This supported our goal to focus on professionals, as students were already engaging with the website and would likely continue.

This supported our goal to focus on professionals, as students were already engaging with the website and would likely continue.

Content Inventory
I worked with Stacy to create a content inventory of the existing site and map them to specific user goals, adding and removing content as necessary.

We made sure our content met our 3 main goals: to clarify information, legitimize our organization and brand, and provide clear calls to action.

We made sure our content met our 3 main goals: to clarify information, legitimize our organization and brand, and provide clear calls to action.

We made a rough sitemap based on where the content would appear on the homepage how it links to all the other content.

We made a rough sitemap based on where the content would appear on the homepage how it links to all the other content.

Use Case Scenario
In considering how the website fits into the entire brand experience, I made a visual use case scenario that focused on the experience of one of our target users - potential mentors.

Our goal within the overall branding experience is to leverage the website as the deciding factor to join DFA for potential mentors, sponsors, and other users that all under this persona.

Our goal within the overall branding experience is to leverage the website as the deciding factor to join DFA for potential mentors, sponsors, and other users that all under this persona.


Design

Sketches
Through various brainstorming and sketching sessions with Stacy, I created rough sketches of key screens and features.

img_sketches_feedback.JPG
Left: During the sketching process, we made sure to get regular feedback from our co-workers. Top: We continuously looked back to our user personas to align our ideas with their user goals.

Left: During the sketching process, we made sure to get regular feedback from our co-workers.

Top: We continuously looked back to our user personas to align our ideas with their user goals.

Wireframes & User Testing
Based on our sketches, we made some quick wireframes in Illustrator to get user feedback. Our main goal was to see what navigation users would use to get to their end goal and draft copy language to clarify our mission to first-time users.

img_wireframe_02.jpg
Here we’re testing a version of the homepage with DFA students.

Here we’re testing a version of the homepage with DFA students.

Preliminary Style Guide
I made a preliminary style guide for the user interface design based on DFA branding guidelines and what the Wordpress theme already has to offer. We consulted with a professional graphic designer and implemented suggestions for the header and footer into the final design.

img_style_guide_ideas_Page_04.jpg

High-Fidelity Mockups
Stacy and I teamed up to create the high fidelity mockups for Andy to use as reference to customize the Wordpress theme and for the team to reference for organizing and creating content.

Here we laid out all the mockups to assign content responsibilities to the team.

Here we laid out all the mockups to assign content responsibilities to the team.


Delivery

Content Creation
I worked with Stacy and Andy to build and refine the pages in Wordpress to reflect the amazing stories in our network!


Project status: We are at the stage of refining details and updating the website to keep it current. View the live site at designforamerica.com.

Reflection: I learned so much throughout this process! Some key learnings were:

  • The quality and cohesion of content truly defines a website.
  • It's important to have constant communication between designers and developers, both early on and in the final stages of the design.
  • While an informational website does not require a robust user flow, it is extremely helpful to define one within the branding experience and utilize that for usability tests.

View more projects

Let's Care HD

Let's Care HD

Geometry

Geometry

Techstyle Haus

Techstyle Haus

Making

Making

STEAM

STEAM

Illustration

Illustration