Upsun digital template: Case study

UI design | 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.

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

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.