Danielle Villa-Agustin
UX Designer & Problem Solver
DFA @ UCSD
How might we celebrate DFA's accomplishments through their website to reach potential members, mentors, and community partners.
OVERVIEW
Design for America (DFA) is a national network of designers that collaborates with nonprofit organizations to create lasting social impact within their communities. UC San Diego’s DFA studio is just one of many studios across the country. The studio is arguably one of the most prestigious design organizations on campus and is highly regarded for their outstanding student leadership, longevity, and unique To Be Designed (TBD) program.
Maintaining an up-to-date website to recruit new design talent is challenging given the dynamic and quick nature of the organization. Despite their high achievement, UC San Diego’s DFA lacks a website that celebrates their latest accomplishments and supplements their existing recruitment process.
Maintaining an up-to-date website to recruit new design talent is challenging given the dynamic and quick nature of the organization. Despite their high achievement, UC San Diego’s DFA lacks a website that celebrates their latest accomplishments and supplements their existing recruitment process.
PARAMETERS
Timeline: 10 weeks
Context: Quarter-Long Design School Project
Stakeholder: DFA Co-leads
Final Product: DFA website, for both mobile and desktop, that is informative, engaging, and easy to maintain
Context: Quarter-Long Design School Project
Stakeholder: DFA Co-leads
Final Product: DFA website, for both mobile and desktop, that is informative, engaging, and easy to maintain
CURRENT STATE OF DFA
Original Website
Home: Graphic used in hero introduces branding, but the space could be used more wisely. Description is vague and doesn't give user much of a feel for what to expect.
Meet the Teams: Information is outdated and undermines members and community service by prioritizing team leads.
Team cards look a bit awkward - vary in size and are true to the yellow/blue color scheme, but not the correct shades.
Team cards look a bit awkward - vary in size and are true to the yellow/blue color scheme, but not the correct shades.
Past Projects: Organized by academic school year. Project cards similar to team cards - varying in size and text is a bit small. No option to click cards for more details or expand infographics.
About Us: More words than images. Photos aren't integrated with text and are found at the bottom of the page where users might miss it.
Briefly describes design process, but not visually appealing.
Briefly describes design process, but not visually appealing.
Get Involved: Sections for members, partners, and mentors are spread out, forcing the user to excessively scroll.
Stock photos are used in each section and users are only provided with an email to contact DFA. Social media is hidden in the footer.
Stock photos are used in each section and users are only provided with an email to contact DFA. Social media is hidden in the footer.
**BONUS: Website is not formatted for mobile. Although many users will open the website on their phone during club recruitment events, their website is not mobile-friendly.
Notice how the navigation bar is compromised and how users must swipe to the right to view the full text.
Notice how the navigation bar is compromised and how users must swipe to the right to view the full text.
GOOD DESIGN IS ABOUT THE PROCESS NOT THE PRODUCT
User Research
We casted a wide net and interviewed DFA’s three main types of users:
Interview questions were unique to each type of user and were used to gauge their current knowledge of DFA and their website. This way we could draw on their strengths and address their weaknesses in our redesign.
4 out of 6 prospective members used Facebook to learn more about DFA. Very few interacted with their website or even knew that they had one. Prospective members expressed a need for more information about projects, design process overview, and commitment.
All community partners and mentors were cold emailed by DFA to get involved. These users learned more about DFA by speaking to members one-on-one, and only one community member referred to their website. Nevertheless, this audience considers the organization’s credibility and level of experience before getting involved.
We ultimately found that everyone is looking for a close-knit community and collaborative design space. We used these key takeaways to guide our redesign and market DFA in the best light possible.
A PROBLEM WELL STATED IS A PROBLEM HALF SOLVED
Personas, Use Cases, & Problem Space
Our team built detailed personas based on our interview results that reflect the “average” users. It was important that they felt like real people so that the design process felt more personal and we can keep their specific needs in mind. Click on each persona to expand for more details.
We developed user scenarios and consequent use cases for each persona to identify common threads between users. As a result, we established the following overarching user goals prioritized them throughout our design process.
1. Find more about who they are
2. View past projects
3. Recruitment and contact information
NO COMPETITION, NO PROGRESS
Competitive Analysis
We ran a competitive analysis among competing design clubs on campus and other DFA studios. We compared their branding, site architecture, and content to understand what works best for others and draw inspiration. We ultimately found that...
• Consistency is key: Section headers and layouts should be intuitive and easy to understand. Stick to the branding colors and don't branch out too far.
.png)
• Keep it simple, keep it clear: Make menus as minimal as possible. Use clear signifiers to indicate where the user is on the website and make it easy to exit.
.png)
• A picture is worth a thousand words: Giving a face to the organization is highly valued. Incorporate a personable Meet the Team section. Use photos to emphasize the sense of community.
Once we established what we are looking for in a redesign, we drafted a Creative Brief outlining what components we hope to include and why. We shared this with our clients, got feedback, and made sure we were all on the same page before we began prototyping.
THE FREEDOM OF A BLANK PAGE
Low Fidelity Prototype
A low fidelity interactive prototype was developed, for both mobile and desktop, to get a feel for the hierarchy of information without corrupting it with images and color.
Mobile
Creating a mobile-friendly website for DFA was challenging due to the information-heavy nature of team projects. Nevertheless, it was especially important that we designed a prototype for mobile due to the current demand for mobile-first design. Imagine DFA members are tabling on Library Walk... They can easily provide prospective members with a scannable QR code and they can instantly access the website, without the inconvenience of logging onto a desktop. Accessibility indirectly encourages students to join by making it easy to learn more.
Desktop
Designing for desktop was a bit easier since we had so much real estate to work with. This freedom led to several iterations since we had the space to get wild and creative. We aimed to incorporate more interactive features on desktop, like the hover-over design process, to really capture the attention of community members and mentors who may open a link to the website through email.
IF AT FIRST YOU DON'T SUCCEED, DESIGN & DESIGN AGAIN
Feedback & Fine Tuning
After rounds of feedback from our clients, users, and teaching staff + several iterations later... we landed on a final prototype and developed some major changes along the way.
Before
After
Scrollbar to Arrows: Maintained horizontal scrolling, but replaced the original scroll bar with an arrow as it was a more salient signifier.
Before
After
Design Process: Developed an interactive and in-depth design process graphic where users can hover over each step for more information. New graphic is consistent with DFA marketing and powerpoint materials.
Before
After
General Format and Styling: Reduced amount of font styles and used color to highlight key information instead.
Before
After
Team Modules: Learned to prioritize the most crucial information, efficiently utilize space, and organize content to captivate audience.
Replaced original thumbnails provided by DFA with photography to give face to organizations and deepen sense of community.
Replaced original thumbnails provided by DFA with photography to give face to organizations and deepen sense of community.
BRANDING, SITE STRUCTURE, & CONTENT, OH MY!
High Fidelity Prototype
Navigation: Clearly displayed at the top of the page on desktop and in an hamburger menu on mobile. "Contact Us" stands out so users can easily access contact information.
Star used as a marker to signify where the user is within the site and in line with branding.
Star used as a marker to signify where the user is within the site and in line with branding.
Rotating Carousel: Naturally integrates club photos. Displays DFA's core values while highlighting studio members and overall camaraderie.
Interactive Design Process: Uses hovering function to outline the DFA design process. Gives users an idea of what to expect when they join.
** DFA did not provide us with text description, so we added filler for now
** DFA did not provide us with text description, so we added filler for now
Upcoming Dates: Prioritized at the top of "Get Involved" so users can quickly get involved with upcoming DFA events.
Option to expand for more details instead of leaving website and rerouting user to a new page.
Option to expand for more details instead of leaving website and rerouting user to a new page.
Horizontal Scrolling: Allows for many projects to be displayed on a single page without taking up too much space.
Individual Project Pages: Learn more about specific projects by clicking on project cards that link to corresponding project page.
Access to full project details and original slide decks.
Access to full project details and original slide decks.
LIFE CAN ONLY BE UNDERSTOOD BACKWARDS... BUT IT MUST BE LIVED FORWARDS
Reflection
While this information heavy website was challenging to conquer, it was especially rewarding to format for mobile since it follows many real world implications. This project may be iterations away from a final website, but is certainly a step in the right direction. If I could revisit this project, I would like to...
1. Spruce up Written Content
I would like to personally work with DFA to revisit their written content to compliment their new and improved website. My team found that some of the information we were given was redundant, outdated, and ultimately “not fit for the web”. Written content is arguably half the battle in developing an engaging website.
I would like to personally work with DFA to revisit their written content to compliment their new and improved website. My team found that some of the information we were given was redundant, outdated, and ultimately “not fit for the web”. Written content is arguably half the battle in developing an engaging website.
2. Update Individual Project Pages
Although our stakeholder expressed that individual project pages were a secondary need, I firmly believe that stronger project pages would entice prospective members and serve as an archive for future generations of DFA members. We could even add in links to team member portfolios and LinkedIns, creating opportunities for networking.
Although our stakeholder expressed that individual project pages were a secondary need, I firmly believe that stronger project pages would entice prospective members and serve as an archive for future generations of DFA members. We could even add in links to team member portfolios and LinkedIns, creating opportunities for networking.
Designing for organizations like DFA is important as good design opens the door to great opportunities. It has the potential to gather a new generation of changemakers, recruit acclaimed organizations as community partners, and get young innovators in touch with industry professionals who may guide their journey.
Spotify CarPlay
How might we redesign Spotify CarPlay to establish a more efficient and safer usability experience on the road
VIEW CASE STUDY >>
Catalyst:Impact
How might we encourage young flox to get involved in their community and create positive social change
VIEW CASE STUDY >>
Youth Garden
How might we increase Youth Garden’s outreach, engagement, and retention through establishing a more intuitive design
VIEW CASE STUDY >>