UX UI

Creating an Engaging Website for a Fast-paced Blockchain Company

2020
BCAS Website Redesign

introduction

BCAS is a legal tech company covering the regulatory and technical aspects of blockchain technology across major industries and jurisdictions.

They needed a well-deserved website redesign since their previous website was fairly outdated with a website hierarchy that was rather confusing.

Their main request was a modern corporate website with dark-theme features that is a clean, easy-to-read website with plenty of white space.

goals

Completely restructure the website hierarchy and information architecture to clearly communicate the website’s intention and the services BCA has to offer.

Tackle usability issues, integrate modern day UX practices,  and modernize the website’s aesthetic using the new BCA branding.

tasks

Research, Prototyping, Wireframing, Design, Illustration.

programs

Sketch, InVision, Illustrator.

Table of Contents

Rewebbing the web

A sitemap is useful as an early deliverable in the project lifecycle to bring clarity to the scope of work and provide direction to all resources.

Old sitemap

Other than the blog section, the old website didn’t really have a hierarchical arrangement of pages. BCAS provided a lot of fresh content for new pages which was great for more lower-level content. I logically grouped similar information in a hierarchical structure to ensure content is placed where users expect to find it.

New sitemap

Previously, the services were listed on one page with barely any information describing what the services are actually about. This is not only poor for SEO, but also prevents potential clients from finding the right information on the website. BCAS wanted to incorporate dedicated service pages giving a clear service description as well as service related features and benefits.

The Clients and projects menu item was simplified to Clients and this page was designed to list down successful clients stories in the form of case studies.

The Careers and Media page was grouped under the About tab and a dedicated About us page was added.

A new section to the website were informational pages about the jurisdictions BCAS operates in. Since they are planning to add more jurisdictions in the future, this section had to be easily scalable.

Old desktop menu

Problems:
The old menu was pretty frustrating to use for their users. Besides taking a lot of screen space due to its height, it had an odd layout with a lot of vague menu items.

Opportunity:
A clean and simplified menu following a more common layout including menu items with lower-level dropdowns.

New desktop menu

I went with a dark menu since it tied in nicely with the dark-theme elements BCAS wanted to go for.

Menus are mainly scanned from left to right by users, so it was a natural decision to place the menu items accordingly from highest to lowest priority.

The menu call to action (CTA) is most commonly found in the top right corner. The button Get FREE Consultation was disregarded and replaced with a Contact us button since this was the primary action BCAS wanted their users to take.

Due to a relatively small amount of 3 to 5 lower-level content items, I kept a simplistic dropdown design for ease of use with a clear hover effect.

New mobile menu

The mobile menu slides in from the right side of the screen and has an identical design as to the desktop menu to maintain consistency.

The menu items are categorised in three groups and are divided by a thin grey line. Each menu and dropdown item has a generous amount of height so that it’s easily selectable by the user.

Home is where the start is

A first impression is so important because it lasts well beyond that moment. Since mostly the home page is the main landing page, it’s an essential tool for the business and serves as the first impression to potential customers.

Old home page structure analysis

Problems:
Besides the issues listed above, the home page was just way too long with too much information cluttered onto one page. There wasn’t really a natural flow to the page that clearly communicates what BCAS is all about and what they have to offer to their clients.

Opportunity:
Restructure the page by removing certain sections as well as structurally optimise or replace sections. Make sure that there is a smooth content flow from top to bottom that communicates BCAS business in a more storytelling way.

Home page wireframe

I tried to keep the home page as short and concise as possible so that it would be an informative yet easy experience for the user.

It’s important to capture the user’s attention wherever the fold lies. So with an engaging visual and attention-grabbing headline, we ensure that they’ll engage with the rest of the experience as it unfolds below.

Following up, I didn’t just want to add a dull list of services. Therefore, I added a full-width interactive slider that would automatically rotate between the three service categories with links to read more about the services. Attached to that, the user can read more in-depth information about project handling related to the services.

For clients to learn about successful client stories, a link is provided to all case studies. Case studies not only increase credibility but also helps potential customers to get a feel of what it’s like to be working with BCAS.

Home page design

The home page has a very sleek and modern design using the new primary purple brand colour as CTA colour which really contrasts well against the dark background.

The page sections are clearly divided by complementary design styles and only display purposeful information. All sections and elements are surrounded by plenty of white space that gives a calm and easy experience.

I went with large dark titles and a grey-toned text colour which not only visually looks good but also creates a clear text hierarchy.

Service page build-up

The most visited pages are the five BCAS service pages. These pages give a clear description of the service as well as the features and benefits a BCAS customer will receive. All this information on one page can result in a very long page filled with content, especially on mobile. Therefore, a sticky anchor navigation menu is added so the user can easily access any topic on the page.

To avoid user journeys with dead ends, each service page is closed off with a connect with our experts CTA and more related BCAS services.

Successful client stories

The old clients page only displayed client logos and a short description of the project. BCAS wanted to leverage on their successful projects and wrote in-depth client case studies to share with their potential customers.

The projects are divided in the three main service categories and users can, similar to the service page, use the sticky anchor navigation to easily browse between the case studies.

To ensure a consistent layout that isn’t disrupted by loads of unmatching client logos, I used white client logos placed in a rectangular container using the brand colour of each client. Each project is introduced with a short project description and has a small list of tags related to the project.

Due to certain agreements with clients and partners, we couldn’t show all BCAS’ clients and were requested to list partner logos on this page.

The case study template is introduced with a few project details and a parallax background image. The body content section has an optimized reading width and sticky social sharing options on the left. I would’ve liked to include client testimonials, but unfortunately, BCAS wasn’t able to provide thse. The case study template page is closed off with two other featured case studies to avoid a closed user journey.

Help finding the needles in the hay-stack

This is basically the page structure of the careers and job page including CTAs showing the path the user follows on these pages. This helps me decide on the page hierarchy and allows me to easily make changes based on client feedback early on in the project stage.

Careers and job page design

Gladly, BCAS was able to provide content such as their company values and work benefits which helped to fill up the careers page with useful information. The page design is pretty straightforward and doesn’t have any meaningless add-ons that only take the attention away from the job openings.

The job page provides a fair amount of information and social sharing options which makes the job opening easily shareable around the web. Applicants can directly apply through the form at the bottom of the page by filling in their personal details as well as uploading their cover letter and resume.

Blog rebuild

BCAS wanted to take their blog page to the next level since they really wanted to focus on proper content marketing. The blog page got a complete overhaul and has been rebuilt from scratch.

Old blog page analysis

Their old blog page was fairly outdated and used a poor default template. The blog cards were way too big and there wasn’t any good way to browse through the blog categories or search for any specific keywords.

Wireframe wireflow

This wireflow is the representation of the screen flow of related wireframes following the order they appear in the flow. Users can easily browse through all articles, categories and authors at any time within the journey which makes the blog section very accessible and a user-friendly experience to the user.

Blog page design

A total of 18 articles are displayed per paginated page using a three grid column. Users can easily sign up to the BCAS newsletter by submitting their email through one of the forms at the top and bottom of the page.

Closing the loop

The primary CTA on the website is to get in contact with BCAS experts. This button is primarily found in the menu and also in other essential locations.

There are two options to get in contact with BCAS. The first one is a contact form in which the user has to fill in details such as name, email, phone number, a message subject and the actual message itself.

The second option is to book a call, which is a bit more interesting in terms of functionality and design. Users have the option to personally choose a date and time using an integrated booking system to schedule a call with BCAS experts.

Final words

This project reminded me of the fact that it can be very difficult for an end product to exactly match my ideas and expectations when working with multiple parties involved. Understandably, it can be a tedious and not-cost effective process to communicate functionality and guidelines in the finest detail.

Nonetheless, it was great to bring new life into a very outdated and unoptimised website. I’m a huge sucker for dark-themed websites with a bright highlight colour, so I really enjoyed working on this project.

BCAS was very pleasant to work with and head a clear vision of what they wanted but still gave me a lot of freedom to do my thing. Together we optimised the website hierarchy to its finest and all pages and lower-level content are now easily accessible. I’m eager to hear about the data in terms of the growth and performance of the website.

The website is developed onto Hubspot by Transfunnel, a HubSpot Diamond Partner in India & SEA.

Showcase


Like what you see?
Lets start improving your business.
Get in contact

Unibet

UX UI

A responsive dashboard design to maximise Unibet's converting traffic during the Cheltenham festival.

View project
Unibet Dashboard Design