Role
Lead Visual Designer.
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.
