Upsun navigation dropdown

Current work | Web/UI design | Case study

In the process of Platform.sh rebrand into Upsun, lays an opportunity to make innovative changes. One being enhancing the user experience and streamlining navigation while simultaneously keeping Upsun's brand personality.

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

Fun Project | Coding | HTML & CSS | Javascript

You Want It? Come and Get It.

A fun side project exploring the concept of wanting something that we can't have. Why does this happen so often at work or personal life? What about 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 is tailored to capture the essence of urban life, appeal to the youthful spirit of the city and inspire the next generation of trendsetters and innovators.

Personal Project | Branding | Visual System

Sugar Factory Rebrand

Rebranding a sugar factory to emphasize the innovation of dishes and enhance the overall consumer experience involves addressing several core issues, particularly the focus on celebrity endorsements, which is the main inspiration for the interior. To shift this perception, the factory must redefine itself as a modern, innovative culinary hub. This transformation can be achieved by crafting a compelling brand narrative that highlights inventive dishes that utilize their sugar in unexpected and delightful ways. Additionally, fostering deeper consumer engagement is essential. The goal is also to create memories, ensuring that every visit becomes a cherished experience for guests, leaving a lasting imprint of delight and satisfaction.

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.

Current work | Web/UI design | Case study

Upsun navigation dropdown

In the process of Platform.sh rebrand into Upsun, lays an opportunity to make innovative changes. One being enhancing the user experience and streamlining navigation while simultaneously keeping Upsun's brand personality.

Personal project | Mobile app | Branding

HappyHearts

As we enter the digital era. It is easy for the young ones to immerse themselves with a personal device and with that journalling with a pen and paper may be tougher than it used to be. HappyHearts is an innovative tool designed to help little ones, who are fast learners of digital devices, log their daily journals with their personal device to track their progress over weeks or months of sessions. Simultaneously, therapists gain invaluable insights into their young clients' experiences, enabling them to assign activities, assess feelings and thoughts, and continually refine their approach for optimal outcomes.

UI design | Template | Case study

Upsun digital template

The objective is to transition all PDF attachments to clients 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.