Girls Rising at SD:
Website Design and Rebranding for a Local NPO
I attended a 10-week summer volunteer program organized by Design Co, a UCSD student organization for design, to work as a team of 5, helping a local NPO to refine its website and social media. I was assigned the role of Visual Designer: together with the team, I designed the plan for the work, did the competitive analysis, interviewed clients and potential users, built wireframe and prototype, and conducted user tests; as a visual designer, I researched on similar organization brandings, came up with new logos and branding plans, and compiled the final decisions into a design guideline (regarding logo, brand, website, and social media).
Date
2022/6 - 2022/8
Skills
UX research, UX design, Branding, Visual Design, UI design
Category
Group project, Real-life business, Volunteer, Website rebuild, Rebranding
Team
Don Le, Esther Liu, Hanyi Wang, Jessica Liu, Karen Nieto
I. My Contribution Highlights
1. Website Ideas
In week 1, the team decided to collect some website ideas.
I did 5 case studies on similar themed NGO websites, extracting branding and UI design elements.
Researched websites: Girl Rising, Girls Inc. of San Diego County, Girls on the Run San Diego, Girls Who Code, California State Parks Foundation
2. User Interviews
After building a questionnaire as a team, I interviewed 2 persons from our target user group about their experience interacting with the original organization's website.
3. Rebranding
Analysis
To begin with, I collected and analyzed the branding elements of the original website.
Then I listed out the requests I received from the client interview.
And noted down some main branding issues.
Plan A
Plan A is a design recycling many original elements
The logo is a combination of the typography and the original “balloon” icon
I adjust the brand color to be more pink and vivid: a better reflection of the age group (girls and young adults)
Plan B
Plan B is a bolder experiment introducing new symbols and colors.
I created a mood board highlighting the objects, colors, and shapes which I will later reference for my design
I started with monochrome logo designs, playing with the notion of “handcraft”, “pairs” and “asymmetry”
For the detailed gestures, I aimed to find a balance between the hard straight lines and smooth curvy lines
I created 2 types of color palettes: one more neural and the other more feminine.
As the client adored the logo concept, I later created some icons and visual assets branching from the logo design.
Plan C
Plan C took a different direction from Plan B. Inspired by the classical textile pattern “houndstooth” (aka. “thousand-bird-grid” in some eastern cultures), the logo design intended to show embody the ideas of “rising” and “shadowing” mentioned by the client.
The typography is a combination of the modern simplicity san-serif font as headings and the elegant serif font as the text.
I also introduce the “connection” and “extension” gestures in the design: reflecting the organization’s programs of pairing girls together to create a better future life.
Next, I created a new color palette with a border color range (low saturation blue and yellow) - creating more dynamic for the brand
As the client also requested a new solution for social media, I did several mockups with the new profile icon and social graphic templates
4. User Testing
After the wireframe is done, the team came up with a series of user testing tasks and questions. I interviewed a person from our target user group, learning about her impression of the low-fi design of the new website.
5. Design Guides
After comparing the pros and cons of several potential clients brought up by the group members, we chose our teammate's friend, Emmett, who was planning to start a local snow cone business in St. Louis.
After having Emmett sign the Client Agreement, we had a zoom interview with him, asking a series of questions related to his business, target customers, and design requests.
We summarized the Q&A of General, Business, Users, Brand, Competition, and Web Specifics, with our analysis attached below. We also created a priority list based on his feedback, which was an important guide to our future work focus.