RizonX cover img

UX/UI for RizonX Consultancy website re-design

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



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. 


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


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


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

user-research customer 2


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


site map – user flow 

information architecture_rizonX




grid for website


low fi – Mid fi

wireframe_cAbout usPage_rizonX


brand identity

brand identity img01

clear structured 



colour & typography

RizonX primary colours
brand identity_typograpy

mood board

RizonX branding design mood-board


Hi fi

homepage design screens


design thinking

Design Process.




ux research



– 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


– 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.




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. 


– 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



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



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



brand identity


minimal & clear structured

RizonX Main Logo_brand Identity

← current main logo

RizonX Berlin logo

 re-design main logo→

RizonX_Main logo


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


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

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

logo scale


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

logo colour


logo placement


logo version


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 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 for lora font as primary font


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



Montserrat font Glyphs


Lato font Glyphs


pairings all fonts


typography rules


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


Brand colour for UI_Do


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


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


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

Icon Colour


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.


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


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



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.


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.


Button should be concise.


be concise dos


be concise don't

Button should be use sentence case.


text transform dos


text transform don't

Updating… …