Cases

Twibi

We are a digital marketing agency that’ll help you achieve your marketing goals using paid search, paid social, SEO, and email tactics.

Case study

Complete site redesign by Studiopresto

  • Wireframes
  • UI/UX Design
  • Branding
01

Client request:

The company faced challenges in retaining potential customers to maximize revenue, with a  website needing a design and content update to better help customers fill out the required form to contact managers.

Twibi set out to showcase its modern and professional image
by implementing a comprehensive brand transformation.

02

Our role:

Studiopresto divided the task at hand into several stages. First, we looked to create a modern identity. Second, we developed

a UI\UX design based on the company's website. Finally, we helped Twibi fully realize everything we had planned for the website development stage.

01

Homepage

The website homepage ultimately creates the first and most powerful impression of a brand on visitors. With this in mind, we intentionally filled it with custom lottie animations starting with the very first section of the site.

Mega menu

We created a mega menu to simplify navigation and make the site as intuitive as possible, helping users find anything they need almost instantly.

Preloader

Despite the amped up animation, the site continued loading quickly enough for most users. Nevertheless, we also created a preloader for anyone encountering slow page-loading speeds: making this wait time much more pleasant.

Animations

We drew attention to lovely website photos with the help of original animated backgrounds. This is thankfully not too difficult to do, and it’s thanks to such details that these photos truly come to life.

To prevent users from quickly getting bored with the visuals, it was crucial to enlist the help of several animation options. We therefore set out to show this effect a different way each time.

Phases

Work stages

Logotype

Brenton, the agency's founder, wanted a wavy company logo without sharp corners and therefore quite smooth; we used a custom font to achieve this effect.

Typography

Popular fonts Futura PT (for accents and headlines) and Poppins (for content) perfectly complemented the visual identity due to their geometry, purity, and excellent readability.

Aa
Futura PT
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890
Aa
Poppins
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890

Colors

We were lucky: the owner of Twibi himself suggested the color scheme for the identity and website. We only slightly modified a few shades of green.

HEX: 008080
RGB:
‍0, 0, 128
HEX: 2F5061
RGB:
47, 80, 97
HEX: E57F84
RGB:
229, 127, 132
HEX: 0F0F14
RGB:
15, 15, 20

Wireframes

Wireframes are a core essential of any successful website UX. We therefore set out to consider each and every aspect and detail on each page while thinking about the user journey through the website: one that must be easy and intuitive with maximum navigational comfort.

Visual

Design process

Our design goal was to create systematic, eye-catching visuals that engage users and extend their time on the site—even after they've absorbed the textual content.

Despite the relatively large number of animated elements, these are presented to users in a dosed manner so that while getting acquainted with these elements is interesting, users will also stay energized by this approach.

Flowing lines concept

The Twibi logo was deliberately designed in a smooth, wavy style with transitions between blocks following this as well; they are also soft and imperfectly round, like waves of the sea.

Adaptive design

The mobile version of the Twibi agency’s website is responsive, simple to navigate, and easy to read. It's an excellent option for anyone viewing the site on a small screen.

Subpages

Inner pages

The homepage is certainly significant, but Twibi hides so many more cool features in its internal pages.

Services

One of the most important website sections, Services, was previously easy to miss. Thanks to the addition of large blocks and beautiful animations, it now stands out.

What we do

This page employs the interesting effect of overlaying one block on another, a seemingly simple animation that effectively brings website visuals to life with a smoothness visitors can feel on their fingertips when scrolling.

Twibi offices

The company has nearly a dozen offices in various cities and states. As it's simply not interesting to just name the locations, we utilized photos of iconic places with a map image of the city as a background.

Twibi сontact

The Contact page is clean and features a user-friendly layout and prominent contact form to prioritize user engagement and ease of communication: embodying a user-centric approach to design.

Comparison

Results

A large volume of work resulted in Twibi’s complete transformation.

Hero section

Instead of merely featuring a short, uninformative video, the hero section looks attractive and unique.

How can we help?

The large navigation section is now transformed into a mega-menu, no longer taking up space on the page but instead moving to a drop-down box.

Services

One of the most important sections, services, used to be easy to miss. Thanks to large blocks and beautiful animations, it’s impossible now.

Сonclusion

Brand-new Twibi

A new brand identity presents the company as modern, young, and technologically advanced.

Awesome people

Studiopresto is exceptionally pleased with the results of our cooperation with Brenton Thomas and the Twibi agency team.

This case afforded us the opportunity to execute several exciting ideas our designers have long wanted to try, making this perfect match with Twibi that much more fantastic.

Brenton's testimonial

Review

Review
Studiopresto delivered a wonderfully aesthetic website. They communicated remotely to ensure an effective workflow, and their timely responsiveness and availability were hallmarks of their work despite the time zone difference. We are thrilled with the outcome.
Brenton Thomas
Founder, Twibi
Mar 21, 2023
Next Project

Recright