Late last year, we decided it was time to take our website to the next level by aligning it with the company’s new enterprise approach.
Before we started, a thorough research was required in order to understand the new target and prospects of the company. Having clarified everything with regard to said approach, a challenging, but really fun design journey began. Finding the correct path was not easy; therefore, a lot of iteration through the different look-and-feel versions was necessary, until we finally crafted a style aligned with the objectives of the company.
It wasn’t easy, but the result is definitely worth it. Here’s how we did it.
Providing a seamless user experience (UX)
In order to make the navigation across the entire website easier, we started by re-thinking our sitemap and giving a better structure and hierarchy to the pages.
To this end, we had to drop some pages to reduce the clutter and allow users to promptly find what they needed. For instance, our “About” page from the previous website had subpages that created extra steps in order to get the company info. Now, everything in the new “About” page is designed to be visible at a glance, showcasing our mission, company products and leadership team.
During the wireframing stage, we iterated a lot with handmade sketches (we still love using pen and paper), prototyped and tested with different versions of the website layout before every design review meeting. There, we discussed around the prototype and made decisions before moving forward to the design-heavy stage.
We used a collaborative document to collect references and share our thoughts about what changes could potentially create a more seamless navigation experience. We wanted to go above and beyond what we’ve done with our website in the past. Therefore, we decided to take a totally different design approach, by using hero images with in-house crafted 3D objects to add context, a big and polished Koombea font, thin outlined icons to support the message to be conveyed, as well as smooth transitions and animations.
PRO TIP: UX has an essential role in every design process. Both website appearance and user interaction are very important pieces in the overall experience. Therefore, in order to create a seamless user experience, we recommend starting by setting clear goals; then, move on to designing your visual guidelines, transitions and animations, always keeping in mind your target audience. By following these steps, your users will have a smoother navigation experience and will get more value from your site. Ultimately, you’ll be engaging new users and returning ones.
Adjusting to the mobile era
Being fully responsive allows us to reach a wider audience in a mobile connected world. This is extremely important considering more and more people have access to mobile devices with fast-speed internet capabilities and browsing from a phone or tablet has increased substantially versus browsing from a computer.
Our previous website had some issues with the responsive versions. For this new version, we made sure to solve these problems, keeping in mind our goal of providing our users with an optimal experience across different screen sizes.
We improved user experience by making screen-size adjustable graphic elements, images and contents. In the mobile version, we also implemented horizontal scrolling, so we can display the same amount of information to small screen users. For instance, the capabilities section of the “services” page serves as a good example of these improvements.
Additionally, the redesigned main menu allows for quick access to the most important pages of the website and has been optimized for responsive versions, where we use a full-width hamburger menu to display the same links on any device.
PRO TIP: When building your website, keep in mind that mobile devices have become the first access point for people around the world. Remember that the look of your website on desktops isn’t the same as the look on mobile or tablet. Therefore, you must think about how all the elements of your website, such as the images, headlines, paragraphs, icons, etc., will adapt to all screen sizes. It is important to consider the spacing and touch capabilities for mobile devices in order to create a great user experience, but always keep in mind that the responsive version should feel connected to the desktop one.
Taking our brand a step further
Two years ago, we carried out a major design update to our branding. However, with this new redesign we felt it was necessary to refresh our branding guidelines as well. Some of the visual elements we used on the new website will be shown on a wide variety of company materials, such as marketing elements, ad banners, white papers and printed assets.
There was an extensive process behind choosing the right font, the right colors, the icons and the images used in this new stage. A lot of testing, changes and discussions with the designers and other team members were necessary to get to a point where all the elements were aligned with the company objectives.
We are introducing a new corporate font for every headline, used both on the website and on printed materials. We chose a sans-serif font named Circular Std, from more than 20 font styles, because it is very well constructed, geometrical, with a great screen legibility and shapes that resemble our logo. It has a corporate and elegant look, but still feels fun and accessible.
Our new color scheme is brighter, more vibrant, and crispier than the previous one. The new Koombea corporate green is eye-catching and offers high contrast when paired with the new complementary color, a dark turquoise that we’re introducing as well.
Furthermore, the site features a new set of icons specially designed for this project. These icons are outlined, flat and carefully constructed to bring clarity to the ideas presented.
Would you like to use this set of icons for your next project (personal or commercial)? Get it here, it’s free!
PRO TIP: We always kept in mind our brand as a whole, our target audience and their needs. When it came to the adjustments and improvements, it wasn’t only about how our logo, fonts and colors looked, but also about creating a whole design language around our brand. The idea is to make your brand recognizable with consistency in every design asset and marketing material. Keep in mind your brand’s audience, always be straightforward with the look and feel, and remember to make great usage of design elements such as colors, shapes, fonts, etc. to make your target more reachable. Finally, when updating your brand, try to avoid design trends, in order to create a more recognizable and timeless brand.
A redesign process can be a very challenging experience. However, if you work together and keep the goal(s) in sight, it can be the most fun and rewarding experience for a design team.
Browse around the site and let us know what you think of the new changes!
Don’t forget to follow our Dribbble Team Account, we’re sharing daily shots of fun and exciting projects we’re working on.
– Monty and the design team.