ColliMate Space

Kickoff

At the start of the project, my team and I met over Zoom, where we learned that tech startup, ColliMate Space, had prioritized product development and was in need of design expertise to elevate the user experience of their website and dashboard. We started with an existing product and client intake questionnaire. We were then able to define our process steps and deliverables in the redesign of the website and dashboard.

Client Takeaways

From the initial client intake questionnaire, I gathered the following takeaways that would guide my design process through 1 to 2-week sprints:

• ColliMate Space provided the brand keywords of credible, adaptive, and forward-thinking.
• The client wanted users to feel that their platform was automated and transparent, but also scientifically sound and modern.
• ColliMate targeted satellite operators, including highly skilled engineers, many with PhDs, ages 30-50 years old, and company leadership at prospective customer organizations.

Secondary Research

Upon joining the ColliMate Space project, I reviewed the project's goals and documentation in detail to fully understand the company's challenges.

Responsive Analysis

To prepare for the responsive design, I conducted a competitive analysis, comparing platforms like SpaceHub, Aalyria, and Quindar to assess responsive behavior across devices, enhancing my approach to imagery and text adaptation.

Sprint Context

With our scope decided, we divided the redesign into two distinct sprints. Each sprint consisted of Research, Ideation, Design, and Iteration processes. Within each sprint, I had an area of responsibility to limit scope and focus on individual features of the dashboard.

Sprint 1: Desktop Dashboard (3D and 2D Earth Views, Navigation, Ground Station Details)

Sprint 2: Mobile and Tablet Dashboard (3D and 2D Earth Views, Navigation, Ground Station Details)

Research

For the ColliMate Space project, my role was to co-create an intuitive dashboard. My specific focus was to design 2D and 3D map views, map navigation tools, and ground station details.

Ideation

User Story

At the start of the ideation process, my team and I received new direction from the client regarding their refined vision for the web application. Below is my assigned user story, Earth View, which proposed the exciting challenge of designing intuitive and engaging 2D and 3D map views with graphics and interactive tools, such as map visualizations and ground station details.

Low-Fidelity Wireframes

One of the primary challenges was organizing 8 key features on a single dashboard screen, with the map as the focal element, while maintaining organization and clarity. To address this, I developed 2 low-fidelity screen options:

• Option 1: 3D map with a fixed top navigation bar and collapsible panel for ground station details, including a minimalist toggle for a user-centered interface
• Option 2: 2D map with a floating top navigation bar and dropdown for ground station details to provide a seamless, unified view with readily accessible data

Key Takeaways

These designs addressed user needs by simplifying navigation and integrating new layout elements aligned with the client's vision. The adaptable, streamlined layouts bridged the gap between complex data and user-friendly design, reinforcing ColliMate's commitment to accessible, modern data visualization.

High Fidelity Designs

Transitioning from low to high fidelity involved close collaboration with my senior designer and 3 dashboard team members. Our main challenges were displaying all 8 features dynamically, optimizing the navigation, and reducing clicks.

Iterations

The desktop iterations were driven by a combination of client feedback, team discussions, and my own design decisions to address evolving user needs and project goals. The client emphasized the importance of accessibility, usability, and clarity in navigation for satellite operators, prompting adjustments to the color palette and layout. Feedback from the senior designer and team during design sprints highlighted opportunities to refine map views and customization features to improve user control and adaptability. These iterations ensured the design remained aligned with stakeholder expectations while enhancing functionality and user experience.

• Iteration 1 Options (Slide 1 below):
  • Fixed, top horizontal navigation bar with toggles to minimize clicks and collapsible drawer for an adaptable view
  • Vertical, right navigation bar with toggles and a floating pop-up modal for ground station details for an interactive view
• Iteration 2 (Slide 2 below):
  • Fixed, top navigation bar: iterated on map view toggle switch, layer pop-up button, and compass icon for improved clarity
  • 3D Map View: added space image background
  • 2D Map View: created grid background and iterated on the 2D map and gradients to create depth like the 3D map
• Iteration 3 (Slide 3 below):
  • Feature Background Colors: iterated on background colors of the design features using glassmorphic effects, like opacity and background blur
  • 3D and 2D Map Views: finalized ground station indicator icons and orbital paths
• Iteration 4: Final Design (Slide 4 below):
  • Feature Background Colors: revised background colors of the design features to a darker blue to align with mobile and tablet for accessibility
  • View Customization: added "Customize" button to the top navigation bar so that users can customize their map view for more personalized options

Iterations

The tablet and mobile designs went through a series of thoughtful iterations based on a combination of client feedback, team discussions, and my own usability considerations. The client emphasized aligning the tablet and mobile designs with desktop features while maintaining device-specific usability, driving changes in navigation and layout. Feedback from the senior designer and design team highlighted opportunities to improve accessibility and ensure consistency across platforms. These adjustments were made to create a seamless experience tailored to user needs across devices.

• Iteration 1 (Slide 1 below):
  • Tablet: reverted to drawer/pop-up modal for ground station details rather than a bottom modal to align with desktop
  • Mobile: iterated on a two-column option for the ground station details bottom modal to allow for greater visibility of the maps
• Iteration 2 (Slide 2 below):
  • Tablet: added satellite search option to navigation to replace the satellite sidebar on desktop screens
  • Mobile: iterated on background colors of the design features for strong color contrast and accessibility
• Iteration 3: Final Design (Slide 3 below):
  • Tablet: separated the satellite and satellite search buttons to allow users to see their satellite list or search for a satellite
  • Mobile: finalized feature background colors and ensured all buttons met the accessibility standard of 44x44px touch targets
  • Navigation: added the "Customize" button to the top navigation bar and moved the compass and zoom in/out controls to the bottom right for easy thumb reach

Design System

Building ColliMate Space's design system from scratch posed an exciting challenge. My contributions focused on typography, color, and component consistency.

Innovative, Credible Typeface

At the start of the project, I proposed 3 header and body fonts that aligned with ColliMate's forward-thinking, yet credible brand. We selected Maven Pro for headers and Noto Sans for body text. I created responsive text styles and variables for each device, ensuring visual and functional consistency.

Extensive Color Palette

The color palette combines high-contrast tones for accessibility with low-saturated blues, enhancing credibility, usability, and clarity for satellite operators navigating data-intensive environments.

The color palette grew to about 50 colors, including variations in opacity, so one of the most significant challenges was managing this extensive color palette. I diligently led efforts to consolidate color, creating a color reference guide for the team to maintain consistency across the 8 dashboard features. I scheduled one-on-ones with my senior designer to discuss and streamline the palette and held team meetings for alignment. I utilized Figma and Slack for real-time testing and feedback, allowing us to refine elements and create a unified experience. The color reference guides were crucial in enabling our team to iterate with cohesion and clarity, earning me recognition from my senior designer.

Client Handoff

To prepare for the handoff, I conducted a detailed quality inspection of the final designs. Faced with the challenge of conveying my vision and how users would interact across devices, I focused on clear annotations to explain each element. I created tooltips for less intuitive features, like the compass icon and touchscreen zoom functionality, and included essential views, like station availability, weather and interference layers, and customized 3D and 2D map screens.

Lessons Learned

One of my biggest takeaways was the power of cohesive design through consistency in text and color variables and components, especially when collaborating as a large, remote team with varied schedules. I learned the importance and application of giving users freedom and control to customize their view. In hindsight, refining the customization views of the maps earlier would have facilitated additional iterations.

Biggest Challenge

I was excited to explore dark mode and glassmorphism, but adapting the glassmorphism effect to mobile and tablet posed a challenge, compromising accessibility. This was a lesson in function over form and reinforced the need for flexibility when design elements do not scale as envisioned. Considering the bigger picture, using a single background color for features across devices was the best choice for the client, developers, and users, ensuring cohesion and responsiveness. This experience highlighted the importance of prioritizing usability and consistency across devices, an essential takeaway for future projects.

Future Thinking

I faced many exciting challenges due to the complexity of the dashboard, like an extensive color palette. Due to time constraints, I could not reduce the color palette further. In future projects, I aim to regularly review color usage to create a more streamlined workspace and ensure consistency across devices. I will leverage these learnings to optimize workflows, emphasize detailed organization, and foster effective feedback loops.

Final Thoughts

Working in agile methodology enabled me to embrace flexibility during design sprints, rapidly iterate on ideas, incorporate feedback in real time, and adapt the designs to meet changing requirements effectively. My team and I ultimately delivered a user-centered, responsive, and scalable product that will increase investor interest, attract new customers, and boost retention rates.