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.
Client: Design for America
Timeframe: September 2015 - March 2016
Platform: Responsive Web through Wordpress
- 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.
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).
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.
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!
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.
We were curious about how people were interacting with the existing site, so I created a brief report based on Google Analytics data.
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.
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.
Through various brainstorming and sketching sessions with Stacy, I created rough sketches of key screens and features.
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.
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.
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.
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