SpectrumPlay Landing Page
2024 Design-A-Thon – Design Competition
Work
→
SpectrumPlay Landing Page
Overview
SpectrumPlay is an organization that helps elementary school students learn music using color-coded visual support tools. Unlike traditional apps that focus only on note identification, SpectrumPlay takes a progressive approach, guiding students through music literacy with three levels of difficulty.
For this one-week Design-A-Thon challenge, our team was asked to research and design a landing page that highlights SpectrumPlay’s mission and learning tool. We focused on creating a simple, engaging website that clearly communicates its value to educators, parents, and students.
Tool
Figma
Timeline
1 week
Role
Team Leader
UI Designer
UX Researcher
Team Member
Thanacha Thamma (TL)
Katherine Lanham
Sarah Siyam
Team Member (Left to Right): Thanacha Thamma, Katherine Lanham, and Sarah Siyam
Problem Statement
SpectrumPlay currently lacks a dedicated website to effectively communicate its mission, team, and product. Their existing Weebly page is limited to basic text content, without visuals or interactive elements to showcase how the product works.
Our task was to design a landing page that not only introduces the company and team but also highlights the product’s value through clear, engaging visuals and simple explanations. The goal was to create a professional, user-friendly web presence that reflects SpectrumPlay’s mission and helps potential users better understand how the product works.
Understanding Our Users
To design a landing page that truly meets the needs of SpectrumPlay’s audience, we created a persona based on research and stakeholder insights.
Our Persona
Emily Carter is an elementary school music teacher with 8+ years of experience, passionate about creating an inclusive, engaging learning environment for her students. She’s always looking for new tools that make music more accessible, especially for young learners who benefit from visual support and interactive teaching methods.
What Emily Needs
Personalized learning experiences that adapt to her students' skill levels.
Simple, easy-to-use tools that fit into her busy teaching schedule.
Organized resources she can rely on without extra prep time.
Proven educational value that schools can support and adopt.
Her Biggest Challenge
Emily often finds that digital tools aren’t built with real classrooms in mind. Many focus only on note identification rather than teaching music literacy, making it hard to keep students engaged. She needs technology that works for her students, not something that adds more work to her plate.
How Emily Shaped Our Design
Emily’s persona guided every part of our design process. We prioritized a clean, easy-to-navigate landing page that:
Highlights SpectrumPlay's benefits without overwhelming users.
Clearly explains how the product works with visuals and simple language.
Feels approachable and organized, so busy teachers like Emily can quickly understand its value.
Emily Carter - Our User Persona
Ideation Process
We started the ideation process by getting clear on the client’s goals and who they wanted to reach. Creating a user persona helped us stay focused on what really mattered, making sure every design choice had a purpose. To shape our approach, we looked at other landing pages, pulling insights from best practices and competitor sites. This gave us a solid foundation to outline the key sections and must-have features for the site.
Sketches
We kicked off the design process with quick sketches, brainstorming different layout ideas for the landing page. From the start, I wanted users to immediately understand that SpectrumPlay is all about music. This meant designing a visually engaging first impression, where music cues and vibrant colors made the purpose clear.
One of the standout ideas was the animated logo, where each letter of the word PLAY appeared in a different color, mimicking music notes on a scale. This approach not only reinforced the brand's playful identity but also ensured the music theme was front and center.
These early sketches helped us:
Highlight the product's purpose from the moment users landed on the page.
Visualize content flow across key sections like About, How It Works, and Meet the Team.
Explore navigation structures for easy access to important information.
Identify visual priorities, like the logo animation and product demo.
First Sketches of the Landing Page
Wireframes
Once we had a direction from our sketches, we created low-fidelity wireframes to map out the content and user flow more clearly. These wireframes allowed us to:
Refine page structure: We organized sections like About, How It Works, and Meet the Team.
Simplify navigation: Clear header links ensured users could find information quickly.
Test layout options: We explored light and dark backgrounds to highlight different content areas.
This phase helped us align with the client’s vision before moving into high-fidelity design.
Wireframes of the Landing Page
Low-Fidelity Wireframes
After sketching out our initial concepts, we translated those ideas into low-fidelity wireframes. This phase helped us focus on layout, content structure, and user flow without getting distracted by visual design. Our goal was to create a clear, scannable experience that guided users through SpectrumPlay’s mission, product, and team.
We prioritized:
First Impressions: Placing the logo and hero section front and center, reinforcing the music focus from the moment users landed on the page.
Simple Navigation: Breaking content into digestible sections: About, How It Works, and Meet the Team, so users could find information quickly.
Visual Hierarchy: Balancing text and visuals to make the page engaging without overwhelming users.
These wireframes became the blueprint for the high-fidelity design, ensuring that every section aligned with user needs and client goals.
Low-Fidelity of the Landing Page
Final Thoughts
Since this was a one-week challenge, we prioritized delivering a functional and visually appealing design. However, if we had more time, we would have:
Conducted user testing to gather feedback and refine the landing page based on real user interactions.
Improved information architecture to ensure clearer navigation and content hierarchy.
Iterated further on visual and functional details to enhance usability and accessibility.
This challenge reinforced how much can be accomplished in just one week with the right focus and collaboration. It was a great opportunity to apply user-centered design principles, iterate quickly, and deliver a strong final product under time constraints.
Final Prototype
Given the one-week timeline, our focus was on delivering a functional, user-friendly, and visually engaging landing page for SpectrumPlay. The final design reflects SpectrumPlay's mission while ensuring the site is easy to navigate, informative, and accessible to educators, parents, and students.
Key features of the final prototype include:
Clear Information Flow: Each section: About, How It Works, and Meet the Team was designed to be easily scannable and intuitive.
Music-Focused First Impression: The hero section immediately communicates SpectrumPlay's focus on music education through visuals and concise messaging.
Interactive Visuals: We showcased how the color-coded learning system works, ensuring users could quickly grasp the product's value.
