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.

1/1
1/1
 

*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!

THE HAND OFF