I'm excited to share the ins and outs of a recent branding project I led for a digital product. Serving as the second installment of a three-part series, I'll be offering in-depth insights into various facets of the branding process. Specifically, I'll explore my approach to creative direction and detail the development of various design deliverables.
📣 This article was written for an educational purpose if you're looking for the outcome focused case study, read the released article here.
Creative direction
What is creative direction?
Creative direction is a crucial aspect of brand development, encompassing the creative concepts that shape a brand's identity. Combining creativity with strategy, it transforms ideas into tangible elements such as advertising campaigns, logos, and marketing materials.
Prior to delving into the specifics of design deliverables, the creative direction phase establishes the overall aesthetic and visual identity of the brand. It sets the tone and direction for all subsequent design work, ensuring consistency and coherence across various elements.
Even before opening Figma…
After the decision was made on our brand name, I conducted a brainstorming session before diving into design tools. While the name "Superwave" ⎯an immense wave of energy that occurs at the confluence of many smaller waves⎯ offered intriguing possibilities for exploration, I had to filter out concepts that might associate us too closely with surfing culture, ensuring alignment with our brand personality.
Diverge
As we began directing the overall brand through brand strategy, two workstreams created: one with the agency and the other with our team (myself and Helen). We each brainstormed ideas independently, then came together to share and further develop them, continuing the process of divergence and convergence. See the example below:
Converge
After putting in considerable effort, the subsequent design deliverables began to closely resemble the Stylescape. The design concepts presented by the agency underwent further refinement and adjustments to better align with our visual language. Our team particularly favored the wave line element, which offered scalability to create a variety of intriguing shapes. While I wasn't particularly fond of the color scheme, which seemed to darken the overall look and appeared overly saturated, yetthe overall direction became clearer. With this progress, it was now time to break down the design into more detailed components for the teams to utilize.
💬 Side story: Working with design agency and conflicts
When I briefed the agency, I believed I had conveyed my vision and strategy. However, while I expected the agency to assist in execution, we came back to the Diverge stage and had another proposal for design direction. Instead of aligning with our brand direction of being "trustworthy, helpful, and personal," we were presented a direction focused on "partying with friends on the beach." I should have been more assertive in expressing my expectation at this point, but I was somewhat confused and chose to trust the team.
A few days later, I received feedback that I was overly attached to the project and not open to the agency's input. Ouch, It was a wake-up call to the possibility of being perceived as stubborn, especially when everyone else was equally invested in the project's success. Feeling the weight of responsibility, I took the feedback seriously. Although it initially left me feeling hurt and upset, the agency manager manager offered a solution. Ultimately, the meeting served as a valuable opportunity for self-reflection and growth. As a result, we were able to better allocate roles for the project's progress.
Design deliverables — FINALLY!
The journey of crafting a visual narrative that encapsulates brand strategy, colors, details, and even the brand name is both intricate and captivating. Throughout each aspect of the process, numerous divergent and convergent processes unfolded, shaping the final outcome.
Color
The colors provided in the initial direction remained abstract in terms of their practical application. It was crucial to determine how these colors would translate into the actual product. Taking into account color accessibility and scales, I explored numerous options until finding the right ones. While the process of investigating accessible colors can be daunting, it is essential for inclusive design. Leveraging Figma plugins, particularly the Supa palette, proved invaluable as it enabled quick generation of color scales. Iterating through different colors to achieve the right ratio for accessibility was time-consuming, but using plugins saved a significant amount of time. This journey will be further explored in a separate article or video. Stay tuned for updates!
Logo
Logo design presents the most challenging aspect of my work. Serving as the face of the company, logos hold significant importance. Despite exploring numerous concepts for both logo type and logo mark, none felt quite right. However, one option stood out to our team: the type "superwave" flowing seamlessly within a wave motif, creating an enchanting and rhythmic visual experience. This design became the primary logo of Superwave. Given our multi-product strategy, it was crucial to have a logo mark that remained visible even in smaller mediums. Thus, we integrated a wave motif into the design to ensure its versatility and scalability.
Typography
While the type suggested by the agency was aesthetically pleasing, I decided to go with Jakarta Plus. The fonts consist of modern and clean cut forms, the x-height dimension slightly taller to provide clear spaces between caps and x-height, and also equipped with open counters and balanced spaces to preserve the legibility at a large range of sizes. Notably, it's a Google font! Jakarta, being the capital of Indonesia, a nation characterized by numerous waves due to its geographical makeup, made this choice particularly resonant. However, we needed to explore other fonts to ensure better readability in the product.
Visual Grammar
In branding, each element should contribute to storytelling and build the brand image. I contemplated how the wave motif from the direction could be repeated to strengthen the brand image. Through varying the scale and positioning of the wave motif, we craft diverse impactful graphics. This creative approach ensures our visual consistency while delivering unique experiences that connect with our audience.
It was truly a delightful journey navigating through various visual elements, grammar, and styles throughout this project! While certain aspects presented significant challenges, reflecting back on the brand guidelines, I can confidently say that every ounce of effort was entirely worthwhile.
That's all for today! Stay tuned for the upcoming articles in this series, where I'll dive into the details of how I worked the website design. 🌼
