Problem
Prospective students and their parents can't find the information they need to trust and be excited about Spotlight.
Before of Homepage
Before of Center Stage Info Page
Website redesign for a local musical theatre academy to increase business credibility and improve website usability. Resulted in 68% improvement to time-on-task in A/B usability testing.
Prospective students want to know if the program is fun and what they’ll learn. Right now, it’s hard to find that information.
As is, the website doesn’t feel professional and the information on the website does not communicate quality of training offered at the school.
Because the website is lacking information and challenging to read, visitors are defaulting to emailing their questions directly, increasing the workload of the principal.
Modernize design to increase business credibility.
Leverage design principles to improve user experience.
Provide more information on the day-to-day experience of being at Spotlight
Many of the guardians using the website are 40+, increasing the likelihood users may have specialized vision and/or mobility requirements.
Updating the logo or website too much could cause confusion. I want to respect the brand and it’s visibility.
I started with some low-fidelity wireframes using more modern web sections and design patterns (Goal 1). These designs featured less text to reduce cognitive load (Goal 2) and better use of typographic hierarchy to improve scanability, usability and accessibility (Goal 2).
I moved forward with designs that favored larger images and put student experience front and center, because this additionally addressed Goal 3.
I iterated on these wireframes until developing a high-fidelity prototype that I then shared with a small pool of users for side-by-side preference testing. Users did feel that the redesign felt more modern and credible (win!), but from a usability standpoint there was a ways to go (whoops).
Users felt disoriented by the large images and did not immediately understand what the website was for.
I focused so intensely on Goal 03, highlighting student experiences, that I strayed too far from common web patterns and forgot the specific needs of the primary user base: guardians/older adults.
Keep content of the original designs but re-organize information to create a more linear hierarchy of informational reveal: (1) What is this business, (2) what are its offerings and then (3) why are they great. This pivot still allows designs to address Goal 03, but better address Goal 02 in the context of its specific user base.
Excellent product design is the result of finding that right balance of choices and features that address cross-functional goals in a balanced way: Don't let one goal overshadow the others and always think in-context of the user-base!
A logo update that keeps the brand recognizable, but modernized.
I created stronger hierarchy with typography and color. This modernizes the designs but also improves the scanability and usability of the website, so gaurdians of prospective students can find the the most important information with less friction.
I created a new section highlighting where previous graduates are now. This provides more context to the caliber of programming the academy offers, therefore building credibility with gaurdians and excitement with students.
I also created a new section that highlights specifically topics that have been taught in the past. This ignites excitement in students because they get a peak at the types of skills they might learn, and guardians get a better idea of 'where their money is going'. This is achieved through visuals instead of long blocks of text, so the information remains quickly discoverable and digestible.
In order to test if the updated UI was truly more scannable (Goal 02), I conducted another round of A/B usability testing focusing on the KPI time-on-task.
On average, users were able to find information 68% faster navigating the newer website version compared with the original.
Early stage testing is so valuable and should be taken advantage of when the resources allow. Even if every design decision is thoughtful and informed, they could still not meet the needs of the end user and require iteration.
Review site with the owner. I'm lucky enough to have a great relationship with the owner of Spotlight and would love to implement this site for them. It would be a great opportunity to work with a real client and dig deeper into building accessible web pages utilizing ARIA, appropriate heading usage and alternative text.
I also purposefully built my site designs following the familiar web sections pattern, so the owner could save costs on the implementation and build their new site using already available web template tools!
