Unsung Heroes [Web Design]
UX design | website redesign
About the project
This is an UX project made for Unsung Heroes, a non-profit organization in Georgetown University, during the semester of Spring 2017. In this project, I re-designed the prototypes and user flow based on the original website in order to make it more fluid and user friendly.
- One month
- Rebecca Stickles
- MY ROLE
- User Research | Wireframing | Site Map | Visual Design
- A more user friendly interface;
- Attract more people to donate;
- Keep the existed users;
- Attract more schools to join in the Unsung Heroes community.
Site Map & User Flow
HOME PAGE - BANNER
Current Page (Banner Part)
A homepage or landing page is one of the first glimpses into an organization's website. Although including dynamic elements can be a great idea, the inconsistency has the potential to impede the user flow, thus interfering with the experience.
- Inconsistent buttons: change in each slide.
- The picture slides automatically with no buttons to control (about 10 seconds.
- The text should be consistent with the button: “see our stories” & “start a chapter”.
Prototype Design for the Home Page (Banner part)
- Background picture -- Can change automatically, BUT do not change the text and buttons on the banner.
- Banner --
- Directly show the name of the organization.
- Show their mission statement so that give the visitors a broader picture of what kind of organization Unsung Heroes is.
- Button --
- "ABOUT US" → About Us page. Visitors can learn more about the organization's history, missions, and other related information.
- "MAKE A DONATION" → Donate page. Donation is the most important part for Unsung Heroes, and this is their marketing objective for all their campaigns. Thus, making it as a button on this banner will let the visitors see it easily.
HOME PAGE - TAB LAYOUT
Current Home Page (Tab Layout)
- Confusing tabs
- Scattered in different corners.
- Don’t have “contact us” in main navigation---visitors might not be able to find it in the home page.
- "Start a Chapter" and "Contact us" has the similar function.
- Donate buttons-- appear for three times in the same page, which might make the visitors think they are too pushy to get the donation.
"Chapters of Unsung Heroes" tab
- The tab list is too long.
- Even though they list so many chapters, there are only five chapters that available.
- Redundancy of the texts--People will more focus on “unsung heroes of”, not “Howard”
- Some use abbreviation but some use the full name
Prototype Design for Home Page (Tab Layout)
The main navigation of the is a very important for the whole website. The visitors will directly see what’s in this website by these navigation tabs. So, what we should do is to make the navigation tabs simpler and clearer.
- "Contact Us" tab
- Includes "General Contact", "Start a New Chapter", "Corporate Opportunities". The previous website does not specify the different purposes of contacting. By adding these three tabs, it will be easier for UH to deal with different requests or corporations, which is good for the user retention.
- "Chapters" tab
- Shorter tab name: “Chapters of Unsung Heroes” → “Chapters”. This can leave more space for other tabs, and make the whole page look simpler.
- Delete “Unsung Heroes of” and only keep the name of the chapter. We don't need to re-emphasize the name of UH, since it has been shown on many places in the same page.
- Use the full name of schools. This can help the users to identify the school and avoid misinterpretation of the abbreviation.
HOME PAGE - IN THE PRESS
Current Home Page (In the Press part)
- Visitors might not know the logos are clickable
- Some logos are clickable but some are not
- It will be more confusing if one media reports Unsung Heroes for twice or more times.
Prototype Design for Home Page (In the Press part)
- Delete the “Featured In” part and change to the preview of news.
- Maximum numbers of previews = 3
- Show the logo of the media
- Only show the title of the news
- Click “Learn more” to see the full list in “in the press” page
By doing so, visitors can directly see which media has interviewed UH and what these news stories are about. There is no need to show too many reports at the same time, but visitors can always see the whole news list if they click "LEARN MORE".
HOME PAGE - SOCIAL MEDIA
Current Home Page (Social Media part)
- It is not necessary to occupy so many spaces to show the content previews of social media
- The featured stories that posted by these social media have been provided in this website
- On the main page they also have had previews for the “latest unsung heroes”
- The format of the preview is inaesthetic
Prototype Design for Home Page (Social Media part)
Make it simpler and clearer.
- Delete the preview of social medias, and just show the simple social media logos at the bottom of the website.
- People can click these icons and jump directly to Facebook, twitter and Instagram.
About Us Page
Current About Us Page
- Too many white spaces on the right side
Prototype design for About Us Page
- Add the introduction video (This video has been finished) below the title "WHAT IS UNSUNG HEROES?" A video should be good way to vividly introduce the organization, which is a lot better than only showing a picture or a long paragraph of introduction.
- Put all the contents align in the center
Featured Stories Page
FEATURED STORIES - STORY LIST
Current Story List Page
- The thumbnails are formatted differently
- Text is cut off for each story
- It is tedious to wade through the stories to find older stories
Prototype Design for Story List Page
How the stories are conveyed through the website is important for the growth and sustainability of this organization. The stories attract the audience, donors, and sponsors.
- Similar to the website Love Has No Labels, a grid format offers an alternative way of displaying the stories
- The picture becomes the focus
- There is no tedious navigation from page to page
- With no text available, it invites the audience to click through the visual options
- Add filters for different chapters instead of using fly-out tabs
- Use the abbreviation of the school name as the filter tab to make the filter simpler and clearer
FEATURED STORIES - STORY DETAIL
Current Story Detail Page
- The picture is too large and visitors need to scroll the website to see the texts
Prototype Design for Story Detail Page
- Let the visitors see the content immediately when they enter this site
The layout of this page is extremely important. If the user finds it unappealing, they are less likely to donate.
Current Donate Page
- Too cluttered
- Repeating the founding story
- Does not seem like a donation page
Prototype Design for Donate Page
- Focus on the process of donating, an infographic would work well here
- Make it clean, concise, and easily understandable