NCEL School Heroes
Celebrating the work of inspiring school employees across the state of North Carolina.
The North Carolina Education Lottery's (NCEL) NC School Heroes program provides North Carolina residents the opportunity to celebrate educators and school employees who impact the lives of their students every day. Alongside Wunderman Thompson, NCEL’s creative advertising firm and BCW’s sister agency, our team provided ongoing PR support from the nomination period through the program's launch. As part of this support, we were tasked with creating a supplemental infographic to be shared digitally with contacts in the media.
Collateral, Infographic
2020
The following was developed as part of my work with BCW on behalf of the North Carolina Education Lottery (NCEL). All intellectual property rights remain with the North Carolina Education Lottery.
UX/UI CASE STUDY
UX/UI CASE STUDY
Redesigning the School Heroes Landing Page and Voting Platform
The purpose of this project was to learn how to critically evaluate the usability of the NC School Heroes website, identify areas of concern, then deliver a professional usability report and updated design with recommendations on how the product can be improved.
The School Heroes program is a part of the NC Education Lottery's support of public education in North Carolina, which provides a large part of the money raised by the lottery, $385 million, to support school staff at public schools. 10 School Heroes composed of both educators and staff members have the opportunity to receive awards of $10,000 for themselves and $10,000 for their schools. NC residents are encouraged to nominate their School Hero and vote at ncschoolheroes.com between February 3 and March 15.
I wanted to see how I might create a responsive, web-based (desktop) product for the NC School Heroes program focused on amplifying voter participation and creating social media buzz around the program.
This project was concepted and completed on an individual basis as an exploratory exercise.
FOCUS + RESEARCH
I sought first to gain insight into how users were currently using the website to submit nominations and cast votes, how the nominees were searched and displayed, and how users were prompted to share their nominee(s) across social media. I accomplished this through a design review, persona building and use cases.
DESIGN REVIEW
Overall, the ncschoolheroes.com website is well-designed and easy to use, with defined sections and a visually appealing layout. However, there are some areas where the user experience could be improved, such as the voting process and the mobile experience. By addressing these areas, the website could be even more effective at engaging users and encouraging participation in the School Heroes program.
PERSONAS
In accordance with the program’s existing target audience, I developed the following personas including educators/staff members currently working in NC public schools, parents of NC public school students, and current/former students. A strong focus on understanding the user and their motivations will be vital to the success of this product.
-
The program encourages teachers and staff members to nominate themselves and each other;
-
Parents to nominate teachers and staff members who’ve made a difference in their student’s life;
-
Current/former students who’ve been positively impacted by a current teacher or staff member.
USE CASES
I then built uses cases informed by the above personas and design review.
LOW FIDELITY PROTOTYPING
The low fidelity prototype explores the above use cases for submitting nominations, voting for nominees, and encouraging users to share and promote the School Heroes program on social media.
-
I chose to first create a prototype for the use case of submitting a nomination. Creating a flow for receiving nominations before that of collecting votes provided valuable insights into how the voting platform should be designed and optimized for user experience. I wanted to focus on streamlining the process by designing an inviting layout with defined hierarchy and can’t miss call to actions. To avoid duplicate nominations, users are prompted to first search the existing nominees before being allowed to submit a new nomination. The interactive vote toggle and daily vote count could help keep participants engaged and increase the likelihood of them returning to cast more votes.
-
For the second use case of voting for an existing nominee, I knew that this particular flow would involve multiple options. It required exploring what a user would encounter when they want to learn more about the nominee and submit a vote for that nominee versus learning more about a nominee in order to promote their profile on social media for additional votes. Understanding both helped inform the functionality of the high fidelity mockup.
-
There is a limit of 10 votes per day, per user. For the final use case where a user has reached their daily vote limit, users are encouraged to set a reminder to return the following day to vote again. In place of voting, users will also be encouraged to share their School Hero’s profile on social media at this point. I knew this additional call-to-action was needed to avoid drop offs and encourage continued engagement with the platform and overall program
BRAND IDENTITY
The combination of bright blue, yellow, and navy in the School Heroes program's logo and branding create a sense of professionalism, passion, and pride that reinforces the program's commitment to supporting and celebrating North Carolina's public school employees. The typography features a Slab Serif / Sans Serif pairing of Odudo Slab and Source Sans.
-
The medium blue color is often associated with intelligence, wisdom, and trustworthiness. By using this color, the School Heroes program conveys a sense of expertise and professionalism that is essential in the education field.
-
Yellow is often associated with energy, positivity, and warmth. This color represents the enthusiasm and passion that many educators bring to their work, as well as the positive impact they have on their students.
-
The dark blue, similar to shade used in the North Carolina state flag, reinforces the program’s connection to the state and its sense of pride.
The following style guide and mockup were created in Figma.
HIGH FIDELITY PROTOTYPE
After a few adjustments to the lo-fidelity screens, I incorporated the program’s visual identity to create a high fidelity version complete with clickable prototype.
DESKTOP & MOBILE
FURTHER CONSIDERATIONS
Both the desktop and mobile products offer users the opportunity to cast votes and share information about their nominee and the School Heroes program. While the above flows have been developed for the high-fidelity mockup, further exploration is needed to determine whether users will need to create a profile in order to nominate, vote, share nominees and track daily voting. Determining whether users will need to provide personal information to keep track of their participation in the program will be .
One of my main motivations for this project was finding additional ways to create buzz around the School Heroes program. As an added feature to enhance the voting experience, I might consider:
-
Creating an option for voters to cast additional votes simply by sharing their vote on social media.
-
Creating branded “I voted for my NC School Hero” stickers for users to personalized selfies across social media.
-
Integrating the program voting with social media so that fans can tweet their vote by using a specific hashtag and their nominee’s name.
This project was concepted and completed on an individual basis as an exploratory exercise.