YouthBuild Boston Project
Date: Spring 2022
Timeline: 12 weeks
​
For: Academic module at Northeastern University for the course "Interactive Information Design 1"
​
Stakeholders: YouthBuild Boston
Roles/ Responsibilites:
-
UI/UX Designer
​
Tools: Figma, Adobe Photoshop
The Problem
My client YouthBuild Boston is a non-profit organization that advocates for youth development by giving equal educational and vocational opportunities to underprivileged young peoples in the Boston area. Their goal is to better the community by offering on-site programs and counseling resources in order for audiences to gain the experiences and credentials needed to enter the workforce more easily, in particular, the construction and design industries. Their current website is challenged by issues with desktop and mobile navigation such as lack of responsive design and visual clarity.
The Solution
Through several different stages of market research, brand discovery, site mapping, and creating wireframes and prototypes, my iterative design process focused on optimizing functionality while ensuring a seamless journey for visitors. While aligning the deliverables with YouthBuild Boston's styling guidelines and requirements, the final website design reflects a collaborative effort between research, design, and development to improve user experiences and strengthen the company's branding.
Initial Research
Brand Discovery
The first thing I tackled in this project was basic research of the company and its history. I reassessed and took note of the specific goals of the brand, their target audiences, and then compared my client to some direct/ indirect competitors.
​
View and or download the full document below for more in-depth details on the process of the brand discovery.
What is the company: YouthBuild Boston (YBB) is a non-profit organization that advocates for youth development, bettering the community, and giving equal educational and vocational opportunities to underprivileged young peoples in the Boston area.
​
What the company believes in: YYB believes that young and underpriviledged youths should have the same opportunities as their fellow peers to obtain vocational stability, personal success, and ultimately reach their full potential/ aspirational goals.
​
What services the company offers (Unique Value Point UVP):
YYB offer 4 main programs that will improve life skills, educational training, vocational credentials such as first aid/ CPR certification and National Center for Construction Education and Research (NCCER) certification, academic credits towards a degree, and finally other financial benefits such as a bi-weekly stipends. Their services promise a structured pathway to secure a stable career in construction and project management industries.
​
While people enrolled in the program are actively participating, they are essentially building connections to their community, helping with community service projects that improve the quality of life for some people, and are even bettering themselves through hard work and team effort. They gain life experience with on-site projects, and develop professional soft skills while they are still young.
Brand Reputation/ Perception:
Company Goals and Potential Brand Messaging:
Competitive Analysis
I found 6 direct and indirect competitors for my client.
After conducting a competitive analysis, I was able to determine any major strengths and weaknesses with my client's current website.
​
The primary focus of this matrix table is to compare various factors related to UI features and overall user experience while navigating each site.
Target Audiences
For this project I had to determine the various targeted audiences for the client in order of importance by estimated percentage. These are not definitive factual statistics, but rather an exercise in order to help assess and prioitize the client's audiences. Through this method, it becomes easier to pinpoint and assess how the client can contiue to market/ brand themselves appropriately and more accurately.
Main audience (45%)
​
Teens and young adults, roughly aged between 17-25 who wish to gain experience in the construction and design industry.
​
Desired conversion:
Apply to a program and or volunteer.
Tertiary audience (15%)
​
Companies or other organizations that are looking to partner with YouthBuild and potentially find people to recruit and hire.
​
Desired conversion:
Partner with YBB and or donate.
Secondary audience (35%)
​
Family members/ legal guardians, primarily parents, and or High School career counselors of the applicants.
Desired conversion:
Apply their kids to a
program, and or donate.
Quaternary audience (5%)
​
​​Visitors who found the website either organically or via some 3rd level connection. They are mainly interested in learning more about the company and thier services. If they resonate with the brand they might consider donating.​​
​
Desired conversion: Donate.
Design Process
Site Map
The existing site has disorganized informational architecture and lacks hierarchy. In order to streamline user navigation I went through their website and devised a new site map by combining and eliminating their existing pages. Due to the time constraints of the project, I focused on producing desktop and mobile designs for only the following 7 distinct pages:
-
Homepage
-
About Us
-
Application Process Page
-
Our Team
-
Single Team Member Page
-
Contact
-
FAQs Page
​
The site map below marks out how the site should be reorgnized. The letters denote where specific page templates should be used. I devised 8 distinct page templates to use across the site to save on time and ensure consistency.
.png)
Sketches
Low-Fidelity Wireframes
After the sketches, I developed various iterations of the wireframes for both desktop and mobile versions. In this stage I focused on page layouts and content hierarchy so that information would be readable, sized approprately, and grouped efficiently.
​
In order to make viewing easier on this site, only the desktop designs are shown below, however, you can view and or download the high-resolution PDF with both desktop and mobile designs with the button here.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
High-Fidelity Prototypes
Through several rounds of feedback and iterations of improvement, I then focused on creating a style guide to standardize the fonts and color palette for the designs. I went with Ubuntu, Permanent Marker, and Poppins as the main fonts to add visual interest and in some pages improve legibility. The site already utilizes the 3 tertiary colors of orange, purple, and green. By adding a few more dark and light variations of the existing colors it helped improve on-screen contrast between text and background.
​
Below the style guide, you can view the final desktop screen designs. In order to make viewing easier on this site, only the desktop designs are shown below, however, you can view and or download the high-resolution PDF with both desktop and mobile designs with the button here.
​
Learnings & Takeaways
Ideas for Revisions
This project was the first time I created screens for both desktop and mobile at the same time. I also learned more in-depth ways to conduct brand discovery, and how to create a written site map as opposed to a visual one.
​
A few major takeaways from this project included the importance of site layout and hierarchy, pixel-specific spacing, and how to visually balance white space with on-page elements. Our professor emphasized the importance of paying attention to the little details and provided clear rationale on what sets good design apart from great design.
-
Despite the fact that these pages are now more readible and easy to navigate, many pages still contain a lot of dense written sections.
-
The site could benefit from having more creative solutions for content organization which would ideally make it more appealing for users to want to read through the text.
-
-
Although it's important to know when to make good use of white space for a clean look, there is still a lack of visual motif or visual interest which ties in the brand identity together throughout the site.
- For example, at the bottom of the homepage,​ I utilize the silhouette of 3 angled points, which is meant to be reminiscent of the company's logo and the shape of house rooftops. Unfortunately, I only use this visual detail once and the site could have had more of this type of creative flair throughout so it doesn't feel out of place.
- The site doesn't necessarily feel empty, but it does lack something special that would make the site stand-out or be especially memorable.