Website redesign

Client

Knap-IT

Duration

5 months

Role

Lead designer, UX/UI, Illustration and graphics.

Process

Design thinking

Tools

Adobe photoshop
Adobe Illustrator
Adobe XD
Google forms
Optimal sort
WordPress
CSS
HTML3

Understand

Objective

I was asked to redesign the companies website and make it easy to understand so that it caters to both B2C as well as B2B Customers. A website where users can find information, order products, make an appointment for house visits or get online help. Besides that, they asked me to rethink their design strategy and come up with a new corporate identity to re-establish themselves in an ever-changing market.

This resulted in a website that answers all your ICT-related questions and provides valuable solutions to easy-to-fix computer problems, internet connection, and phone-related problems.

Challenges

• A confusing user interface with too much information
• An older target group that prefers personal contact over online contact
• Wanting to communicate three main businesses in one place
• Reduce the amount of receiving phone calls, store visits, and emails with questions.

Research goals

• Identify what information our users need
• Understand how we can help users in the best way
• Identify if our users are open to online help
• Identify our different user groups

Design process

Research

User survey

After establishing the research goals, I interviewed the employees who would speak directly to customers, conducted customer surveys, customer interviews, and collected data on how people would use the website and why. We recruited the participants by social media, handing out flyers, and sending an online newsletter.

We received 35 reactions over two weeks.

In the meanwhile, I conducted 6 user interviews with store visitors. The gathered insight and data were analysed and organised using affinity mapping.

Interview Analysis

To better understand and organise all the information gathered during the interviews, and analyse it, I used Affinity Mapping. This method helped me come up with a list of key insights, that helped me decide upon what aspects and features of the website I’m going to include in my project.

Key insights

• Two very different audiences had to find their information on the same website.
• B2C with an age range between 45 and 80
• B2B fresh startups and fast-paced companies with 20- up to 60 employees
• B2C Users are open to online help as long it is working, helping, and easily accessible.
• B2C Users are willing to use online manuals to try and fix their IT problems on their own
• B2B want to read up on valuable product to help them fix ICT problems
• B2B wants to read who Knap-IT is, with who they are doing business, and what        Knap-IT can do for them.
• Al users need a website that specifically caters to their needs without too much side information.

Empathize

User Persona

To make sure to keep a User-centred design I’ve created two user personas to revisit throughout the project to keep reminding myself of the user’s needs and frustrations. One grandfather who likes to stay in contact with his grandchildren via Skype, Facebook etc and a business men who needs a private, stable and secure network to keep his SAAS product online.

Ideate

User flows

After creating a user persona and user journey based on the data collected from the affinity mapping, it is time to create user flow to understand how the user will navigate through the website. Due to a non-disclosure agreement, I am not able to show the rest of the process of the business Persona.

Sitemap

Based on the previous research I was able to come up with the first draft of the sitemap. Due to a non-disclosure agreement, I am not able to show the business & design part of the website.

Prototype

Low-fidelity (Schedule remote help)

Based on the user research and analysis, I designed the first low-fidelity.

Mid-fidelity (Schedule remote help)

In this next step, I translated the low-fidelity wireframes to mid-fidelity wireframes.

High-fidelity (Schedule remote help)

In this next step, I translated the mid-fidelity wireframes to high-fidelity wireframes and created a prototype to test the usability.

Testing

Usability test

5 participants took part in the moderated usability test sessions. The goal of the study was to find out if the users understand the flow of the website and if they make the right choices to find the desired information. I observed if the user could easily navigate through the website and was able to explain the meaning of the shown information.

Objectives

• Is the user able to navigate to the right information in the right sections?
• Is the user able to plan an appointment to get remote help with their computer problems or other questions?
• Is it easy to schedule an appointment to get an expert at their house?
• Can they find and use manuals to try and fix problems themselves.

Refine

Implement feedback

All results, including participant observations, positive and negative quotes/expressions, and errors were translated into an affinity map and then put into a rainbow spreadsheet so I could get an overview of behavioural patterns /issues and come up with valuable solutions. The most important errors are listed below.

• Users did not understand the squares on the homepage where buttons
• Users were confused when first having to choose by why they were visiting the website or as who.
• Users prefer to not only select a date but also an expert
• The overall feeling is that there are still too many steps.

Solutions

• Change the layout of the buttons uses colour to separate them.
• Think of another solution to split the information between users
• Change the number of steps needed to plan an appointment

Design

Final designs

Reflection

Final product

Together we build a website that was easy to use and where most needed information was directly accessible. In the end, this led to a website with more visitors, visitors stayed on the website longer, after two months we noticed that we were receiving fewer phone calls of customers just asking for information, and after 5 months we were even able to have the store open 5 days a week instead of 6.

What I have learned

During this project, I learned how to lead a team, inform stakeholders, share information, maintain a design system, a bit of HTML and CSS coding, and most of all I learned to build a product that led to the customer as well business satisfaction.

Thank you!

Website redesign

Client

Knap-IT

Duration

5 months

Role

Lead designer, UX/UI, Illustration and graphics.

Process

Design thinking

Tools

Adobe photoshop
Adobe Illustrator
Adobe XD
Google forms
Optimal sort
WordPress
CSS
HTML3

Objective

I was asked to redesign the companies website and make it easy to understand so that it caters to both B2C as well as B2B Customers. A website where users can find information, order products, make an appointment for house visits or get online help. Besides that, they asked me to rethink their design strategy and come up with a new corporate identity to re-establish themselves in an ever-changing market.

This resulted in a website that answers all your ICT-related questions and provides valuable solutions to easy-to-fix computer problems, internet connection, and phone-related problems.

Challenges

• A confusing user interface with too much information
• An older target group that prefers personal contact over online contact
• Wanting to communicate three main businesses in one place
• Reduce the amount of receiving phone calls, store visits, and emails with questions.

Research goals

• Identify what information our users need
• Understand how we can help users in the best way
• Identify if our users are open to online help
• Identify our different user groups

Design process

User survey

After establishing the research goals, I interviewed the employees who would speak directly to customers, conducted customer surveys, customer interviews, and collected data on how people would use the website and why. We recruited the participants by social media, handing out flyers, and sending an online newsletter.

We received 35 reactions over two weeks.

In the meanwhile, I conducted 6 user interviews with store visitors. The gathered insight and data were analysed and organised using affinity mapping.

Interview Analysis

To better understand and organise all the information gathered during the interviews, and analyse it, I used Affinity Mapping. This method helped me come up with a list of key insights, that helped me decide upon what aspects and features of the website I’m going to include in my project.

Key insights

• Two very different audiences had to find their information on the same website.
• B2C with an age range between 45 and 80
• B2B fresh startups and fast-paced companies with 20- up to 60 employees
• B2C Users are open to online help as long it is working, helping, and easily accessible.
• B2C Users are willing to use online manuals to try and fix their IT problems on their own
• B2B want to read up on valuable product to help them fix ICT problems
• B2B wants to read who Knap-IT is, with who they are doing business, and what        Knap-IT can do for them.
• Al users need a website that specifically caters to their needs without too much side information.

User Persona

To make sure to keep a User-centred design I’ve created two user personas to revisit throughout the project to keep reminding myself of the user’s needs and frustrations. One intermediate and one beginner-level water sport fanatic. 

User flows

After creating a user persona and user journey based on the data collected from the affinity mapping, it is time to create user flow to understand how the user will navigate through the website. Due to a non-disclosure agreement, I am not able to show the rest of the process of the business Persona.

Sitemap

Based on the previous research I was able to come up with the first draft of the sitemap. Due to a non-disclosure agreement, I am not able to show the business & design part of the website.

Low-fidelity (Schedule remote help)

Based on the user research and analysis, I designed the first low-fidelity.

Mid-fidelity (Schedule remote help)

In this next step, I translated the low-fidelity wireframes to mid-fidelity wireframes.

High-fidelity (Schedule remote help)

In this next step, I translated the mid-fidelity wireframes to high-fidelity wireframes and created a prototype to test the usability.

Usability test

5 participants took part in the moderated usability test sessions. The goal of the study was to find out if the users understand the flow of the website and if they make the right choices to find the desired information. I observed if the user could easily navigate through the website and was able to explain the meaning of the shown information.

Objectives

• Is the user able to navigate to the right information in the right sections?
• Is the user able to plan an appointment to get remote help with their computer problems or other questions?
• Is it easy to schedule an appointment to get an expert at their house?
• Can they find and use manuals to try and fix problems themselves.

Implement feedback

All results, including participant observations, positive and negative quotes/expressions, and errors were translated into an affinity map and then put into a rainbow spreadsheet so I could get an overview of behavioural patterns /issues and come up with valuable solutions. The most important errors are listed below.

• Users did not understand the squares on the homepage where buttons
• Users were confused when first having to choose by why they were visiting the website or as who.
• Users prefer to not only select a date but also an expert
• The overall feeling is that there are still too many steps.

Solutions

• Change the layout of the buttons uses colour to separate them.
• Think of another solution to split the information between users
• Change the number of steps needed to plan an appointment

Final designs

Final product

Together we build a website that was easy to use and where most needed information was directly accessible. In the end, this led to a website with more visitors, visitors stayed on the website longer, after two months we noticed that we were receiving fewer phone calls of customers just asking for information, and after 5 months we were even able to have the store open 5 days a week instead of 6.

What I have learned

During this project, I learned how to lead a team, inform stakeholders, share information, maintain a design system, a bit of HTML and CSS coding, and most of all I learned to build a product that led to the customer as well business satisfaction.

Thank you!