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