Role
Lead Visual Designer.
Formant &
Personal Project
Mobile Application
Design ticket
Our challenge was to update the website hero image to match Formant's new brand message, using subtle product shots to give customers just enough insight into how we help.
Design thinking
Definition:
Identifying the problem
We had a lot of questions right from the start.
What do we want to show to customers and users?
Who are our main target segments and what will drive conversion
How can we visually communicate our value while keeping the design clean and engaging
Definition:
Identifying the problem
We identified our target audience by analyzing who currently uses our product and who we aim to reach—small businesses versus enterprises. We chose to focus on small businesses first, as they aligned with our current market and goals. To gain a competitive edge, I conducted a competitive analysis to understand industry trends and strategize ways to attract more traffic to our platform.
Even though we planned to target enterprises later, focusing on our existing audience made the most sense. When we shifted to an enterprise focus, we redesigned the website to better reflect this change. [Click here] to see the enterprise website I contributed to.
Design thinking
Develop :
Finding the solution
and communication
During this stage, we had a clear understanding of our target audience and held discussions with the marketing team and CEO to determine which aspects of the product to highlight. We decided to showcase one of our key features—teleoperation—along with our API+SDKs and analytical tools.
With this in mind, I developed three strong concepts to visually tell the story of how companies can use these tools to grow their business and scale.
Design thinking
Deliver :
Finding the solution
and communication
After reviewing the three strong concepts, we decided to go with a motion graphic combined with hero text to tell the story of Formant as a business and what we offer companies. I then created a high-fidelity design of the chosen concept and built a prototype to help engineers understand its functionality and interactions, including the timing of the loop to ensure the message was clear without users missing it.
When the engineers were tied up with other work, I took the initiative to find an alternative solution by creating the motion graphic in After Effects and exporting it as a Lottie file for the web designer to easily implement.
Design ticket
Formant hero image animation for web
Designed a motion graphic hero image that captured attention instantly, showcased our product’s value and functionality, and drove engagement by turning complex concepts into an impactful, visually compelling story. Later decided to change the real image shot to an illustration shot to fit the whole theme.
Click view link to see the final version.
Impact
As part of Formant’s 2022 website redesign, I designed the hero image to enhance brand presence, engage visitors, and drive conversions. The design focused on visually communicating Formant’s cloud robotics capabilities, creating an intuitive and modern first impression.
Strengthened brand identity and credibility in the robotics industry.
Improved user engagement by making complex data feel accessible.
Contributed to increased platform growth and customer interest.
Design exploration
Design gist
I created a motion graphic of the store’s storefront to visually indicate whether it's open or closed for business. The animation transitions smoothly between open and closed states, using simple yet effective visual cues like a glowing 'Open' sign or a gently closing door to make it clear to viewers at a glance.
Design gist
I conducted a quick motion study to better understand the principles of motion and how they could be applied to the design.
Design gist
I created a motion graphic to support our whitepaper, illustrating key insights and concepts in a dynamic, engaging way. The goal was to make the content more digestible and visually appealing, driving conversions and sparking interest in how our solution can help businesses scale.
Design gist
I experimented with motion design techniques by creating an animation of a camera flash. The animation captures the quick, dynamic motion of a flash going off, using smooth transitions and lighting effects to highlight the moment in a visually striking way.
