How To Design a Creative “About Page” That Stands Out.
Because normal is boring.
When we started Visme, it was all about building a product that people would love using. A product with a personality and a clear mission to help foster creativity. Our team was small at the beginning, so we concentrated on creating the best product possible.
Adding an about page to our site wasn’t at the front of our minds. In the years that followed, our team grew to fill roles that we didn’t need before. Designers, developers, writers, marketers, and more.
One day, I realized that our team had grown to over 30 people from around the world. And we didn’t have a team page or even a company page to present everyone to our user base.
In 2019, we renewed our website and decided to add a company page for the first time.
But we didn’t want just a standard setup with a bunch of photos. It had to be different, it had to be interactive and it had to tell a story.
Our story.
So we got to work.
And this year we launched the Visme company page for everyone to enjoy.
Navigating and Exploring the Visme Company Page
When you first arrive at the page, you are greeted by a cloud with an illustration of a Visme user in the midst of creation. Visme is in the cloud, so the adventure starts there.
As you scroll down the page, you notice that underneath the cloud is a beanstalk with an animated red ball going through a Rube Goldberg machine.
At different stages of the beanstalk, you find information about Visme the tool, Visme the company and a little about our history among other interactive elements.
Behind a cloud, you’ll see our brand mascot floating and waiting for your attention. There’s a button to watch the brand mascot video in a popup window.
Below that, you’ll find our team’s favorite section.
The Illustrated Team Members
In order to give our company page that extra touch, our designers illustrated all our team members.
You could say that we created Vismemojis for everyone!
The team section is accessible through a little button below the section heading. This helps reduce the overall loading time for the page.
Many of our team members are now using their little illustration as their Slack avatar.
Visme the Engine
Below the team section, you reach the bottom of the beanstalk where the Visme team is hard at work. This is the Visme engine, where our team of developers and designers works behind the scenes to help everyone creating up in the cloud.
Our team is 80% percent remote with people all around the world. This visualization brings us all together in one place.
The Story Behind The Design
Did something about our company page look familiar to you? Maybe the beanstalk?
We feel that a great place to find your creative spark is through stories, legends, and myths. The concept of Visme the engine powering a creative powerhouse in the cloud reminded us of the story of Jack and the Beanstalk.
There are no magic beans or giants that eat children in our version, thankfully! What we tapped into is the positive visual quality of the story. A connection between the ground and the clouds. A link between a strong foundation and unbridled creativity.
The Design Process
At inception, the company page was sketched by hand and then traced to Adobe Illustrator. Some of the elements were rendered in 3D, like the clouds and all the floating objects.
We used Photoshop to do a little tweaking and tied in the 2D and 3D elements together. The SVG animated red ball and Rube Goldberg machines on the stalk were animated with After Effects.
To layout the page in full, we used Sketch. Then we built it all with custom HTML5, CSS, and JavaScript. The SVG animations were tied in through the code on the front end to trigger micro-interactions at different points based on the viewer’s position on the page.
Our team consisted of:
- 1 UX Person
- 1 illustrator
- 1 Front-end engineer
- 1 3D animator
Some people have asked why the page isn’t responsive. The concept of the design really wasn’t meant to be viewed on mobile. With true responsive design, we’d have to break pieces of the content on left/right and this would break the flow of the idea.
As a result, we turned off responsive media queries and the user can zoom in to the area desired and still interact with it. With that said, we may explore a more responsive version in the future.
What We Learned From Waiting to Create Our Company Page
I think it was a good thing that we waited. Back when we started bootstrapping Visme, the culture of the company was not as cemented as it is today. The Visme engine wasn’t as powerful and our cloud of creativity wasn’t as populated.
This was the perfect time to bring this page to life!
We learned that teams take time to become consolidated. You have to hire the right people at the right time, and you make mistakes along the way. Only once we knew we had the team that could skyrocket Visme’s growth, did we feel good about telling the world more about who we are through our company page.
This process has also reminded us how much we believe in fostering creativity in people that don’t feel creative. We enjoy inspiring and empowering that spark in everyone that joins our creativity cloud. We couldn’t have done it without them.
