Upsun one pager template

Current work | Template | Case study

The objective is to transition all PDF attachments to clients into a digital one pager. 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 COMPONENTS THAT WE NEED?

Pulling 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 recieves well from the client's point of view?

SO WHAT CAN WE DO BETTER WITH THE REBRAND?

My role as the lead designer of this project is to make sure that the layout is adaptable to a variety of content and work with the content team to make sure we cover all basis. The first step is maintaining the skeleton of what we had in Platform.sh to preserve its strengths, while addressing usability issues. Large part of the process involved working closely with the Director of Brand and developers as well brainstorming and testing layouts and functionalities, laying the groundwork for informed decision-making in later stages of development. Do we want a tab option? What if we add some constraint boxes for each category? Any pitfalls in all viewpoints?

Always starting with black and white

Quick skeleton with the assets we have on the Upsun website, start off basic... but now is it too simple? We want to differentiate from the current webpages.

Ok now what after 100 variations?

Creative block is real. Let's try something that we have never done before. What if we base it off of our light mode? Then we can play with color a little bit more.

Getting hotter! Any pitfalls? Anything we can repurpose?

Looping in the developers in earlier stage so that we know what are the pitfalls when building the template. As a designer it's easy to make an extravagant template but it may take a lot of unnecessary time out of the developers. As for the header graphics, can we repurpose something our team as made similarly for the Upsun blog webpage?

Next step: let's put them together!

Seeing how the header graphics, layout and implementing our secondary palette works all together. Looping in the Director of Brand and rest of the design team for feedback, whether the visuals are distracting the content itself.

What if we split into two templates?

Since we have two categories of these digital booklets: one for marketing purposes and another for information on our product and company, why not have both variations? The campaign template is for when we have visual components that will be used to elevate the content and drive engagement meanwhile 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.

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!

My Work

Fun Project | Coding | HTML & CSS | Javascript

You Want It? Come and Get It.

Exploring the concept of so close yet so far, does that make you feel uneasy that you can't reach it as it melts right in front of you?
Click here to enter the playground

Fun Project | Color Psychology | Branding | 3D

On The Inside

A fun side project showing how we view color, especially when it comes to products and brands. Experimenting with coca cola cans, what does each person see if they weren't just red?

Personal Project | Editorial | Design System

Local Nibbles

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.role in daily life. 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 | Campaign | Visual System

NYC Recycle

Recycling can be challenging when access to recycling bins is limited and public awareness is low. This campaign aims to make recycling more straightforward by providing clear instructions on what can and cannot be recycled. It also helps the community locate the nearest recycling bins to encourage and facilitate proper recycling for a more sustainable environment.

Personal Project | Branding | Visual System

Sugar Factory Rebrand

Rebranding a sugar factory to focus more on the innovation of the dishes involves emphasizing the creative journey from farm to table, showcasing the evolution of classic desserts into modern, imaginative treats. The new brand story could highlight how unique dishes and inventive flavors can bring people together, fostering a sense of community and shared experiences. Through this rebrand, the factory can transform into a destination where tradition meets innovation, inspiring people to connect over delightful food experiences.

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. Elevating customization for each user, efficiency and accessibility by offering an expansive array of workouts and wellness services tailored for all.

Current work | Web/UI interface

Upsun navigation dropdown

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

Personal project | Mobile app

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.

Current work | Template | Case study

Upsun one pager template

The objective is to transition all PDF attachments to clients into a digital one pager. 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.