THE GET UP
BRAND & WEBSITE DESIGN
THE CHALLENGE
I had the opportunity to work with a great start-up organization, The Get Up. The Get Up is a community organizing group that's mission is to educate, inspire, and empower individuals on a broad range of social issues.
As a start-up in the early stages of defining themselves, the UX process encompassed more than just design. We needed to help The Get Up identify pain points in branding and mission and help build momentum through our design in areas where they were already shining.
THE APPROACH
The Get Up needs a digital presence to reach the community. Early on we identified many areas of confusion that users faced in interacting with the organization. We would utilize various prototypes to test users at each stage,
Our task was the create a digital space where users can find events, learn about the organization and become educated on the broad range of topics that The Get Up tackles.
THE RESULT
We partnered the with the founder to write and test content, create branding and logos, and craft an intuitive web design complete with style guides and component libraries.
Our client was thrilled with the end product and is currently working with a developer to see the site come to full fruition.
*This is not a live website, to view fonts properly you will need Proxima Nova installed on your computer.
BELIEVE YOU CAN
and you are halfway there.
____
T. Roosevelt
“I would recommend Jerra for any design role, and especially ground up designs. She brings a calm, composed empathy to all she does but is diligent in her user research as to develop something that really is best for the business and the user.
Jerra helped design the website of my organization The Get Up. Jerra played such an essential role in helping us better understand and verbalize the value of the work we were doing and whom we were doing it with and for.”
- Sara Miller
The Get Up, Founder
MY ROLE
Research
Content Writing
Wireframing
Interaction Design
Visual Design
Prototyping
Branding & Logo Design
METHODS
User & Stakeholder Interviews
Affinity Diagramming
Comparative Analysis
Contextual Inquiry
User Stories & Flows
User Journey
Personas
Sketching & Wireframes
Mood Boards
TOOLS
Axure RP
Photoshop
Post-Its
Whiteboard
Paper & Pen
DELIVERABLES
Executive presentation
High-level personas
Wireframes
User Flows & Site map
Annotated Wireframes
Interactive prototype
Specification Document
Styleguide &
Component Library
THE MISSION OF THE GET UP
is to educate and inspire a community of empowered individuals.
STAKEHOLDER INTERVIEW
Our team met together with our stakeholder, who in this case was the Co-founder of the organization. We designed our questions to begin to understand the organization the needs and initial pain points.
After the interview, we set out to analyze the next steps, plot out a timeline for our project, and define the scope of our work. We then crafted a statement of work and contract to deliver to our client.
USER INTERVIEW
After our stakeholder interview, we identified two target audiences we wanted to interview; individuals interested in social & community issues and small businesses.
Our team developed a 5-question interview script for both user groups and recruited participants.
Then we analyzed our top 3 observations from each interview and together we mapped our key data points.
COMPARATIVE ANALYSIS
Our team looked at 2 competitors.
Get Up Project
This competitor had an extremely similar name and mission, and a simple google search could produce confusion for users with the similarity. The Get Up Project also did work with refugees, a topic covered by our client's organization. We suggested that our client consider this pain point as they are early in the startup stages of their organization and do not have much equity invested in branding and development. They declined to go further with this at this time.
-
Brief - In 2010, a small group of medical professionals got together to help basic and immediate needs of refugees. They look at the healthcare needs within the growing community of resettled refugees, in Austin. They also wanted to make a difference in the community.
-
Mission - Exemplify, Empower, Encourage
-
Products/services offered
-
Hope Medical Clinic, Hope Dental Clinic
-
-
Strengths
-
Good at providing medical facilities
-
Very clear message on what they do
-
Social on Facebook
-
Updated calendar
-
Donation page which clearly shows their sponsors
-
-
Weaknesses
-
They have a calendar which opens up on a separate tab as a google calendar
-
Outdated website (Not attractive)
-
Lack of pictures of the people involved
-
-
Key brand differentiators
-
Very clear on the message they convey
-
Caritas
Caritas is a well-established and respected organization in the community. They are similar in the type of social issues they address and their vision and mission for education and empowerment.
-
Brief - Serves the homeless, working poor and documented refugees. Endowment Fund established at Austin Community Foundation. Caritas plays a major role in service provision for Hurricane Katrina evacuees in Central Texas. Provides Integrated Services to help people remain self-sufficient. Programs within Integrated Services include Education, Employment, Food Services, and Refugee Resettlement.
-
Mission - Caritas of Austin provides a service continuum for those experiencing poverty that begins with a safety net and links them to resources to achieve self-sufficiency.
-
Products/services offered
-
Help with housing, food, employment, education, refugee resettlement, and veteran's assistance
-
-
Strengths
-
Provides help to the needy
-
Well established organization (50 years)
-
Good looking, updated website
-
Active on social media
-
Has mailing list
-
Visibility on the website for donations and volunteer options
-
Events calendar
-
-
Weaknesses
-
Information architecture, too much information
-
Signup/newsletter option keeps poping up when you're on the homepage
-
-
Key brand differentiators
-
Know their target audience well
-
PERSONAS
Working with our client, we identified our target audience and used our user interviews and key data points to build a primary and secondary persona.
PRIMARY PERSONA
Socially Conscious Individual
Age: 52 years
Location: Austin, Texas
Work: Communications Director
SECONDARY PERSONA
Small Businessess
Age: 34 years
Location: Austin, Texas
Work: Restaurant Owner
Meet Beth
Beth is an avid runner who loves to run for causes she cares about. She likes to contribute to the society by getting involved with people. She gets frustrated when she can’t find information about the causes she wants to help or how to sign up to help them. When she is involved she likes to know the needs, the financial structure of an organization and how they function. Her connection grows stronger with personal recommendations.
Meet Josh
Josh is a local restaurant owner who is interested in partnering with a local organization with his employees. He believes that it is important to offer opportunities to his team to volunteer because it builds a cohesive team culture while giving back to the community. He wants to find an organization that aligns with his company’s values and has a good reputation in the community.
Pain Points:
-
Hard to find organizations, currently searches Google, Chamber of Commerce, Community Development Organizations
-
Lack of financial transparency
-
Unclear structure or mission of the organization
Preferred Channels:
-
Chamber of Commerce
-
Word of mouth
Needs from the website:
-
Clear indication of the mission, vision and history
-
Need to know affiliations of the group
-
Reputations and effectiveness of the organization
-
Details on the leadership
-
Story that has impacted people
-
Charity Certificate or any sort of certifications
How can we serve:
-
Hard to find organization, currently searches Google, organization website, Meetup.com, city website
-
Lack of financial transparency
-
Unclear structure or mission of the organization
Pain Points:
-
Clarity on the needs of the organization
-
Wants to know the volunteer or donation needs
-
Personal involvement opportunities
-
Using personal skills to fill needs
Preferred Channels:
-
Signup Genius or volunteer on organization website
-
Personal recommendations from friends and family
Needs from the website:
-
Core values and if they align with the company
-
History of the organization
-
Reputation of the organization in the community
How can we serve:
-
Wants to develop a personal connection with authentic cause
-
Clarity on the needs of the organization
-
Wants to know the volunteer or donation need
CUSTOMER JOURNEY MAP
USER STORIES
As an empathetic person, I want to personally partner with an organization so that I can meet their needs by contributing with my skillset.
PRIMARY
PERSONA
As an avid runner, I want to connect with local charity marathons, marches, and events so that I can raise awareness and money for causes I care about.
PRIMARY
PERSONA
As a business owner, I want to partner with an organization so that, I can build cohesive team culture for my employees while giving back to the community.
SECONDARY
PERSONA
WRITTEN CONTENT
After we defined our site map, we began to outline what we needed for content. We had previously discovered pain points for our users with confusion on what the organization was about so we set up several drafts of written content from our client.
Usability Testing the Content
- one approach we used for testing the written content was to conduct usability testing on the content before we entered the design stage.
Results:
-
Users were unsure if the organization was an event planner or community organizer
-
Users could not differentiate on the different types of events
-
Users wanted to know what kind of social issues the organization covered or who they were affiliated with
-
Users weren't sure what the needs of the organization were, if they were volunteering with the Get Up or with a partner of the Get Up
-
In general, users wanted more information
The client produced the first draft of the content and I wrote additional content based on our user testing and additional feedback from the client.
Our final round of testing showed that we had sufficiently cleared up the pain points associated with the content.
SKETCHING
My partner and I set out to create sketches and a paper prototype on our initial concepts to do early user tests.
PAPER PROTOTYPE
WIREFRAMES
After we conducted our user tests on the paper prototype, we made some iterations and began our wireframes. Here are a few samples of wireframes I was responsible for completing on my team.
*This is not a live website, to view fonts properly you will need Proxima Nova installed on your computer. Due to the nature of the prototyping software and varying screen sizes, elements of the prototype may be mis-aligned (ie. menu, footer, etc.). Resizing your browser may help. I apologize for the inconvenience, I can't wait for the site to be developed!
Our team utilized three types of prototypes:
-
Paper Prototype for early testing and ideation
-
Low Fidelity Prototype with wireframes for usability testing and presenting initial designs to client and ship to developer
-
High Fidelity Prototype to present final design to client and ship to developer
USABILITY TESTING
With our prototyping methods, we were able to complete 3 rounds of usability testing throughout the scope of this project. We had many iterations. Here are a few examples:
Events Page
Before
Iterated
Our client wanted to add a community calendar, but usability testing showed several pain points. We added the use of color to distinguish community events from The Get Up's events.
Get Involved Page
Before
Iterated
We initially had a contact and get involved form, which didn't make sense on such a small site. We combined the two and provided specific options for users to get involved.
About Page
Before
Iterated
Users were confused on what the organization did, so I wrote some additional content and restructured the page.
The Get Up is a start-up organization and we wanted to give them a good foundation to their digital web presence. They had an existing logo, but it didn't quite fit with their target audience and the mission statement they were trying to promote with their brand. We wanted to provide them with some new logo designs, color palette options, style guide and component libraries to start them out on the right foot.
LOGO DESIGN & COLOR PALETTES
MOOD BOARDS
STYLEGUIDE
No project is complete without a proper hand off to the client.
We packaged an overview of our research, copies of annotated wireframes, assets, logo, style guide, component library, and other important information for our client to keep as a reference in a bound book.
We also provided digital copies of all assets.
We are looking forward to seeing this project come to life!