Case Study — YELL
Empowering youth to become leaders and entrepreneurs
Project Summary
Young Entrepreneurship Leadership Launchpad (YELL) is a registered Canadian charity that works with the public education system in Canada. YELL programs help students to transition into their lives after school by mentoring leadership and entrepreneurship skills. My role was to research, design, test the full UX activities and assist in UI activities related to this project. I collaborated with two UX Designers and a UI Designer.
Client
Young Entrepreneurship Leadership Launchpad (YELL)
Jannika Nyberg, Community Manager
Task
Reorganize the information architecture and redesign YELL’s website to increase sign ups.
Platforms
Responsive Web (Desktop, Tablet, Mobile)
Collaborators
UX Designers: Joseph Lee (me), Aaron Cumming, Aaron Gygie
UI Designers: Liam McCullough
Timeframe
3 weeks
Design Methods & Tools
Heuristic Analysis, Content Audit, Survey, User Interviews, Customer Journey Map, Competitive & Comparative Analysis, Affinity Diagram, User Personas, Storyboard, Information Architecture, Feature Prioritization, Dotmocracy, Card Sorting, Sitemap, Design Studio, User Testing, Paper & Digital Wireframes (Sketch), Clickable Prototype (InVision)
OVERVIEW
Introduction
The Young Entrepreneurship Leadership Launchpad (YELL) is a registered Canadian charity that works with the public education system in Canada to empower the next generation of youth through leadership and entrepreneurship. The YELL curriculum is currently available in Metro Vancouver and will be expanding across Canada in the future.
The Opportunity
Despite its rapid growth and helping over 300 students since 2013, the YELL team currently operates with minimal staff and the website is not being utilized to assist their operations. Our team had the opportunity to redesign YELL’s website to allow scalability by creating a better user experience to increase sign ups.
The Challenge
Wide target user groups. The website targets and attracts a wide range of users from the high school students, educators, mentors, guest speakers, parents, and sponsors. The website needed to be structured so that relevant information is presented to the users in order to increase sign ups.
Accessibility. Another challenge that we faced was that as YELL is a registered Canadian charity that works with the Ministry of Education but is not part of the public high school system, there were design restrictions to meet while redesigning the website. In addition, as our primary users were high school students, there were possible legal issues to get in contact with minors.
Project Goals
The project goals that we identified with the client is as follows:
- Decrease confusion and abandonment of the site
- Increase mentor, guest speaker and student sign-ups with forms
- Allow YELL to scale
- Responsive web design.
RESEARCH
Overcoming Research Challenges
The potential users that we identified were public high school students, educators, mentors, guest speakers, parents, and sponsors. Due to the privacy regulation in the public sector, it was difficult to conduct research with the users as we needed to undergo a criminal record check. With the three-week timeline to deliver a redesigned website, it challenged our team to get creative in gathering relevant information without losing validity and reliability.
Annual Report
As a registered Canadian charity, YELL’s annual report is public on their website. The report had survey results of past students, testimonials, alumni interviews and other valuable information that gave us insights to the users. The key takeaways that we attained from analyzing the report were that the students of YELL gained the confidence to feel better prepared for their careers in the future and we wanted to appeal on the new website. As it is a report produced by our client, we were wary of any possible bias and we validated or refuted the statements throughout our own research.
Survey
Taking our annual report data, we formulated questions to conduct a survey. Due to the privacy regulation of the public education sector, we did not have direct access to the users. Alternatively, we reached out to our personal networks and social media groups that consisted of our target users. To make our survey relevant to our user groups, we focused on asking questions about the general behaviours of high school students when looking to enroll in a course. The survey has revealed that high school students:
- Find out about courses through teachers and other students
- Prefers video and blog post format to consume information
- Finds information on the internet using mobile device and computer.
These insights have given us the design direction to create our content with videos, infographics, copywriting and testimonials using responsive web design optimized for both mobile and desktop.
User Interviews
We reached out to our networks to speak to educators, mentors, speakers, sponsors and students in the BC public high school curriculum. Throughout our interviews, we noticed common motivations amongst our user demographic:
- To have a lasting impact and give back to the community
- To become or inspire youth to become leaders and entrepreneurs
- To prepare or help prepare youth for the real world after graduating from high school.
User Journey Map
To get a better idea of what our team needs to improve on, we mapped out the current website experience of potential YELL students. We identified the core pain points and had key takeaways that we will work to address in our design:
- Clear call-to-action (CTA) to help users navigate through the website and sign up
- Progressive disclosure by revealing relevant content effectively
- Minimize abandonment by allowing users to complete the task without having to leave the website.
Competitive & Comparative Analysis
To get a better understanding of how educational charity organizations design their platform to attract their users, our team did a competitive & comparative analysis of the above organizations and found the following commonalities:
- Clear call-to-action
- Financial transparency
- List of board members and the partners are public information
- Annual reports
- Explains the impact of the organization.
We aimed to implement the features to improve the user experience as these elements were familiar to our users.
Affinity Diagram
Affinity diagram helped us make sense of the research data into common themes and topics. Some of the themes that we identified were:
PLAN
Personas
Jacob is a smart, hard-working student who is looking for courses that will help him prepare for the real world after graduating from high school. He wants to be in a safe environment where he can take risks and push himself in order to develop career-related skills. He feels that the current public high school system doesn’t prepare him for the real world and that he needs to prepare himself.
Donna is a small business owner and a mother of a grade 11 student. She is a motivated mother that is invested in the education of her son. She often shares her experience and knowledge with her son as she wants him to avoid the hardships that she had gone through.
Plot Twist
The last names of the two personas indicate that Donna is the mother of Jacob. Their story is as follows…
Storyboard
Donna is a successful small business owner. Her journey as an entrepreneur had lots of setbacks in the past, but she is very proud of what she has achieved.
Jacob comes home from school and he tells Donna about an entrepreneurship and leadership program called YELL that he heard at school from his teacher.
As an entrepreneur herself, she visits the website to see if the curriculum will benefit Jacob.
While navigating the newly designed YELL website, she discovers that there is an opportunity to share her experiences. She is invited to speak to the YELL students about her journey as an entrepreneur.
Donna is very proud of her students and their ability to come up with great ideas and that her son is confident to head out to the real world after graduating from high school.
Information Architecture
Our team came up with an intuitive planning process that addresses multiple target user’s pain points by utilizing various UX tools that we learned at RED Academy. Firstly, we wrote all the features that the users and the clients wanted and performed a feature prioritization exercise.
As shown in the above picture, the must haves was highlighted with the green dot, the nice to haves with blue dot and not needed with no dot. We repeated this exercise for the students, the funders, and the potential mentors or guest speakers. This allowed us to identify which features were important to all users.
Then, we did a series of card sorting exercises to determine which information the users perceived to be relevant when looking to get involved at YELL.
Taking the information identified in the card sorting and the feature prioritization exercise, we categorized the elements into our sitemap. This process allowed us to display relevant information to the users and it helped us to identify the elements to be implemented in our design to create a better user experience.
DESIGN
Design Studio
With the features that we identified in our sitemap, we expressed our creativity by translating our idea into wireframes. Due to the amount of content that needs to be given to our users, our team focused on representing information visually and progressively.
Visual Information
Due to the amount of content that needed to be presented to our users before getting involved, we needed to present information visually whenever possible. As a result, we created graphs and visual elements to provide the necessary information without overwhelming the users.
Progressive Disclosure
In addition to the visual information, we presented the information by progressive disclosure to keep our users from being overwhelmed. This was achieved by segmenting the application form into steps as well as to use drop down menus.
Application Forms
Forms are challenging to fill and users dread filling long forms. To alleviate this pain point, we segmented the application forms on the current website and redesigned it into three sections: basic information, specialties, and inspiration. By redesigning the forms into sections, users are able to experience a sense of progress and accomplishment while filling out the form with the same amount of content as before.
Drop Down Menu
With the limitations with the Ministry of Education to keep the current content, we restructured the content into a drop down menu to provide a personalized experience to our users.
TEST
Funnelling the Users
Despite the information being presented to our users as they saw fit, series of usability tests left users wandering around pages that were not targeted towards them. To guide the users to the appropriate page, we made iterations to our information architecture by funnelling the users to their respective categories at multiple stages of their journey.
CTA from the Homepage
On the homepage, the users can click on the Get Involved CTA where they can identify who they are before continuing their journey. If they are unsure whether to get involved, the users can click on learn More about YELL CTA to view more about what YELL has to offer.
Program Structure Page
At the bottom of the Program Structure page, users are asked to choose based on how they identify themselves. The CTAs help guide the users to their respective pages to get involved.
Navigation Bar and the Footer
At any time of the user’s journey through the website, the users have the ability to navigate to the page of their interest. As each visitors are unique and they are at the different stages before getting involved at YELL, our team implemented the Navigation Bar and the Footer in all pages with the exception of the Forms page to encourage users to complete their application.
Prototype
You heard about YELL through your peers and you want to find out if the program is worth your time. Navigate through the website to find our role to get involved at YELL.
Desktop
Mobile
SUMMARY
The project goal that we identified with the client was to maximize the website’s functionality to help YELL staffs perform their duties efficiently. We completely redesigned the information architecture and the website to capture multiple target users and increase sign ups. Our client was pleased with the new design that it presented the necessary information efficiently using design elements such as the visuals, drop down menu and funnelling techniques. We handed off our design and worked with the web developers to build the website on WordPress.
Key Learnings
- Access to the users is a luxury. I learned that we may not always have the access to research our users directly and that we need to get creative to gain relevant insights. As the process of undergoing a criminal record check in order to get in touch with public high school students was time-consuming, we carefully analyzed the annual report, reached out to our networks, and sent surveys to social media channels to gain relevant data.
- Be open minded. Our team was open-minded to combine the UX processes that we’ve learned. We restructured the information architecture by combining the feature prioritization, card sorting, and the sitemap into one cohesive process and it helped us to solve for multiple user goals.
- Teamwork. Our team had one UI Designer throughout the project. We acknowledged that it was a burden to design a fully responsive high fidelity website in three weeks and we assisted our UI Designer to help finish the project on time. Likewise, after we handed our design to the web developers, we had regular check-ins to help deliver a better product.
Client Feedback
“Joseph was a delight to work with at RED. Professional and kind, Joseph brought clarity simplicity to the project management. A pleasure to work with!”
— Jannika Nyberg, Community Manager