WEBSITE - CRM

AGENCY

Moove Agency

CLIENT

BGI Genomics

SECTOR

Biotechnology

YEAR

2017

BGI Genomics provides researchers and healthcare professionals with quality genomic data and genetic testing solutions, at rapid turnaround times with industry-leading pricing.

MY ROLE

As the lead designer on this project, I was responsible for the UX process, Art direction and UI design.

I worked alongside the front-end and back-end developers, a project manager, account manager and the client stakeholders: account managers, marketing manager.

Responsibilities:

• Gather requirements
• Conduct usability testing sessions and interviews
• Analysis of competitors and website features 
• Produce new IA
• Produce user flows, sitemap and wireframes
• Liaise with developers to discuss opportunities and constraints
• Present prototypes Axure to client stakeholders for internal validation
• Create High-Fidelity Mockups
• Produce  Style Guide for designs handoff to web developers

KICK-OFF MEETING

The project started with a kick-off meeting with the client to find out more about the industry, the company and the customers.

We discussed the business goals, identified the website objectives and established the project KPI's. We talked about the competitors, the client products and services, features and technical requirement for the new website and we mapped out the current user journeys. We Iooked up to the website analytics to get a better understanding of quantitative data. After the face to face meeeting, the other meetings were made through Google Hangout and Skype as the clients’s marketing team is based in Copenaghen.

Workshop with the Global Marketing Manager at our office in Shoreditch (London)

COMPETITORS ANALYSIS

I carry out a competitive analysis to get a deep understanding of the context surrounding the genomics market.

My goal was to increase my domain knowledge about content, features, IA and visual design language of the genomics websites. Each competitor uses a different approach to classify the services offered to the customers. Services can be grouped by technique, application or research areas. There isn't a unique approach because each competitor tends to highlight the most substantial area of competence.

All the sites use a mega drop-down menu due to a large amount of services offered. There is a large use of iconography (very well defined - no differences) associated with a specific terminology to describe the type of sequencing services offered.

Three main competitors: Eurofins, Genewiz, Illumina

PROBLEM

During the discovery phase, we identified the main problems that became the key areas of focus.

• The client had three distinct corporate websites for each geographic region.
• The sites presented different information architecture, pages layout and visual design. All resulting in a confused user experience.
• They were looking for a way to replace the old process to manage the customers' projects (happening via emails with endless communications) with a more smooth workflow.

These are the websites

TAEGET AUDIENCE

So, Who are we talking to?

During the kick-off meeting, I spoke with the client to get a better knowledge about the target audience. Due to the short timing, I didn't have time to do user interviews but I was giving access to previous user interviews and personas based on previous UX research.

Researchers and Healthcare Professionals  are the key personas and need quality genomic data and genetic testing solutions, at rapid turnaround times with industry-leading pricing.

Therefore, they are susceptible to cost and time. They get stressed if they don't get a detailed and quick quote to compare with other companies. They often are returning customers and wish to talk to account managers they worked in the past. From here came out the idea to create the myBGI app, where customers always have available the same Account Manager for their projects.

They are interested in news and events about the Genomics industry. They want to see if there are new sequencing services available. The need to contact them to get a quote about their projects.

Account Managers, who are responsible for taking care to new and returning customers, are the secondary persona of the website.

PROJECT GOALS

We agree on the following key project goals: 

• Streamline the customer ordering flow on the website to improve the user experience and to increase customer engagement (request a quote form completion - registrations to myBGI - newsletter signups)
• Bridge the gap between customers and account managers creating the myBGI app to fulfil user needs — starting from the ground up.
• Elevate the online presence to reflect their global renowned reputation through a new visual design identity.

Service template - Product Template

WEBSITE

I combined three websites into a single website working on a new IA.  

I analysed the current sitemap to understand the current site organisation, content and functions. I discovered that the website was full of dead ends and redundancy.

A card sorting exercise helped to identify the new labels for the primary menu navigation. I worked closely with the client at this stage because the genomics industry uses a specific terminology so the market experts insights were needed. 

I re-organised the large amount of content using a top-down hierarchy approach with the  primary goal to deliver specific content to a different regional audience. The global navigation is organised with a hybrid scheme to support new and returning users. To help the user discovering the type of services and products, we used a topical organisation scheme visually displayed with a mega-drop down menu.

The main CTA "Tell us about a project" button is placed on the top-right of the sticky nav and links to the Request a Quote Form.  I proposed a progressive disclosure for the request a quote form and the registration form to myBGI application in order to lower the chances that users will feel overwhelmed while filling in the form.

I produced with Axure the new wireframes which where tested with users to validate the new user flows and experiece through an iterative process. Test - Refine - Test.

Mega drop-down Menu - Wireframe - Sitemap

I created a new visual design direction to elevate brand awareness , introduced the iconography and produced a UI style guide to keep consistency for all online digital products.

The wavy hero banner comes out from the idea to follow the rounded shape of the logo. All the hero banners have a similar tint, and a an icon that represents the type of sequencing service. The products pages have a unique colour scheme following the branding look&feel.

MYBGI APP

I designed the myBGI product which is a web application used by both customers and account managers to manage projects.

The aim was to build an intuitive system to replace the old procedure to manage projects via email and phone calls. The myBGI app reduces time and cost for the business and improves the customers' satisfaction

Wireframe - UI Dashboard - Style Guide

Through the app, the customers can access to project documentation and receive ongoing updates regarding the status of the project, as well as get the final project status report. myBGI also allows customers to access to all sample quality, preparation and shipment guidelines.

Having only one app and a dedicated account manager for the customer will streamline the workflow and fulfil the user needs.

CLIENT TESTIMONIAL

MATTHEW POULTER

Senior Global Marketing Manager at BGI Genomics

⋮

CASE STUDIES

ABOUT

UI DESIGN

© 2019 Roberto Marzocchetti. All rights reserved.