D.C. United
I branded and created print, web, social, email, and large scale content for the 2019 season.
I also worked on outside events owned by D.C. United, theme nights and 2020 season branding.
D.C. United
I branded and created print, web, social, email, and large scale content for the 2019 season.
I also worked on outside events owned by D.C. United, theme nights and 2020 season branding.
Gifts For Seniors
Web & Mobile Redesign
Gifts For Seniors
Web & Mobile Redesign
Gifts For Seniors
Web & Mobile Redesign
Alaina Hornibrook
Graphic & UX/UI Designer
Gifts For Seniors
Web & Mobile Redesign
Background
We were tasked to choose a local non-profit and redesign their website. We were given two and a half weeks to create a web and mobile prototype.
My Team
UX Researcher
UX Designer
UI Designer
My Role
User Research
User Flow
Wireframe
Prototype
User Test
The Problem
Without loosing the goals of Gifts For Seniors, redesign the website to create a user friendly experience for current and new volunteers.
The Solution
We created a website that uses a mix of personality and empathy along with an easy user flow to create a new experience for all users.
Step 1:
User Research
Step 2:
Definition &
Ideation
Step 3:
Prototyping & Testing
Step 4:
Iterating & Hi-Fi Prototype
Step 5:
Conclusion
Step 1: User Research
Interview Plan
During the beginning of our research process we interview the Executive Director of “Gifts for Seniors”. We wanted to understand what was important for the organization to highlight on their website.
Additionally, we also created a survey about what is important for potential volunteers to know before deciding to volunteer. 41 people responded to our survey.
Emphasize both the joy of connectedness as well as the loneliness that results from isolation
Keep the website simple and easy to navigate.
73% of respondents would be interested in volunteering with seniors
Important to see the mission statement and how the organization impacts the community
User Persona
We created Julie, a 50 year old teacher who felt the effects of isolation during COVID and wants to use her extra time to help others who might be feeling the same way.
Julie wants to help people within her community and make people smile
1
Julie wants to make connections during a time of isolation
2
Julie wants a reliable organization to contribute her time and resources to
3
Step 2: Definition & Ideation
Problem Statment
Our design team observed that the “Gifts for Seniors” website has a scarcity of personality and empathy, along with an unclear user path. Our design team created a responsive web and mobile design solution for “Gifts for Seniors,” a non profit organization in Minnesota. How might our redesign of the ‘Gifts for Seniors” website give new and active volunteers a user friendly and personable website that will allow them to gain knowledge about the organization, and easy access to multiple opportunities to help isolated seniors within their community?
Story Board
We created a user story for Julie based on her experience with the website and her goals of volunteering with Gifts For Seniors.
1
2
3
5
6
4
Competitor Analysis
We researched two direct competitors and two indirect competitors. We wanted to find weaknesses in our competitors and be able to capitalize on those opportunities.
We had three main takeaways from our competitor analysis.
Direct: Toys For Tots and Be a Santa to a Senior
Indirect: Habitat For Humanity and Loaves and Fishes
Many competitors webpages were simple, but hard to navigate due to nav systems and design
1
Many of the competitors had a lack of branding or design throughout their webpages
2
Calls to actions were often disregarded
3
Step 3: Prototyping & Testing
User Flow
Based on our problem, goal and competitor analysis we created our user flow. Since there isn’t a goal to complete while on the webpage, we wanted to make sure it was easy to find all of the information you would need to decide to volunteer.
1
2
3
4
Home and About pages
1
Decide on how to get involved
2
Fill out the volunteer form
3
Execute volunteer strategy
4
Lo-Fi Prototype
We started with grayscale Lo-Fi prototypes after completing the user flow.
Below are three web page examples.
Guerilla Testing
We conducted guerilla testing based on our greyscale lo-fi prototypes.
From our testing we had three main takeaways.
Users found the site easy to navigate and appreciated clean, uncluttered design
1
The addition of real happy seniors left the users wanting to see more testimonials
2
Information was found to be clearly laid out and easy to understand
3
Style Guide
We created an updated style guide as part of our redesign.
Added two colors to coordinate with the existing blue and defined the grey scale
1
Simplified the primary logo and created a reverse logo
2
Added cards and forms
3
Defined typography, buttons and image guidelines
4
Step 4: Iterating & Hi-Fi Prototyping
Digital Wireframes
We created Hi-Fi prototypes based on the greyscale Lo-Fi prototypes and the guerilla testing feedback.
We also created a mobile version of the Hi-Fi prototype. It includes a single column and a hamburger menu for the main navigation.
iOS Prototype
Step 5: Conclusion
Steps
In conclusion, the team redesigned the Gift's for Seniors webpage that allows a more users friendly experience for potential volunteers and providers.
Step 1: User Research
Step 2: Definition & Ideation
Step 3: Prototyping & Testing
Step 4: Iterating and Hi-Fi Prototype
Step 5: Conclusion
Future Opportunities
Build out features with iOS prototypes
1
1
User testing with the iOS prototype
2
2
Further branding
3
3