Starburst - UX Internship

At-a-Glance

This case study is presented in Dark Mode as a nod to the capstone project I led during my summer internship at Starburst. Over the course of three months, I focused on designing and implementing Dark Mode for the Galaxy platform, taking it from research and ideation to collaborating with engineers and handing off the final design for development. Throughout the process, I conducted user research, led usability testing, and ensured the design aligned with accessibility standards and user needs. As a senior, this experience was invaluable for my growth, providing hands-on learning and meaningful connections. I’m excited to share the journey and impact of this project with you.

Timeline

Three Months

Emphasize

  • Dark Mode Goal

  • Understanding User

  • Pain Points

My Role

UX Design Intern

Capstone Project

Dark Mode

Platform

Figma

Dark Mode - Problem Statement

The current Galaxy UI lacks a Dark Mode, leading to significant eye strain and discomfort for users working in low-light conditions. The bright interface can be particularly harsh during extended use, reducing productivity, increasing fatigue, and negatively impacting overall user satisfaction. My goal here was to design a Dark Mode that enhances visual comfort while maintaining the interface’s usability, accessibility, and consistency with the Galaxy brand.

Dark Mode - Solution

To address user discomfort and improve overall satisfaction, we developed a Dark Mode for the Galaxy UI that prioritizes visual comfort in low-light environments. The design focuses on optimizing contrast ratios, maintaining readability, and preserving the brand’s visual identity. Through user research, iterative testing, and close collaboration with my team, developers, and engineers, the final product offers users the ability to switch between light and dark modes, enhancing both productivity and user experience.

Process

Persona - Mykhailo, Starburst Engineer

Balancing Brand Identity and Cohesion

While accessibility and usability were top priorities, it was also essential to maintain a cohesive look and feel that matched Starburst’s brand identity. The Dark Mode design needed to feel like a natural extension of the existing design system, staying true to the Galaxy product’s personality. Key considerations included:

  • Preserving Brand Colors: Retaining Starburst’s signature colors as accents while ensuring they met accessibility standards on dark backgrounds.

  • Harmonizing with Light Mode: Ensuring consistency between light and dark modes by maintaining a unified design language, from typography to iconography.

  • Creating a Unique Galaxy Feel: Designing a Dark Mode that still felt distinctly like Starburst Galaxy, with the same energy and professionalism, just in a darker, more comfortable format.

Implementing Dark Mode: Seamless and Intuitive Toggles

Once the color palette was finalized, the next challenge was to integrate Dark Mode in a way that felt natural and user-friendly within the existing Galaxy interface. The goal was to allow users to easily discover, preview, and switch between themes without disrupting their workflow. This section details the design and implementation of the Dark Mode toggle and the steps taken to ensure a smooth and intuitive user experience.

Designing the Toggle

To make switching themes effortless, I designed a toggle that is integrated directly into the user dropdown menu—a familiar location for Galaxy users where they typically adjust their profile settings. The design considerations included:

  • Familiar Placement: Placing the toggle in the user dropdown, which users frequently interact with, ensured easy discovery and access.

  • Instant Feedback: The theme changes instantly when the toggle is clicked, giving users immediate feedback and allowing them to see the new mode in real-time.

  • Visual Clarity: The toggle design needed to be clear and simple, using universally recognizable icons (e.g., sun and moon) and straightforward language (“Light Mode” / “Dark Mode”).

  • Visibility: Placing the toggle in a high-traffic area (the user dropdown) ensured it would be seen and easily accessible. The use of simple, recognizable icons and clear labels further enhanced usability.

  • Ease of Use: The toggle interaction was designed to be intuitive, requiring minimal clicks and offering immediate visual feedback, which reduces friction and encourages exploration.

  • Integration: The toggle and pop-up were designed to fit seamlessly into Galaxy’s existing design system, maintaining consistency in style, typography, and iconography while introducing the new feature.

Ideate and Define

  • Brainstorming

  • Persona

  • Problem Statement

Prototype

  • Accessibility Research

  • Color Palette

  • Implementation

Reflect

  • Testing

  • Feedback

  • Final Thoughts

💡

🤳🏿

🔍

🌚

Empathy Map

Research and Mapping: Understanding our User

To create a truly effective Dark Mode for Galaxy, I started with a foundation of research. I conducted a competitive analysis to explore how other platforms implemented Dark Mode, identifying best practices and common pitfalls. This helped set a clear direction for what would work best for Galaxy’s specific needs and user base.

User Interviews and Collaboration with Engineering

Given that Galaxy is used by our engineers and developers, I knew it was essential to involve these key users from the start. I conducted several interviews with Mykhailo, an engineer at Starburst who uses Galaxy daily. My goal was to see the product through the eyes of someone who interacts with it constantly and knows it inside and out. We discussed everything from his favorite Dark Mode implementations to websites he found frustrating. This dialogue provided crucial insights into real user pain points and preferences, helping to ensure the design would be practical and effective.

Mapping the User Experience

The insights gathered from my conversations with Mykhailo were translated into three core research tools:

  • Persona: This captured key aspects of the user, including their background, goals, motivations, and daily workflow, helping to keep the user’s needs at the forefront throughout the design process.

  • Empathy Map: This provided a deeper emotional understanding, helping to articulate what the user might be thinking, feeling, saying, and doing while interacting with the product, building a more empathetic connection to their experience.

  • User Journey Map: This visualized Mykhailo’s interaction with Galaxy, highlighting pain points and opportunities where Dark Mode could improve his experience, especially during prolonged use in low-light environments.

The Importance of Research and User-Centered Design

This extensive research phase allowed me to build a design that wasn’t just visually appealing but also deeply connected to the real-world experiences and needs of Galaxy users. By grounding my design in both practical insights and empathetic understanding, I was able to create a Dark Mode that aligns closely with user preferences, improving comfort, usability, and overall satisfaction.

Designing the Dark Mode Color Palette

Creating an effective Dark Mode wasn’t just about flipping colors - it required carefully selecting a palette that would be visually comfortable, brand-aligned, and fully accessible. This section outlines the process of researching, testing, and refining the color palette to ensure it met both user needs and Starburst’s current brand identity.

Early Palette Exploration and Iteration

After gathering initial insights, I moved into the exploration phase, where I tested multiple palettes across different components of the Galaxy platform. This phase involved experimenting with:

  • Dark Background Tones: I tested various shades of black, gray, and navy blue for the background. While initially leaning toward a more blue, we ultimately felt in group user testing that this option did not offer a significant dark mode feel and was not up to date to current trends.

  • Accent Colors: Starburst’s brand colors had to shine through, even in Dark Mode. I tested vibrant hues of the brand’s signature pink, teal, and purple to ensure they stood out against the dark backgrounds but still met contrast accessibility guidelines.

  • Text and Icon Colors: For readability, I experimented with light text colors, including soft whites and subtle off-whites. Ensuring the right contrast with the background while preventing stark visual fatigue was critical.

Each palette went through multiple iterations and continuous testing. I applied the palettes across various components—buttons, navigation bars, data tables, and form fields—and gathered feedback from both users and internal stakeholders. This process helped refine the design and ensured all components worked harmoniously within the Dark Mode environment.

Here are a few of the early palettes and screens I explored:

Trial and Error with Color Palettes and More Research

As I moved forward with these early color palettes, it became clear that a few iterations weren’t working as well as expected. The process involved some trial and error, which led me to the decision to revisit my research and refine the palette for better alignment with user needs and the Galaxy platform.

Initial Considerations and Early Setbacks

Key takeaways from my initial research included:

  • Contrast and Accessibility: I initially focused on ensuring readability by maintaining strong contrast levels, aiming to reduce eye strain without compromising visual clarity. However, the first few iterations of the color palette had some issues with text blending into the background or accent colors being too harsh.

  • Avoiding Pure Black: One of the primary insights was the benefit of using grey and lighter hues instead of pure black for backgrounds, which reduces the harshness of the interface. Yet, my early attempts at implementing this idea fell short—some of the tones felt flat and didn’t provide the rich, immersive experience I was aiming for.

  • Accent Colors: I aimed to use vibrant accent colors that popped against the dark backgrounds while staying true to Starburst’s brand identity. Unfortunately, in initial tests, the accents often clashed with the overall design or were too over or underwhelming, detracting from the user experience.

Going Back to the Drawing Board

After reviewing the initial iterations and gathering feedback, it was clear that the early palettes weren’t hitting the mark. I went back to the research phase, diving deeper into how successful platforms achieved balance in their Dark Mode designs and how I could refine my approach to better align with both user needs and Galaxy’s existing design system.

I expanded my research, looking at the latest trends in Dark Mode design for more inspiration. This included:

  • Contextual Contrast Ratios: Researching how platforms like GitHub and Slack adjusted contrast ratios dynamically for different elements to ensure readability and reduce visual strain, especially in extended use cases.

  • Color Psychology in Dark Mode: I explored how certain colors evoke specific emotions in a dark setting and learned that overly bright accent colors can become distracting when paired with dark backgrounds.

  • User Preferences: I consulted with engineers and developers who regularly use Dark Mode, gathering insights about their preferences, the types of colors they find easiest on the eyes, and the challenges they’ve encountered with other platforms’ dark themes.

Refining the Palette with Research-Based Adjustments

Armed with a deeper understanding of the nuances behind Dark Mode, I refined the color palette by integrating these insights:

  • Background: I opted for a richer, darker gray that felt more immersive without being too flat. This provided a better foundation for the interface and made the overall experience more engaging.

  • Accent Colors: Based on feedback and further research, I toned down the accent colors to achieve a more subtle yet effective contrast. This allowed the accents to stand out without being overwhelming or detracting from the overall experience. The final accents were more harmonious with the background while staying true to Starburst’s brand.

  • Text and Component Colors: I softened the white used for text to reduce visual strain, landing on an off-white that remained readable and visually appealing. For interactive components like buttons and forms, I adjusted their colors to improve clarity and contrast against the dark backgrounds.

Through continuous testing and iteration, this refined palette met both accessibility and aesthetic requirements. I conducted usability tests with internal teams, gathering feedback that confirmed the new color choices worked well within the system while offering a comfortable user experience.

Conclusion: A More Refined and Effective Palette

The process of developing the final Dark Mode palette was not without its challenges, but through trial and error, research, and continuous refinement, I was able to create a design that balances accessibility, user comfort, and brand alignment. The journey taught me the importance of iteration and the value of going back to the drawing board when initial attempts fall short. Ultimately, the final palette was a result of combining research-based decisions with user feedback, ensuring that Galaxy’s Dark Mode is visually appealing, functional, and comfortable for extended use.

Testing Across Components and Screens

Once the final palette was selected, I tested it across a variety of screens and current components from our design system, considering factors like button visibility, text readability, and overall harmony within the interface. This phase involved:

  • Component Testing: Applying the palette to buttons, form fields, dropdowns, and tables to ensure each element remained distinct and visually appealing.

  • Screen Simulations: Reviewing how the color choices played out on high-traffic screens such as dashboards, data visualization panels, and settings pages.

  • WCAG Compliance: Running contrast checks on all combinations of text color, background color, and interactive elements to confirm they met the Web Content Accessibility Guidelines (WCAG) for contrast ratios.

Conclusion and Impact

Working on the Dark Mode project for Galaxy was an incredible learning experience that left a lasting impact on both my professional skills and personal growth. Throughout the summer, I gained a deeper understanding of UX design, product development, and the importance of cross-functional collaboration.

The Power of Collaboration and Iteration

One of the most valuable aspects of this project was the constant collaboration with different teams. Weekly meetings with the UX team gave me the chance to showcase progress, gather feedback, and even have impromptu design jams in Figma. These sessions were some of the highlights of my internship—bouncing ideas off each other, refining designs in real-time, and exploring creative solutions together was both fun and incredibly rewarding.

Meeting regularly with the engineers and developers was another key aspect of this process. Seeing the Dark Mode design evolve through various iterations based on technical feasibility and user needs was eye-opening. The back-and-forth collaboration taught me how to balance user-centered design with implementation constraints, while still delivering a cohesive and polished product.

Hand Off

As the project neared completion, I spent my final week preparing the dev-ready files to ensure a smooth handoff. Creating detailed specifications, organizing assets, and working closely with Borys, the lead engineer, to align on implementation was a fulfilling culmination of the entire process. Knowing that the Dark Mode feature would be part of an end-of-year live release felt like a major accomplishment and validated all the hard work and collaboration that went into it.

Presentation and Recognition

I also had the chance to present this project during an internship showcase Zoom, where I walked through the design journey, from research and ideation to final implementation. Receiving positive feedback from various teams was a proud moment, reinforcing the value of this work and the impact it would have on Galaxy users.

You can view my presentation deck here!

Reflection

This internship was more than just a series of projects—it was an opportunity to connect with an amazing team, learn from experienced professionals, and gain real-world experience that will shape my future career. The mentorship, collaboration, and creative freedom I experienced at Starburst made this summer unforgettable.

While the Dark Mode project was a highlight, and my capstone, it was far from the only work I did during my time here. I also had the chance to:

  • Update the Filter System: Improving the usability and efficiency of Galaxy’s filtering functionality.

  • Redesign of Starburst Academy Search: Contributing to a more engaging and user-friendly experience and search for learning resources.

  • Conduct Site Audits: Performing in-depth audits on multiple pages to identify pain points and optimize user flows.

I’m excited to share these projects soon, so stay tuned for more case studies showcasing this work!

Wrapping Up

This internship was an incredible journey that provided not only valuable professional experience but also meaningful personal growth. I’m grateful for the people I met (a special shoutout to Lauren, Ali, Nick, Bryan, Jina, and Roya, my awesome UX Team), the challenges I tackled, and the skills I gained. Working on projects like Dark Mode and collaborating with such a talented team was a truly enriching experience, and I can’t wait to see where these new skills take me next!