Upsun digital template

UI design | Template | Case study

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.

What are the challenges that we are trying to solve?

Template flexibility and developer ease
How to translate current PDF one pagers (example below) and create a digital template that is flexible for varying content length and components? And how can we make developers' lives easier without having to customize every piece?

Differentiation from the webpage
At the end of the day, it is not part of the Upsun marketing website. How do we create a user friendly and accessible digital one pager that effectively communicates information and resources to clients?

The consistency with brand identity
How do we ensure that the new one pager maintains Upsun’s brand voice and identity while presenting a fresh and engaging experience?

SO WHAT CAN WE DO BETTER WITH THE REBRAND?

The solution to the main challenge of template flexibility and developer ease is to create a single template that developers can build once for Strapi. This solution allows stakeholders or the content team to easily insert the bits and pieces themselves, essentially mix and matching the components. This approach ensures a more efficient workflow and enhances the user experience by simplifying content management.Pulled in our current PDFs, do we see any patterns? Could we keep the skeleton and reinvent on top of that? Are there any limitations within Strapi? What is the dev's workload for the upcoming quarter? Who should be looped in outside of our team? What receives well from the client's point of view?

Creating the Building blocks

To create the building blocks for our digital one-pagers, first of all need to compile a comprehensive list of all components currently used in our PDF one-pagers. Collaborating with the content team, we will identify and create the necessary assets. The next step is to develop modular building blocks that stakeholders can easily use. We'll start by leveraging the grid system from Upsun's website as a foundation, with an initial focus on organizing and optimizing the content itself.

Uh oh.

Stumble upon roadblocks with the design direction after laying out the components that we needed. Stakeholders were giving me different feedback and directions. The design process went one step forward and five steps back, resulting in confusion to what the objectives and goal was for the project.The oversight on my part was not involving all relevant design team members, stakeholders, and developers early in the kickoff and keeping them updated on our Slack channel. This would have helped lay the groundwork for informed decision-making in later stages of development and shaved off weeks of discussion.

Getting hotter! Any pitfalls? Anything we can repurpose?

After a meeting with everyone involved. We got clear and written objectives, scope and goal of the project. The second challenge was differentiating from the Upsun marketing website, which is in dark mode and quite simple and content focus (as it should!). So what will it look like if we do the opposite? Now this is something different from the Upsun webpage!

Next step: let's put them together!

The gradients are showing promising progress! How about leveraging our blog thumbnail and header graphics to reinforce our brand identity? This approach not only repurposes existing assets but also addresses the third challenge of maintaining Upsun’s brand identity while ensuring continued reader engagement.

What if we split into two templates?

The decision was made to shift away from using header graphics to avoid potential distraction. Instead, we opted for a simpler approach, utilizing color blocks from our secondary palette. This places a stronger emphasis on our UI visual assets alone. Additionally, we incorporated subtle details found in our promotional materials, such as colored outlines, solid black drop shadows, and gradient drop shadows.Given that the template allows for mix-and-match flexibility, where not all one-pagers will have the same structure and layout, creating visually diverse components was essential. It required imagining multiple combinations and considering potential pitfalls associated with this approach.

The gradient was too good to give that up

Given that we have two distinct categories of digital booklets—one for marketing purposes and another for information on our product and company—why not create variations for both?The campaign template above is ideal for situations where visual components are utilized to elevate the content and drive engagement. While the product and company template places a heavier emphasis on textual content related to the product or company. It may include detailed descriptions, features, benefits, specifications, and other relevant information. This template prioritizes clarity, organization, and thoroughness to effectively communicate essential details about our products and company offerings.

Solving the puzzle

Now with reusable building blocks, developers can construct customized one-pagers without the need for extensive customization for each piece, thus simplifying their workflow and saving time. The template also successfully  differentiated from Upsun’s market webpage and maintained consistency of Upsun's brand voice and identity while delivering a fresh and engaging experience was achieved by developing a distinct design guide.

CUSTOM LINKS FOR CLIENTS RATHER THAN ATTACHMENTS

Instead of dozens of attachments floating around in finder, google drive or desktop, now we have streamlined all Upsun PDF attachments. Sales and the Agency Partner team can now send custom links to their clients.

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.