Upsun Navigation Dropdown: Case study
Upsun Navigation Dropdown: Case study
Web design
Design system | Product
2024
Streamlining Upsun's navigation while maintaining brand personality and identity, ensuring a seamless and cohesive user experience.
From Platform.sh to Upsun
From Platform.sh to Upsun
Upsun is a platform built for developers who are ready to redefine what's possible. The rebrand embodies the commitment to empowering developers to build groundbreaking SaaS applications. This lays an opportunity for a design system refresh: one of the key insights gathered from user feedback on the Platform.sh website was the frustration with the mobile dropdown navigation.
Challenge 1: Visual inconsistencies
Challenge 1: Visual inconsistencies
Non-optimal filtering, search bar bugs, lack of personalization, complex onboarding and scheduling processes, as well as visual inconsistencies and a limited social component, hinder seamless user experience.
Non-optimal filtering, search bar bugs, lack of personalization, complex onboarding and scheduling processes, as well as visual inconsistencies and a limited social component, hinder seamless user experience.
Challenge 2: Non-optimal filtering and uncorrelated tags
Challenge 2: Non-optimal filtering and uncorrelated tags
Improving the onboarding process, optimizing personalization within the dashboard and algorithm, implementing a brand refresh and new design system for consistency, and introducing an interactive social component for easier friend discovery, these enhancements address usability challenges effectively.
Improving the onboarding process, optimizing personalization within the dashboard and algorithm, implementing a brand refresh and new design system for consistency, and introducing an interactive social component for easier friend discovery, these enhancements address usability challenges effectively.
Challenge 3: Lack of social engagement component
Challenge 3: Lack of social engagement component
Enhancing user engagement, retention, and satisfaction, leading to improved business performance and growth, and reinforcing ClassPass's competitive position in the fitness market.
Enhancing user engagement, retention, and satisfaction, leading to improved business performance and growth, and reinforcing ClassPass's competitive position in the fitness market.
Pain points
Pain points
Pain points
The main challenge lies in translating the desktop design to tablet and mobile platforms while preserving the hierarchy of content and visual components. Key issues found include maintaining text hierarchy, adjusting colored backgrounds, and defining pressed states. Addressing these details is crucial, as even small changes can significantly improve the clarity and distinction between sections.
The main challenge lies in translating the desktop design to tablet and mobile platforms while preserving the hierarchy of content and visual components. Key issues found include maintaining text hierarchy, adjusting colored backgrounds, and defining pressed states. Addressing these details is crucial, as even small changes can significantly improve the clarity and distinction between sections.
The main challenge lies in translating the desktop design to tablet and mobile platforms while preserving the hierarchy of content and visual components. Key issues found include maintaining text hierarchy, adjusting colored backgrounds, and defining pressed states. Addressing these details is crucial, as even small changes can significantly improve the clarity and distinction between sections.
Competitor analysis
Competitor analysis
Competitor analysis
Should we incorporate a tab option to make content more organized? Or would that create unnecessary clicks?
Would adding constraint boxes for each category enhance clarity? Or create chaos?
Are there potential pitfalls from different viewpoints that need to be addressed?
What are our competitors doing that is working? Or what is not working?
By tackling these questions and considering all perspectives, we aim to create a more intuitive and user-friendly experience across all platforms.
Should we incorporate a tab option to make content more organized? Or would that create unnecessary clicks?
Would adding constraint boxes for each category enhance clarity? Or create chaos?
Are there potential pitfalls from different viewpoints that need to be addressed?
What are our competitors doing that is working? Or what is not working?
By tackling these questions and considering all perspectives, we aim to create a more intuitive and user-friendly experience across all platforms.
Should we incorporate a tab option to make content more organized? Or would that create unnecessary clicks?
Would adding constraint boxes for each category enhance clarity? Or create chaos?
Are there potential pitfalls from different viewpoints that need to be addressed?
What are our competitors doing that is working? Or what is not working?
By tackling these questions and considering all perspectives, we aim to create a more intuitive and user-friendly experience across all platforms.
Is the change actually benefitting to the user experience?
Is the change actually benefitting to the user experience?
Is the change actually benefitting to the user experience?
Can we incorporate our secondary palette to enrich the visual experience?
What about bringing in patterns created for our blog page to enhance visual cohesion across different sections?
By considering these design elements, we can create a more visually appealing and engaging platform that aligns with our brand identity and provides a seamless user experience.
Can we incorporate our secondary palette to enrich the visual experience?
What about bringing in patterns created for our blog page to enhance visual cohesion across different sections?
By considering these design elements, we can create a more visually appealing and engaging platform that aligns with our brand identity and provides a seamless user experience.
Can we incorporate our secondary palette to enrich the visual experience?
What about bringing in patterns created for our blog page to enhance visual cohesion across different sections?
By considering these design elements, we can create a more visually appealing and engaging platform that aligns with our brand identity and provides a seamless user experience.
A new and improved dropdown navigation
A new and improved dropdown navigation
A new and improved dropdown navigation
The new navigation dropdown ensures smoother and more intuitive experience:
A clearer hierarchy and improved prioritization, making it easier for users to find what they need quickly.
Categories are now more intuitive, with streamlined paths to key actions.
High-priority elements, such as the free trial and log in buttons, are prominently placed for immediate access, enhancing the overall user flow and minimizing friction.
The new navigation dropdown ensures smoother and more intuitive experience:
A clearer hierarchy and improved prioritization, making it easier for users to find what they need quickly.
Categories are now more intuitive, with streamlined paths to key actions.
High-priority elements, such as the free trial and log in buttons, are prominently placed for immediate access, enhancing the overall user flow and minimizing friction.
The new navigation dropdown ensures smoother and more intuitive experience:
A clearer hierarchy and improved prioritization, making it easier for users to find what they need quickly.
Categories are now more intuitive, with streamlined paths to key actions.
High-priority elements, such as the free trial and log in buttons, are prominently placed for immediate access, enhancing the overall user flow and minimizing friction.
Enhancing consistency and user experience
Enhancing consistency and user experience
Enhancing consistency and user experience
The rebrand of Upsun highlights the commitment to delivering a seamless and engaging user experience across all platforms. This reimagined design system, allowing effortless transitions between light and dark modes for developers—a feature now implemented across all Upsun webpages, not only enhances functionality but also reinforces Upsun's identity as a forward-thinking, user-centric brand ready to scale.
The rebrand of Upsun highlights the commitment to delivering a seamless and engaging user experience across all platforms. This reimagined design system, allowing effortless transitions between light and dark modes for developers—a feature now implemented across all Upsun webpages, not only enhances functionality but also reinforces Upsun's identity as a forward-thinking, user-centric brand ready to scale.
The rebrand of Upsun highlights the commitment to delivering a seamless and engaging user experience across all platforms. This reimagined design system, allowing effortless transitions between light and dark modes for developers—a feature now implemented across all Upsun webpages, not only enhances functionality but also reinforces Upsun's identity as a forward-thinking, user-centric brand ready to scale.
Thank you!
Thank you!
Thank you!
Challenge 1: Visual inconsistencies
Challenge 1: Visual inconsistencies
Non-optimal filtering, search bar bugs, lack of personalization, complex onboarding and scheduling processes, as well as visual inconsistencies and a limited social component, hinder seamless user experience.
Non-optimal filtering, search bar bugs, lack of personalization, complex onboarding and scheduling processes, as well as visual inconsistencies and a limited social component, hinder seamless user experience.
Challenge 2: Non-optimal filtering and uncorrelated tags
Challenge 2: Non-optimal filtering and uncorrelated tags
Improving the onboarding process, optimizing personalization within the dashboard and algorithm, implementing a brand refresh and new design system for consistency, and introducing an interactive social component for easier friend discovery, these enhancements address usability challenges effectively.
Improving the onboarding process, optimizing personalization within the dashboard and algorithm, implementing a brand refresh and new design system for consistency, and introducing an interactive social component for easier friend discovery, these enhancements address usability challenges effectively.
Challenge 3: Lack of social engagement component
Challenge 3: Lack of social engagement component
Enhancing user engagement, retention, and satisfaction, leading to improved business performance and growth, and reinforcing ClassPass's competitive position in the fitness market.
Enhancing user engagement, retention, and satisfaction, leading to improved business performance and growth, and reinforcing ClassPass's competitive position in the fitness market.