Upsun navigation dropdown: Case study

Current work | Web/UI design | Case study

Streamlining Upsun's navigation while maintaining brand personality and identity, ensuring a seamless and cohesive user experience.

What is Upsun?

In the process of Platform.sh rebrand into Upsun, lays an opportunity to make innovative changes. What is Upsun? Upsun is inspired by the productive hours between sunrise and sunset. This rebrand highlights the company's commitment to supporting developers in building innovative SaaS applications, all within a dynamic and fully remote work environment. The name Upsun symbolizes the dedication to enhancing productivity and fostering innovation during peak hours of creativity and efficiency. As the company evolves, a refresh in brand, visual language, and UI flow is essential to better reflect Upsun’s core values and to provide a seamless, user-friendly experience for our growing community.

WHY CHANGE WHAT PLATFORM.SH HAD?

A couple of feedback from users regarding the Platform.sh’s marketing website was its unclear dropdown navigation in the mobile viewpoint. Users struggled to distinguish between categories leading to confusion about their respective contents: the white and gray background was not suffice. So what strategies can we implement in this rebranding effort to solve this issue?

HOW CAN WE TAKE THIS OPPORTUNITY TO IMPROVE THE DROPDOWN NAVIGATION

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.

Laying down the foundations and putting ideas on paper

To ensure the success of this transition, we are preserving Platform.sh’s strengths while addressing key usability issues by maintaining the existing framework. Involving developers and the VP of Brand in the kickoff meeting will provide visibility and lay the groundwork for informed decision-making throughout the development process. The objectives and goals for the project were clearly defined in the kickoff, including the scope and specific design considerations.

Questions to consider

Should we incorporate a tab option to make content more organized? Or would that create unnecessary clicks?

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?

Every iteration I ask myself this question, alongside other design making decisions. Can we incorporate our secondary palette to enrich the visual experience, providing a more vibrant and dynamic interface while maintaining brand consistency? What about bringing in patterns created for our blog page to enhance visual cohesion across different sections, ensuring a unified look and feel throughout the platform?

A SOLUTION TO A CLEARER AND MORE EFFICIENT NAVIGATION

Ensuring consistency in design system variables is key allowing seamless transitions between light and dark modes for the developers—a feature that is now implemented in all Upsun webpages.

IT’S THE SMALL TWEAKS THAT MAKES A impactful DIFFERENCE

With these changes, we've achieved consistency and clarity in the transition from one viewpoint to another. Users can navigate seamlessly between different sections while maintaining a clear and legible reading experience. The enhancements ensure that the platform remains intuitive and user-friendly, promoting engagement and making information easily accessible across various viewpoints.

Thank you!

Other work

UI design | Template | Case study

Upsun digital template: Case study

A solution to centralize all product guides, price sheets, sales collateroclients into a digital one pager with Strapi. This strategic shift aims to streamline communication with clients by providing direct access to relevant resources through hyperlinks embedded within the webpage. To achieve this, Upsun plans to develop a distinct HTML template that diverts from the current webpage design, ensuring a fresh and engaging experience while also maintaining brand voice and identity.

Current work | Web/UI design | Case study

Upsun navigation dropdown: Case study

Streamlining Upsun's navigation while maintaining brand personality and identity, ensuring a seamless and cohesive user experience.

Fun Project | Coding | HTML & CSS | Javascript

You Want It? Come and Get It.

A fun side project exploring the concept of yearning for the unattainable: an ice cream cone that is just out of reach.
Click here to enter the playground

Fun Project | Color Psychology | Branding | 3D

On The Inside

Exploring color psychology, revealing how colors evoke different emotional responses: red conveys excitement and energy, blue brings calmness and trust, green suggests health, and yellow and purple evoke cheerfulness and creativity.how altering the color of an iconic product influences consumer perception and brand recognition. Despite experimenting with can colors like blue, green, yellow and orange, the logo's inherent recognizability ensures the brand remains unmistakable. This highlights the strength of Coca-Cola's branding, as the familiar script continues to be associated with the brand, regardless of background color. These insights underscore the significant role color plays in shaping consumer behavior and brand perception.

Personal Project | Editorial | Design System

Local Nibbles

Local Nibbles is a fun side project, an exploration and challenge for myself during covid to solve the problem of how I can make 365 drawings and design within two months, print and produce them into a physical and functional product. Is there a system I can implement where I don't have to draw a unique piece for each day of the year?

An educational calendar centered on Hong Kong's local bites is a way to explore the region's culinary heritage along with the nutritional value of each dish, providing a holistic understanding of the food culture and itsEach month features a different traditional dish, offering detailed information on its origins, preparation, and key ingredients, along with a breakdown of its macronutrients like carbohydrates, proteins, and fats. Each month features a different traditional dish, offering detailed information on its origins, preparation, and key ingredients, along with a breakdown of its macronutrients like carbohydrates, proteins, and fats.

Personal Project | Branding & Marketing | Visual System

NYC Recycle

NYC Recycle's fresh identity captures the essence of urban life, appealing to the youthful spirit of the city and inspire the next generation of trendsetters and innovators.

Personal Project | Branding | Visual System

Sugar Factory Rebrand

Redefining Sugar Factory's identity with a new, compelling brand narrative highlighting their inventive dishes and interactive aspect. This fresh approach emphasizes the unique, playful, and immersive dining adventures. The goal is to create memories, ensuring that every visit becomes a cherished experience for guests, leaving a lasting imprint of delight and satisfaction.

Problem:

Sugar Factory's current brand identity lacks a cohesive narrative and visual appeal, impacting its ability to effectively communicate its unique, innovative dining experiences and appeal to its target audience of young children and families.

Solution:

A new brand narrative highlights inventive dishes and interactive dining experiences, updating the brand identity while maintaining its playful essence. This includes incorporating vibrant colors, playful typography, and shapes inspired by building blocks to align with Sugar Factory's innovative dishes.

Result:

Sugar Factory enhances its brand perception and appeal, creating a compelling narrative that emphasizes memorable dining adventures. The updated logo and brand elements aligns with target audience and business goals.

Personal Project | Interface design | Application

Pulse Motion

Pulse Motion is a revolutionary Apple Watch app that transforms fitness into an artistic experience. This unique app captures the beauty and precision of exercise by breaking down every motion into stunning visual, creating  striking representations of these motions, allowing you to see your workouts in a whole new light. With each movement captured as flowing lines, elegant curves, and dynamic shapes, you'll witness the beauty of fitness like never before.

Personal project | Mobile app | Case study

ClassPass Redesign

Rewiring the new ClassPass experience — a subscription based, one-stop platform focusing on elevating customization, efficiency, and accessibility. It offers an expansive array of workouts and wellness services tailored for all. Why redesign ClassPass? The exploration began with a deep dive into user pain points.


Click here to see the full case study.

Current work | Web/UI design | Case study

Upsun navigation dropdown

Streamlining Upsun's navigation while maintaining brand personality and identity, ensuring a seamless and cohesive user experience.

Click here to see the full case study.

Personal project | Mobile app | Branding

HappyHearts

HappyHearts is an innovative tool designed to support children on their mental health journey. Therapists gain invaluable insights into their young clients' experiences, enabling them to assign activities, assess feelings and thoughts, and refine their approach for optimal outcomes.

Problem:

Children lack effective tools to foster emotional awareness and resilience, hindering their ability to navigate life's challenges with confidence, especially as they increasingly spend more time on digital devices.

Solution:

Introducing an app that provides tailored prompts and exercises to cultivate emotional understanding and resilience among young users, leveraging their digital engagement to promote healthier emotional habits. Therapists can also gain visibility and track their progress effectively.

Result:

Empowering children to develop stronger emotional skills, enabling them to navigate challenges more confidently and promoting overall well-being. Therapists benefit from enhanced visibility to ensure support and optimal outcomes.

UI design | Template | Case study

Upsun digital template

Upsun's new versatile digital templates offers a cohesive design language, ensuring consistency across various communication channels, successfully facilitating effective communication with stakeholders and clients.