Académique Documents
Professionnel Documents
Culture Documents
1 ––– INTRODUCTION
Overview of This Is My Brave
Why Redesign?
2 ––– UX RESEARCH
Social Media Analysis
Google Analytics
Usability Testing
Card Sorting
User Survey
Client Interviews
3 ––– DELIVERABLES
User Personas
User Journey Map
Sitemap
Style Guide
Prototype
Recommendations
OVERVIEW
The redesign of the This Is My Brave (TIMB) website was undertaken
by four students, Bernard Palin, Elena Saavedra, Fiorella Galvez,
and George Sordoni, enrolled in the George Washington University
UX/UI Design program. The scope of the project involved making
recommendations and web design prototypes to improve the user
experience of the TIMB website. Recommendations were based off of a
mixed-methods research study involving stakeholder interviews, social
media and website data analyses, card sorting, and usability testing.
OBJECTIVES:
yy Improve global navigation.
yy Capture the mission of TIMB throughout the site.
yy Increase visibility of the blog series
yy Improve consistency of typography and visuals
yy Increase visibility of the donation feature.
OVERVIEW DEMOGRAPHICS
QUALITATIVE 27.5%
yy Interviewing TIMB staff
yy Reviewing Facebook discussion posts
QUANTITATIVE 72.5%
yy Website user questionnaire
yy Google analytics
15 20 25 30 35 40 45 50 55 60 65 70
Events 4.64%
Blog 3.43%
USABILITY TESTING In conclusion, the usability testing confirmed some assumptions but
revealed new frustrations and difficulties that users may have with
To test our perception of user behavior on the website, 3 users the website. The principle issues identified included searching the
were selected to perform tasks on the site. These tasks included, site and navigation. From our usability research, it was concluded
purchasing tickets, finding the latest events and speakers, purchasing that the number of categories in the main navigation menu needed
merchandise, scheduling auditions and finding sponsors. From to be reduced and the drop-downs needed to be better organized
observing the behavior of users searching the site, the primary and consolidated. Additionally, the search bar location needed to be
confusion streamed from: reconsidered in the iterations of the new website redesign.
yy Organization of the Navigation Menu
Users tried to purchase a ticket for an event, they were unsure
whether to select Events or The Show. There was redundancy
in information within each drop-down menu item. For example,
signing up for auditions is found indirectly in both the Events
page and The Show drop down menu.
yy No Prominent Search Bar
All users eventually found it but agreed that it was in an
inconspicuous place on the home page. Also, their use of the
search did not result in any tangible results. Users all went back to
the main navigation menu after their search efforts.
yy Use of External Links
We observed users trying to find specific merchandise to
purchase. They found the main page easily but frustration
occurred when they tried to find specific items to purchase. They
were taken to an external site during the purchasing process.
CARD SORTING
The team completed a card sorting exercise. Navigation menu items
and sub-menus, main content categories and call-to-actions were
selected and then sorted. This exercise provided insight and confirmed
some of the findings from our usability testing. The number of
navigation menu items was reduced to six— About, Shows and Events,
Media Center, Get Involved, Brave Gear and Resources. Some of the
redundant items were either combined or consolidated into fewer
pages. Cards were organized within the categories for more intuitive
navigation. Cards that did not belong in the categories of the main
menu were organized into categories for a footer. This was purposely
done due to the fact that the home page did not include sufficient
footer information. The footer categories created were Careers, Social
Media, Contact Us, E-Newsletter and Search.
USER PERSONAS
A biologist who wants to support an organization with a mission to end the stigma A paralegal and talented music enthusiast who wants to share her story of accepting her bipolar
associated with mental illness. diagnosis and not letting it define her.
BIO: BIO:
Lisa Williamson is a happily married biologist living in New York City. When she was a child she Michelle Duncan is a separated paralegal living in the San Francisco Bay Area. When she was in her
struggled with depression and anxiety which she feels was a result of losing her dad as an early 20s she was diagnosed with Bipolar disorder after being hospitalized for an attempted
SEX: adolescent. It was not until she began studying psychology in college that she began to SEX: suicide. Since then, Michelle has struggled to come to terms with the ups and downs of her illness,
Female understand her mental illness and the impact it had on her life choices, feelings of isolation, and Female including separating from her long-time partner two years ago. Fearing that she could not handle
physical health. Through this discovery, Lisa learned to accept herself and felt inspired to help her mental health on her own, Michelle’s therapist gave her the name of several support groups.
STATUS: others reach a similar milestone in their lives. As an attendee at This Is My Brave events, Lisa looks STATUS: One of the recommended support groups was This Is My Brave. As a performer and speaker for
Married forward to networking, sharing her story with other participants, and rooting for the performers Separated the organization’s events, Michelle looks forward to sharing her stories through her lyrics and
she now considers colleagues. guitar. For her, this is not just therapy, it is a way she can give back to a community that has
RESIDENCE: RESIDENCE:
changed her life and ultimately keeps her safe from harm.
New York, NY GOALS & NEEDS: FRUSTRATIONS: San Francisco, CA
OCCUPATION: • Join a community • How people perceive mental illness OCCUPATION: GOALS & NEEDS: FRUSTRATIONS:
Biologist • Network • People that can’t break the cycle Paralegal • Encourage and inspire others • Scared to lose control of her manic states
• Help break the stigma • Struggle to help clients
• Express feelings through songwriting • Stage fright
EDUCATION: • Gain insights • Personal recurring mental illness EDUCATION:
Master’s Degree Bachelor’s Degree • Help break the stigma of mental health • Being judged by her story
• Enjoy performing arts • Lack of social activity/engagement
• Cope with bipolar disorder and depression • People not appreciating her performance
• Overcome mental illness • Needs personal outlet
• Belong to a new community • Lack of social activity/engagement
• Attend an event to support movement
• Wants an active social life
• Wants to hear people tell their stories
• Be a mental health advocate
INFLUENCES: INFLUENCES:
I created Social Media/Facebook I hope my story Social Media/Facebook
a hashtag, Peers/Colleagues
helps to
normalize and
Music
#mentallyillisnot
dangerous. Local Community
demystify what Therapist
I use it to claim Television, News, Entertainment it’s like to live Other Performers
my identity Books
with bipolar.
and refute
Books/ Blogs
JOURNEY MAPS
Lisa Williamson
SCENARIO:
Lisa Williamson is married biologist. When she was a child she struggled with depression and anxiety. Lisa
AGE: STATUS: OCCUPATION: EDUCATION: RESIDENCE: learned to accept herself and felt inspired to help others reach a similar milestone in their lives. After feeling
overwhelmed at work, Lisa shares her feelings with a friend who tells her about TIMB. After multiple
38 Married Biologists Master’s Degree New York, NY
interactions with TIMB’s website and Facebook community, she decides to attend one of their shows.
As an attendee at TIMB events, Lisa looks forward to networking, and enjoying the performances.
JOURNEY
Lisa starts feeling Feeling intrigued As an active After watching While on the Lisa learns that the Lisa keeps At the show, Lisa Feeling
overwhelmed, and about what her Facebook user, several videos, Lisa Events page, she next show coming revisiting TIMB’s gets touched and empowered and
retraumatize, friend had said Lisa decides to visit decides to revisit gets frustrated to up is in Iowa and Facebook, falls in inspired by all the encouraged after
because of about TIMB, she TIMB’s Facebook TIMB’s website for have to scroll past becomes upset love with the stories shared and the show, Lisa
everything at work. goes to their page. There she upcoming events. many auditions that it is too far for TIMB’s facebook the amazing visits TIMB’s page
ACTIVITY
She shares her website to learn views videos She gets confused before viewing the her to travel to. community, and performances. She to audition for their
feelings with a about who they are highlighting past between Show Info next upcoming decides to was also able to next show.
friend, who tells and about their shows. and Events page. show. purchase a ticket network with other
her about This Is vision and mission. and make the trip therapists.
My Brave (TIMB). to their next show.
FEELINGS AND NEEDS
• Adding more videos highlighting past events on the site will increase engagement & conversion. • More imagery portraying the amazing experience at the shows
• Re-structure Events and The Show pages to remove confusion for users. using both videos and photos.
• Adding filters to Events page so users can easily view shows coming up, or auditions, etc. • Add more emphasis on the stories of the show participants and
• Bring emphasis to Facebook page. Facebook community is keeping members engaged. performers.
• Use website to inform users about live Facebook Brave chat.
JOURNEY MAPS
Michelle Duncan
SCENARIO:
Michelle Duncan is a separated paralegal living in the San Francisco Bay Area. When she was in her
AGE: STATUS: OCCUPATION: EDUCATION: RESIDENCE: early 20s she was diagnosed with Bipolar disorder after being hospitalized for an attempted
suicide. Since then, Michelle has struggled to come to terms with the ups and downs of her illness,
46 Separated Paralegal Bachelor’s Degree San Francisco, CA
including separating from her long-time partner two years ago. Michelle took her therapist’s advice
and began searching for a support group that was tailored to creative individuals like her. That
organization was This Is My Brave.
JOURNEY
Michelle has been Michelle visits As Michelle is While on the Michelle toggles On TIMB’s After getting At the show, Michelle looks
feeling lonely and TIMB’s website, & going through Events page, between The Show YouTube page, encouraged by her Michelle is a wrack back as to why she
withdrawn from at a first glance she TIMB’s website, Michelle is able to and Events pages, Michelle is able to family, friends and of nerves, since came in the first
everyone. Her doesn’t know what she gets excited see a lot of in search of any see allthe different her therapist, she hasn’t place – for her
therapists suggests they do, but gets about all the shows auditons but gets videos of the show performances Michelle decides performed in a story to be heard.
ACTIVITY
to find other captivated by the they have. As an upset to not see with no luck. Right TIMB has. She gets to audition to their while. Right when She gives her best
support groups. video in the artist, who hasn’t any videos of past as she’s ready to both excited and next show. She she’s about to run performance by
One of the groups banner. She gets performed in some shows to indicate give up, she lands scared to feels lucky to find away, another singing and
was This Is My frustrated that the time, Michelle, the types of on one of the participate on one one of their last peformer playing the guitar.
Brave (TIMB). banner doesn’t decides to put her performances Audition pages one of their shows. spots available and approaches her She leaves the
have any sound or talents to use at TIMB has. with a link to a books her audition. and encourages show feeling
play button. one of their shows. video on Youtube. her to go. ecstatic.
FEELINGS AND NEEDS
Feels ecstatic
about the
audience’s
Feels excited Feeling
response to her
Feels captivated about the shows encouraged by Feels nervous, but
Feels frustrated audition.
about TIMB. Feels TIMB has. Feel relived to find friends, family and then encouraged
about not finding Stays feelling
Feels lonely and annoyed to not be videos of past therapist to by another
videos of past frustrated about
withdrawn. able to play the shows. audition. performer to
events and shows finding videos of
video on the home perform.
on the Events page. past shows.
page.
OPPORTUNITIES FOR GROWTH
• Adding a play button to the homepage for users to see and listen the full video. • Add more emphasis on the stories of the show participants and
• Adding videos of past events that are easily accessible on the Events page. performers.
• Re-structure Events and The Show pages to remove confusion for users. • Preparing performers and keeping them encouraged to perform.
• Adding filters to Events page so users can easily view shows coming up, or auditions, etc.
SITEMAP
Get Help
Home Main navigation Events Blog Speakers Get Involved About Shop
Buy Tickets
Donate
Cart Payment
Testimonials Volunteer History
Shows Show Info
Features Livestream
Contact
Footer Media Center Press Coverage Sponsors Resources Career Opportunites Intern with Us Volunteer Fundraise
Media Center Press Coverage Sponsor Resources Careers Intern Volunteer Fundraise
STYLE GUIDE
STYLE GUIDE
LOGOS
0.25 in
1 in
COLOR PALETTE
Aa
Avenir Light
Aa
Avenir Normal
Aa
Avenir Medium
CMYK: 96 / 72 / 0 / 0
RGB: 0 / 87 / 170
#04559a9
CMYK: 0 / 73 / 94 / 0
RGB: 249 / 104 / 39
#f26a2b
CMYK: 74 / 24 / 0 /0
RGB: 24 / 157 / 223
#219cd7
Aa
Avenir Heavy
Aa
Avenir Light
Aa
Helvetica Neue
Oblique Normal
SECONDARY COLORS
Aa
Helvetica Neue
Aa
Helvetica Neue
Aa
Helvetica Neue
#162c58 #196b7a #368a59 #323232 #4a4a4a #9b9b9b Medium Bold Condensed Bold
HEADING CONTENT
H1 body
Helvetica Neue Condensed Bold - 58px - #fff Avenir Light - 24px - #4a4a4a
H2 banner content
Helvetica Neue Condensed Bold - 50px - #4a4a4a Avenir Light - 28px - #4a4a4a
H3 quote
Helvetica Neue Condensed Bold - 36px - #4a4a4a Avenir Light Oblique- 30px - #fff
H4 field text
Helvetica Neue Condensed Bold - 32px - #fff Avenir Medium - 20px - #9b9b9b
H5 Navigation Links
Helvetica Neue Condensed Bold - 20px - #4a4a4a Helvetica Neue Condensed Bold - 20px - #4a4a4a
H6 Footer Links
Helvetica Neue Condensed Bold - 58px - #f2692c Avenir Heavy - 24px - #fff
BUTTONS
PRIMARY BUTTON
Height: 65px
Text field inactive Left/Right padding: 20px
Font size: 20px
Spacing: 0px
NAVIGATION
LONG TERM
IMPROVE GLOBAL NAVIGATION || Example: Curate section promoting the show participates
yy Implement new information architecture on existing site. scheduled to perform at the next show and feature a CTA to
“Buy Tickets”.
yy Use Google Analytics to track the performance of changes.
IMPROVE CONSISTENCY OF TYPOGRAPHY
CAPTURE THE MISSION OF TIMB
AND VISUALS
THROUGHOUT THE SITE
yy Use performance photos/visuals consistently across the site.
yy Use action-oriented performance photos across the site,
especially on Homepage and Events pages. || Use audition photography to promote upcoming shows.
yy Highlight data and metrics to show the impact of the mission || Replace the placeholder logo graphic used to promote events.
yy Show speaker information/photos when quotes or stories yy Use description text in the lead photo across key landing pages
are featured. consistently for discoverability.
yy Example: Use photos/videos from auditions to promote yy Use category tags consistently across content on events page (i.e.
upcoming live shows (i.e. Events page). shows and auditions).
yy Consistent treatment for typography and photos at top of
INCREASE THE VISIBILITY OF THE BLOG landing pages.
SERIES CONTENT
yy Use actual blog content on Homepage.
INCREASE VISIBILITY OF THE
DONATION FEATURE
|| Create a clear distinction between Shows and Auditions
blog content. yy Change link color or add a background color to the “Donate” link in
the navigation.
yy Revise content strategy on blog landing page.
yy Use a sticky navigation so header locks as the user scrolls down the
|| Organize blog landing page by topic.
page (if available).
|| Curate content to have featured content towards the
top of page.