for Panther
Panther, an online platform for onboarding and paying employees and contractors (now only contractors) in 150+ countries.
Visual & UI Designer
As the single designer on this project, my role encompassed the research, visual design and UI design, and documentation.
Being a startup, Panther had limited brand guidance created and documented. They had contracted a company to create a simple brand package and their initial website design. While this worked for what they needed at the time, the design and guidelines weren’t fully built out for UI or marketing purposes. It also didn’t fully reflect the brand aesthetically.
In general, I follow a typical design thinking process with the end goal of create beautiful and functional designs that perfectly align with user needs and business goals.
I learn about the problem, the users, and the business goals. Once I’ve defined the problem statement and gathered all the data I can from stakeholders and the project brief, I start mapping out a strategy.
I start working on the building blocks of the concept. This could be playing around with color, type, sketching visuals, or experimenting with flows and wireframes. Getting early feedback is essential at this phase.
After gathering feedback from the initial proof of concept, design decisions are applied and prototypes or models are created. This is where the magic happens! Especially in visual design.
Once the design is complete it’s time to reflect on performance and optimize for the future. Learning is the best part of design. It’s where great ideas are tested and improved.
Discovery
Before going to the drawing board, I began the project by learning and evaluating as much as I could about Panther as a company and brand. This included Panther’s current brand guide and messaging, their target demographics, word associations, visual themes, their product, marketing channels, and competitor visuals.
As an outsider at the time (being a new hire) I was able to have a fresh perspective. I dove into any materials I could find about Panther and started a FigJam board with my findings.
After going through company documentation, media channels, website content and visuals I was able to identify three key insights:
Panther had a clear message they wanted to portray, but the visual part of the brand failed to capture the authenticity and care they had. Too much harsh styling with little color, hard corners, and vibrance, especially on their website, were used.
Three different visual styles were being used – the website, the product itself, and marketing materials. The website used a more bold approach with stark black, sharp corners, and red buttons. On the flip side, the product was very soft in its UI and used rounded corners, zero black, and the primary colors for buttons. The marketing materials appeared to try and bridge the gap between the two large platforms, but still lacked some consistency.
Insufficient documentation made it hard to create new UI and marketing materials. The small brand guidelines they were provided by a contractor didn’t allow for much growth. It had no clear styling rules for how to use color or type to reflect the brand. There also wasn’t one central UI kit for a seamless designer/developer hand-off on designs.
Build a comprehensive brand identity and foundation using Panther’s current brand as a jumping off point.
Create a simple design system for their website that would reflect the brand foundations and product.
Map out the process and implementation of the new brand identity and design system on the website.
Document the brand foundation and design system in Notion and Figma for all teams to access.
Brand Foundations
In my process for creating a brand identity and design system, I always like to start with establishing the brand’s voice and how that expresses the business’s goals and how it interacts with the visual aesthetic.
Using the information from my evaluation of Panther, I started exploring who Panther is and mapping it out in FigJam. I wrote down key phrases or impressions I got from the website, marketing, and information I gathered from team members.
Distilling from my exploration map, I broke up the key brand elements into four parts: purpose, values, design principles, and personality. These are the core parts of Panther’s brand and who they are and how they want their users to feel in every brand interaction.
These would shape the future of the brand foundations and the website UI to come.
Brand Foundations
The logo for Panther's brand was already strong and didn't need much change. The main adjustment was in the colors. The original logo used pure black, which lacked personality and could strain the eyes. The product used a dark purple/gray color for the logo, which was better, but it didn't provide enough contrast on non-white backgrounds.
The ultimate color chosen was one I believed would match more seamlessly with the product and provide the most contrast value. A second gray version was also created for instances where the logo needed to be less prominent in the design hierarchy.
Brand Foundations
The initial brand guidelines for Panther laid a solid groundwork for the color palette, yet they lacked depth for a vibrant identity and failed to offer enough variety for UI elements.
In response, I opted to keep the original colors as the primary palette, with some tweaks (swapping black with the new logo color, etc.), and introduce additional colors tailored for UI components and potential illustrations. Each color would then be expanded into 10 shades.
The black would be replaced with the new logo color, and the purple would be adjusted to ensure a higher contrast ratio so it could be used for headlines with good readability.
Brand Foundations
Little was needed for the typography aspect of the brand. The chosen typefaces of Value Sans Pro and Inter were both clean. What was needed was clear usage guidelines for each typeface and how to use them for proper hierarchy. A type scale and established typesets for platforms were needed to ensure seamless consistency.
Brand Foundations
The proposed changes and expansion of the brand guidelines were documented in Figma and sent out to team members and key stakeholders within the company for review before further design.
Brand UI
Color is a key aspect of UI. While you want ensure usability is at the center and follow established patterns, you also want to ensure it expresses your brand in a unique way.
To ensure this, I took the primary and secondary palettes and created a semantic color chart. Purple, as the primary color, was set as our primary action color, while secondary colors, like teal, are used for specific feedback to users in the UI. In teal’s case, it was to indicate success or completion of a task.
I have found that creating a semantic or color roles chart helps create consistency in the UI and speeds up the process as well.
Brand UI
Using the typography formatting and type scale from the brand foundations, I built out the website’s typeset. The typeset included:
H1-6
body headline xs-xl
body xs-xl
body list sm-lg
body link sm-xl
button sm-lg
menu level 1-3
caption
overline
Brand UI
Since Panther had a website created, I had a list of what components were currently in use on the site. From there I created new components using the brand foundations, color and typeset.
As I continued to build out the new design of the website, new components were added as needed.
Components would then be handed off to the the developer.
Results
As the primary design software, multiple Figma files were created to house the brand design system. To ensure that files would be scalable in the future, three separate files were created to house different aspects of the system.
This file would hold the color, typography, logo, and icons. These would be used across design and development projects, beyond the website.
This file would hold all the components used on the website. This would be separate from the product side and would ensure brand consistency and quicker design turn around.
This file would hold the documentation of the entire system. Information on how to use the different brand elements (color, buttons, etc.) would be found here.
Results
Notion was the company-wide documentation platform. Within the platform, I built the Brand Center. It would hold the brand guidelines as well as provide an area for brand application assets (illustrations, user personas, product images, etc.). As the company would grow, the center could easily be scalable.
Results
After the brand foundations was published to the team and the website UI kit created, it was time to start implementing. I laid out the different tasks and things to change on the website and gave them a priority for implementation.
The process would be a series of changes over time instead of a full new brand launch.
Results
Original home page
New home page
Results
Once the new website was launched I worked with our data scientist on continual A/B testing for our main path to purchase pages and our marketing landing pages.
New tests were performed every 2-3 weeks. The previous test would be analyzed and the findings would be applied to the next test.
These pages played a key role in conversions and consisted of our home, demo (example below), pricing, and our explore platform page.
We had several landing pages that would test different content, imagery and different layouts.
Results
Positioning the company to be scalable was a large part of the process. Ensuring that the foundations were laid first before jumping into designing components and website pages was key.
Think beyond the designer or developer. Who will need this information and how can they best understand it?
Brands, and especially design systems, are meant to evolve and change as time passes. It can be easy to get attached to a particular style to an element, but if it’s not working or successful, that gives you an opportunity to learn and test something new that goes beyond your original idea.
c 2024 thehamerdesign.com All Rights Reserved