2023

Boys Town

Live Website
Arrow point right up icon
Overview
Established in 1917 by Father Edward, Boys Town stands as a venerable U.S.-based non-profit organization with a steadfast commitment to supporting children, families, and communities in need. In our ongoing collaboration, Boys Town has enlisted our expertise to elevate their digital presence. As part of this initiative, we are spearheading the migration of their CMS to the Agility platform and implementing crucial updates to enhance both UX and UI for a more impactful online experience.
Challenge
To commence the project, the client highlighted specific challenges. Boys Town faces difficulties showcasing services on their website and aims to develop a strategy to organize multiple sites within the main one for enhanced user accessibility.
Project Type
Responsive Web/Mobile Design
Tools
Figma, Adobe Illustrator, Photoshop
Design Roles/ Responsibilities
UX•UI Design
Team
• Client Account Lead
• Senior Business Analyst
• UX Design Lead
• UX/UI Designer
• Technical Architect
• Project manager
• Senior Developer
• Developer
Project Timeline

Research

To kick off this project, our team and the client's team gathered to establish the cornerstone, outlining improvements sought for their websites.

Persona

Our team interviewed users actively seeking charitable programs and others benefiting from donor assistance.

User Journey

Based on the user persona, we've mapped out their journey to analyze pain points and identify opportunities.

Competitor Analysis

Based on the client's note highlighting features from competitor websites, we conducted an analysis to compare the current site with these benchmarks. This evaluation aims to identify areas for improvement and enhance our website based on industry best practices and user preferences.

Research Synthesis/Goal  

From our research, we've compiled all the results and identified key highlights. Now, we are focusing on addressing these highlighted aspects to enhance our strategies and improve overall performance.
Highlight
Goal
The primary goal is to optimize the website's user experience, making it effortlessly navigable to ensure visitors can easily find the content they seek, with a specific emphasis on prioritizing and facilitating fundraising activities to further engage and connect with the audience.

Sitemap

While concentrating on constructing components, we simultaneously addressed taxonomy and sitemap.

Features and Functions Matrix (FFM)

While concentrating on constructing components, my team members simultaneously addressed taxonomy and sitemap.

01. Build Low-Fidelity Component Library

In approaching this project, we adopted a distinctive kick-off strategy to streamline the process. To save time, we began by collaboratively identifying the features required for each page, leading to the creation of a low-fidelity components library.

Low-Fidelity Wireframes
for Desktop

With all elements in position, I proceeded to craft low-fi wireframes, aligning them with the sitemap and integrating components from the established library.

Design System

Guided by the design direction, I began crafting a component infused with the brand identity, incorporating the rounded style and brand colors. In parallel, I developed a comprehensive design system, categorizing design assets, global components, homepage elements, and versatile components that could be utilized across pages. I organized these systematically in alphabetical order, facilitating easy access for the team to locate specific components.

High-fi Wireframes

After incorporating client feedback into the finalized wireframes, I integrated design assets into each component to create high-fidelity wireframes. Following completion, I developed a clickable prototype for client review and testing, iterating on it to finalize our wireframes before going live.
• Desktop
• Mobile

05. High-fi Wireframes

After incorporating client feedback into the finalized wireframes, I integrated design assets into each component to create high-fidelity wireframes. Following completion, I developed a clickable prototype for client review and testing, iterating on it to finalize our wireframes before going live.

More Works

pizza Nova thumbnail
Pizza Nova
Food Services I Responsive Web/Mobile & Mobile App
Boystown thumbnail
Boys Town
Education I Responsive Web/Mobile
BCH thumbnail
BC Hockey
Sports I Responsive Web/Mobile
Financial horizon thumbnail
Financial Horizons
Financial Services I Responsive Web/Mobile
Oxford
Commercial Real Estate I Responsive Web/Mobile
InterRent thumbnail
Interrent
Commercial Real Estate I Responsive Web/Mobile
LinkedinBehanceInstagram