TruBRAIN

Live Site

TruBRAIN

Role

Visual Design

UI/UX Design

Web Development

Industry

Landing page

Date

July 2021

About project

Landing page for TruBrain’s future investors.

TruBrain is a profitable brand in high-performance cognitive nutrition with over $14 million in lifetime sales.

Brief

They dont’t have the website for the investors, just have a page on Start Engine, so they think it does not look high end professional.

Therefore, they want new landing page for TruBRAIN, more modern, professional and match with their branding.

Target

Leave a stunning impression with investors.

Provide information to customers who want to read more about the product; raise interest in product for customers.

Storage Scholars website on laptop and mobile

First section of Landing page

Following the principle of user-centered design, “Give visitors what they’re looking for,” we implement the following strategy

Redesign process

We used mind mapping to envision the website’s information architecture, prioritize the hierarchy of pieces, and create a fully functional website. To enhance the overall UX, we must anticipate their needs and present relevant information at each step. As a result, the site structure is influenced by various user types. It was able to simplify user flows between sites based on this by deleting unneeded pages, combining existing ones, and creating new ones as needed

User research

Understand your client first

Wireframe

Low-fidelity version for website

Create Style guide and components

To make design look consistent

High-fidelity design

Make them to be prettier and more attractively

Build in Webflow

Make design come true

What challenges have our designers overcome?

Idea

See solution

We got ideas for design and animation from their new branding guidelines, especially a series of notation marks showing development have been created to sit as part of the brand suite, highlighting the never stationary nature of the tech behind the brand. These marks were used freely and create a sense of expression and progress within the brand and marketing communications.

After redesign

Typography

Sora

Sora, meaning sky in Japanese, is a typeface family commissioned for the Sora decentralized autonomous economy focused on empowering projects that benefit society. Soramitsu, the developer of Sora, is a Japanese technology company specializing in blockchain development and well-known for creating the first central bank digital currency. Sora typeface was designed to capture Soramitsu's spirit and heritage resulting in a type family with cues of low-resolution aesthetics and early screen typography but without nostalgia, as every decision was considered towards the crisp digital environment of today. The particularly big x-height combined with evidently generous counters turns the family into a convenient tool for app and web interfaces, where clarity and effectiveness at any size is an imperative.

Colour Pallete

Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray. Blue and orange are TruBRAIN branding colors.

Illustration

Source: Iconsax.io

No items found.

What challenges have our developers faced?

CMS CHALLENGE

See solution

Webflow only allows one product page in one project, but the client wanted to add four types of products with four different types of layouts which were nearly impossible to achieve. Normally webflow developers make static pages, because of that the products are not linked with cms and content no longer remains dynamic. The issue with it is that the client has to add products on separate static pages and also if he wants to update or change any information, the client has to make changes on all static pages.

SOLUTION

Whereas we used specific filters and some custom code to create product template pages so that the client can easily manage all product pages from one cms collection list,

As always we even used cms filters for documentation, testimonials, user video reviews, and faqs of each product so that the client can add documents, testimonials, user video reviews, and faqs with the respective product, by doing this client and his team members were able to change and update the content easily

JS custom code integration

See solution

The client wanted the webflow native tab component to work as tabs on the desktop and as a slider on mobile, so it was not possible to use only webflow. Usually, webflow developers make separate sections for desktop and mobiles which makes the site heavy and when the client wants to make any change they have to change from the desktop as well as the mobile which is a painful process.

SOLUTION

Play video

"Adil is on point, skilled, and the best UX/UI freelancer on all of upwork. If you are trying to decide who to work with for UX/UI, its not even a debate. Do yourself a favor and hire Adil. This is my second task completion with him, and his work is flawless. Job completed perfectly. Thanks Adil"

By TruBRAIN

We can bring your website experience to the next level

Let’s talk with us