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

Founder of RizonX

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

Customer

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

Customer

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

INFORMATION ARCHITECTURE

site map – user flow

GRID

1920×1080

WIREFRAME

low fi – Mid fi

MOODBOARD

brand identity

clear structured

minimal

professional

colour & typography

mood board

SCREENS

Hi fi

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?

Affinity Diagram

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

re-design website homepage→

← current website company page

re-design website team page→

← current website services page

re-design website services 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.

05. Design

brand identity

#Logo

minimal & clear structured

← current main logo

re-design main logo→

Construction

Minimal padding

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

Scale

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

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

Colour

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

Placement

Versions

#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>

CSS rules to specify families

font-family: ‘Lora’, serif;

Glyphs

Pairings

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>

CSS rules to specify families

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

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

Glyphs

Montserrat

Lato

Pairings

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.

Do’s

Don’t

Neutral colour and Functional colour

Neutral functional colours

Active colour

Deactivate colour

Do’s & Don’t

#Icons

Special Icons

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

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.

Colour

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

#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 */

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

<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

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

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

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

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

Behaviors

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

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

Don’t

Button should be use sentence case.

Do’s

Don’t

Updating… …