Website redesign & UX optimization
Begin 2018 is ons team versterkt met Morta, onze UX specialist. Een van haar eerste taken is geweest om onze website te herontwerpen en te optimaliseren wat betreft User Experience. Met deze Case Study, geschreven voor Morta, bieden wij jullie graag een kijkje in het werk van Morta.
DUODEKA is an IT company founded in 2016. I’ve joint the team as User Experience specialist in the beginning of 2018. One of my first tasks was to redesign the company’s website and improve the User Experience (UX).
The redesign process had these steps:
Step 1 | Discover (User research, Business needs analysis, Usability testing)
Step 2 | Define (Problem identification and setting the goals)
Step 3 | Redesign and UX Optimization (Rebranding, reducing Cognitive load, Information Architecture and Content strategy, improving website’s scannability and scrolling experience)
Step 4 | Evaluation of the results
“Our results of the redesigned website were staggering: a 93% drop in bounce rate, 72% more pageviews and 51% more pageviews per session.”
Daan Schoofs, DUODEKA Co-Founder
Step 1 | Discover
Understanding the business needs
In order to understand the business needs I conducted several interviews with stakeholders. We discussed the current state of the website, the strategy of the company and the character that should be communicated through the design.
- DUODEKA can be described as an open, entrepreneurial, intelligent and innovative company.
- The strategy is to develop new IT ventures and build custom software.
- A key value of the company is to develop data-driven and user-centered software that provides a real answer to business needs.
Understanding the users
/ User research
In order to understand the users I’ve analyzed the data of Google Analytics of the company’s website. I’ve looked specifically at:
- demographics of the users;
- entry points to the website;
- search keywords;
- user flows and behaviour on the website;
- the content that users are looking at;
- exit points.
I found out that according to the behaviour on the website users can be divided into three types of users:
Group 1: Explorers
They come to the website and browse our company’s history, values and vision, team members, cases and content on the blog page.
Group 2: ‘Contacters’
This group of users goes straight to the contact page after entering the website and then exits.
Group 3: ‘Exiters’
They leave the website just after landing on it.
/ Usability testing of the current website
I’ve collected data about the current state of the website’s usability by asking users to perform some tasks depending on whether they were explorers, contacters or exiters.
Old version of the website
- In order to know more about the company, users had to go through more than three different pages (History, Visions and Values, Team).
- Users perceive the company as classic, luxury, old and conservative.
- Many users found it difficult to browse more than one case study.
- Some users found the video on the top of the website distractive.
- The users found it difficult to summarize what services the company provides.
/ Competitor analysis
A competitor analysis was conducted in order to understand what kind of content and information architecture users expect to find when browsing websites of other IT companies.
- IT companies usually present their portfolio of previous work.
- The people behind a company’s name are presented.
- It companies communicate about their values and approach to work.
Step 2 | Define
With the input of the user research and stakeholder interviews, the main problems were defined:
1. The look of the website didn’t represent the company’s values.
2. The architecture, navigation and content of the website isn’t user-friendly.
“Our goal is to redesign the website so that it would communicate the company’s values better and optimize UX by improving information architecture, user flow and a content strategy.“
Step 3 | Redesign and UX Optimization
In order to represent the company as a team of young entrepreneurs and to build an image of an open and innovative IT company, bright colours were selected.
Custom illustrations were designed to create a brand identity. The mockups of our actual projects were used to represent our knowledge and expertise.
The look of the website: before and after
2. Information architecture and content strategy
The structure and content of the redesigned website were defined according to the characteristics of the three user groups:
The Explorers can dive into the scrollables pages and explore what DUODEKA is and what the company does.
The contacters can find our contact details in the footer and in the menu. Also, they can arrange a meeting on the website by selecting from available dates and times without having to contact the company.
The exiters get a clear message about what the company does without having to scroll down the page.
3. Reducing the cognitive load
Cognitive load is the amount of mental processing power required to complete tasks on the website. Different colors, animations and texts create a cognitive load for the user.
On the redesigned website the negative space (or white space) helps user to identify the most important information.
In order to prevent users from getting choice paralysis (decreased ability to make a decision when the number of options to choose from increases) the number of menu items were reduced by merging (sub)pages with relevant information (e.g. About us, History, Team, Vision and values).
4. Visual information first
Visual information is perceived much faster than textual information. In order to enable users to navigate on the website faster, some texts were converted into illustrations, icons, graphics, images, etc.
In order to deliver user-centered pages, the scannability was taken into account. The texts are numbered, bulleted, bolded, highlighted, quoted, etc. Headings and subheading are used.
The old version of the website contained many short (sub)pages.
Users are used to scroll on different websites and platforms on the Internet.
So, instead of requesting the user to click in order to find more information, the pages were designed to be more scrollable.
7. Conversational forms
Instead of the standard contact form conversational forms were build. This way, users experience a more natural and personalized communication form.
Conversational contact form
Step 4 | Evaluation of the results
Now we’re five months in the future and these are the results of the redesigned website.
Measurable results of the redesign website
According to Google Analytics the number of page views increased 72%, 51% more pages are viewed per session and the bounce rate dropped from 52% to 3%.
Now users stay longer on the website and open more pages per session. The number of exiters has dropped down. Finally, I’d like to thank Dion Dumel, Daan Schoofs and David Schulpen for an amazing work together.