RizonX cover img

UX/UI for RizonX Consultancy website re-design

Tool: Sketch, Adobe XD, PS, Adobe After Effect | 07. 2020

ABOUT

Intro.

RizonX GmbH is a young logistics consultancy, which had made it’s business to advise E-commerce companies. My goal is by re-design the website to gain the high trust of customer and decrease user drop-off. 

Challenge.

Conduct ux research and analysis to create a user friendly, intuitive, animated, branded design to represent the company mission, vision and USP.

SEREACH


user interview – empathy map – user persona

user research_founder

Founder of RizonX

“we want to grow our business to attract new customers”


user-research customer

Customer

“we would like to see some the reference and case studies to bring the trust”

user-research customer 2

Customer

“The current website looks cool and there are a lot information which confused me”

INFORMATION ARCHITECTURE


site map – user flow 

information architecture_rizonX

GRID

 

1920×1080

grid for website

WIREFRAME

low fi – Mid fi

wireframe_HomePage_rizonX
wireframe_cAbout usPage_rizonX
wireframe_servicesPage_rizonX
wireframe_casesPage_rizonX
wireframe_teamPage_rizonX
wireframe_publicationPage_rizonX

MOODBOARD

brand identity

brand identity img01

clear structured 

minimal 

professional

colour & typography

RizonX primary colours
brand identity_typograpy

mood board

RizonX branding design mood-board

SCREENS

Hi fi

homepage design screens

CASE STUDY

design thinking

Design Process.

Empathize→Define→Ideate→research→Design→Testing

01.

Empathize

ux research

RizonX. 

#problem

– More than 50% user drop-off from landing page.

– The current website look old doesn’t present who they are.

– User can’t clearly understand who they are, what they do and what they offer.

# goal & need

–  Have a clear structured information architecture enable our user easily understand who we are and the  different services that we offer.

–  A friendly interface and a smooth user flow to guide user through and fill out the contact form.

 

Users. *8 user interview

#problem

– It’s hard to find a trustable consultancy to work with.

– The current website have too much information which confused me.

– The current website looks so cold.

# goal & need

–  Want to see the reference and case study to bring more trust.

–  A clear services page to help me to choose the right one that can fit my need.

 

02.

Define

affinity diagram – HMW questions

After gather all the informations from interviews, I used affinity diagram to visualize my data and groups them into 3 different group. Then I rephrase my HMW questions to find the design opportunities and the problems I need to focused on. 

#HMW

– How might we bring user’s trust?

– How might we display and grouping all the different contents?

– How might we guide user through to fill out the contact form?

 

user research_affinity diagram

Affinity Diagram

user research_how might we questions

How Might We questions

03.

Ideate

brainstorming – competitors research

#How might we bring user’s trust?

– From user research

User want to know: who they will be working with, what kind of cases they did, how was it & what other customer says about them.

– From competitors research

Most consultancy web page have an experts section with real photo, contact info, LinkedIn links, title & location, experts topics.

#How might we display and grouping all the different contents?

From the original website, there are 9 different services. Through shareholder’s interview I found out even there no hierarchy among all the services but there is a logical structure. After discuss with my stakeholder, I decide to follow the logical structure to make all different services look visually constructive and change the icons to better fit the meaning of the services. 

#How might we guide user through to fill out the contact form?


← current website homepage

current website_rizonX

 re-design website homepage→

re design homepage rizonX

← current website company page

current rizonx website team page

 re-design website team page→

website re-design team page

← current website services page

current website services page

 re-design website services page→

RizonX service page

04.

Research

competitors research

From my stakeholder research, they describe themself as young & professional consultancy. They want to redesign a website which is catchy, dynamic, clear, fresh & modern. 

I did a competitors analysis & a market position map to understand what other consultancies website look like and how they add brand personality and identity. 

 

RizonX Competitors Research

05.

Design

brand identity

#Logo

minimal & clear structured

RizonX Main Logo_brand Identity

← current main logo

RizonX Berlin logo

 re-design main logo→

RizonX_Main logo

Construction

RizonX logo construction
Logo Symbol construction

Minimal padding

The minimal padding around the logo is equal to the diameter of the symbol.

Logo minimal padding

Scale

The minimal size is 36px for symbol. Each scale add 25px. 

For example, 4 * scale equal to 136px. 36 +(4*25) = 136.

logo scale

Colour

White logo on Denim, Cement gray and butterscotch colour background. Dark logo with bordered symbol always on the white background.

logo colour

Placement

logo placement

Versions

logo version

#Typography

Use Lora as primary font and combine Montserrat as secondary font and lato as information or system description font.

Primary font: Lora

Lora is a well-balanced contemporary serif with roots in calligraphy. It is a text typeface with moderate contrast well suited for both screen and print. The overall typographic voice of Lora perfectly conveys the mood of a modern-day story, or an art essay.

<link>

<link href=”https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap” rel=”stylesheet”>

CSS rules to specify families

font-family: ‘Lora’, serif;

Primary font lora for headerPrimary font lora for header1-3

Glyphs

glyphs for lora font as primary font

Pairings

Lora font pairings with Montserrat

Secondary font: Montserrat & Lato

Montserrat is urban typeface use often on posters cause it clean and create a feeling of trust with it nice large X-height. “Lato” means “Summer” in Polish, semi-rounded details of the letters give Lato a feeling of warmth, while the strong structure provides stability and seriousness. “Male and female, serious but friendly. With the feeling of the Summer,” says Łukasz(Lato Font Designer).

<link>

<link href=”https://fonts.googleapis.com/css2?family=Lato&family=Montserrat:wght@400;600;700&display=swap” rel=”stylesheet”>

CSS rules to specify families

font-family: ‘Montserrat’, sans-serif;

font-family: ‘Lato’, sans-serif;

Montserrat font and lato font

Glyphs

Montserrat

Montserrat font Glyphs

Lato

Lato font Glyphs

Pairings

pairings all fonts

Rules

typography rules

#Colour

Denim, Butterscotch yellow, spruce blue and cement gray are the primary colour. Stand for professional, passionate, innovative, focussed.

Brand colour

The brand colours always appear in full tone. Butterscotch is as actionable colour can use as call to action or get user’s attention. Denim use for large space background or menu bar. 

Brand colour

Do’s

Brand colour for UI_Do

Don’t

don't for brand colour

Neutral colour and  Functional colour

Neutral functional colours

Functional colour

Active colour

active colour

Deactivate colour 

deactivate colour

Do’s & Don’t

Do's and Don't for functional colour

#Icons

Special Icons

Clear, consistent and line structured icon to visually better explain to our user what our complex services about. 

Icons_brand icons

Social Icons & Other Functional Icons 

Most Icon are design stroke in order to more clearly illustrate a concept. But Social icons are always filled icon.

other icons and social icons

Colour

The icon colour varies depending on the interaction state (e.g., default, hover, disabled) and the colour theme.

Icon Colour

#Button

Buttons allow users to perform an action or navigate to another page. There are multiple styles for different needs and they are the ideal for call attention and move forward in a flow.

HTML

<button type=”button” class=”bt-primary”> Subscribe</button>

CSS 

.bt-primary { display:inline-block;border-radius: 34px;background-color:#FDBC0D; border: none;color: #FFFFFF;text-align: center;font-size: 25px;padding: 16px;width: 200px;transition: all 0.5s;cursor: pointer;margin: 5px;} /* static version */

button

Type

The button type is determined by its purpose and the action being taken. And a button can be all text, a single icon or both.

call to action button

Call to action button

<button type=”button” class=”bt-atc”> Subscribe</button>

The  call to action button communicates strong emphasis and is reserved for actions that are essential to an experience. 

primary button

Primary button

<button type=”button” class=”bt-primary”> primary</button>

The primary button is used text only and for medium emphasis.

secondary button

secondary button

<button type=”button” class=”bt-secondary”> secondary</button>

The Secondary button is for low emphasis. It’s meant to paired with other button types to surface less prominent actions and should never be the only button in a group.

icon button

Icon button

<button type=”button” class=”bt-icon”><i class=”” ></i></button>

The icon button used when additional clarity is required. And Icon should not used only for decoration.

Behaviors

button minimum width

Minimum width

Texted button have a minimum width of 2.25 times of its  height. This guarantees that small buttons retain an identifiable shape. Icon button do not have a minimum width, their width depends the size of the icon.

Flexible width

Flexible width

The width of a button automatically adjusts to fit the text. The padding on each side of the button is equal to 1/2 its height.

Rules

Button should be concise.

Do’s

be concise dos

Don’t

be concise don't

Button should be use sentence case.

Do’s

text transform dos

Don’t

text transform don't

Updating… …