JBi Digital | Website Redesign

I was tasked to redesign JBiDigital.co.uk and create the most intuitive experience for potential customers. In order to do that, we identified the primary goal for the service, analysed current website and checked how clear it is for the existing users, as well as what on the current site performs / doesn’t perform.

Primary goal for the website: get potential customers to contact JBi for business proposals.

Means: present JBi as a creative and approachable digital agency with a strong client base, creating a smooth user experience, highlighting main services and projects done previously for big brands.

Current site analysis and user testing

Since we don’t have an access to website analytics, we need to conduct a few user tests and observations with users who could be potential JBi’s customers. Observations will help us identify users’ journey, and see how many steps they take to reach the goal.

Before testing, we also ran though quick analysis of a couple of pages to check for common features or patterns across the site:

User testing – observations

User 1 – Evan

Evan is a marketing manager of a start up who want to design and develop an app for themselves. Upon landing on the site, he is tasked to (1) learn if JBi do app design and development, (2) contact JBi.

We observed Evan’s journey on the JBi Digital’s site:
1. He scrolls down to the ‘About’ paragraph to confirm if JBi are the company who design and develop apps;
2. He sees and hovers over nav’s item ‘What we do’, and sees ‘We design’ and ‘We develop’;;
3. At the same time he sees green icons with ‘We design’ and ‘We develop’, which have ‘Mobile design’ under one and ‘Mobile apps’ under the other one;
4. After a few seconds he clicks on ‘Mobile apps’;
5. He scrolls though text on the page (not quite reading), and clicks on Channel 4 Case study;
6. He scans down through the Case study, scrolls up and clicks ‘See how we did it’, which takes him down on the same page and makes him a bit confused;
7. He clicks on ‘Read more’ under the Development section, which takes him to the top of the page. Evan expresses more confusion;
8. He then clicks the ‘Contact’ on the top nav, scrolls through to the form, fills in, hits ‘Send’.

Evan did not use any ‘Get in touch’ forms on pages other than Contact. He thought those forms would direct him to someone to chat about that specific experience, rather than what he wanted.

Evan: “I did understand JBi do mobile development, but I couldn’t see the process or even the results of what they’ve done.”

User 2 – Diana

Diana is a University marketing manager, and she needs to find a website design / development company to create a website for the Uni department she works in. She is given a JBi digital site’s link, and is tasked to (1) find out whether JBi can design and develop a website for them, and if so (2) contact them.

Diana’s journey on the website went as:
1. She lands on the site and clicks ‘Our Work’ on top navigation – to read about what the company does;
2. She sees the list of case studies there and clicks on ‘Active in Style’;
3. She comments she became interested when she saw it was an ‘E-commerce website’ because it is what she is looking JBi to potentially do for her;
4. She reads the brief and hits ‘Watch the video’;
5. She hits the ‘Play’ button, and was redirected to the previous page. She is confused;
6. She stills scrolls down and reads objectives, to find out how similar this project was to the one she has;
7. She reads through and clicks ‘Visit site’;
8. She goes back to the JBi website, and hits ‘Who we are’. She gets confused why ‘Who we are’ is separate from ‘Meet the team’, but comments that the reason she wants to know who the team are is to see which specialists JBi have. She seems happy with the team.
9. She then hits ‘Contact’ on to top navigation and fills in the Contact us form.

The interesting observation was that Diana would scroll down 3 times to the ‘Get in touch’ form on various pages (including when she was looking for the Contact us form), and yet did not see any of those, and instead would still go back to the top nav to hit ‘Contact’ there.

Diana: “So many pages could be grouped together. It would make my experience less confusing if I didn’t have to click here and there when it could just all sit on the same page.”

User observation findings:

1. Users found a few links that were present on the same screen and seemed confused about which one to click to =>
Solution: reduce the number of links on the same screen to one to avoid confusion;

2. Users ignored or didn’t think ‘Get in touch’ form on each page was relevant, and instead would still go to Contact on navigation to contact JBi =>
Solution: remove forms from each page. Alternatively, can place ‘Contact us’ buttons on different pages. This will also help to keep track and monitor the Conversion Funnel in Google Analytics.

3. To understand the service, users were interested to look through the case studies, but in both cases were clicking clicking through on links within the case study and would end up with confusing experience, because links didn’t go where intended to =>
Solution: one single page for a case study without any links would be a simpler and clearer experience.

Card sorting

The user behaviour observation showed, that with too many pages of information currently presented on the site, it makes user journey a bit confusing:

1. Sometimes, users had to click on different links when trying to learn about some service. In those instances they suggested to keep information about the same service on one page only.
2. Someone has also expressed their confusion about how ‘Our work’ in navigation is different from ‘What We Do’. They also noticed that the same type of information was present on the Home page, and suggested those 3 should be grouped together.
3. Another user commented that there were way too many pages overall.
4. One user got confused, because after being browsing on the site, they couldn’t find the ‘Home’ button in the navigation to go back to Home page.

To create a more intuitive hierarchy, I enlisted all pages present on the site, and conducted a card sorting exercise, where participants had to pile pages they felt belonged to each other under the same category.

Since I was briefed that ‘Home’, ‘About us’ and ‘Contact us’ must be present on the site navigation bar, those were kept as the category names. Also, because there are many services provided by the brand, I also included a category ‘Our services’. Users were also allowed to create their own category if they felt that pages would not fit under anything provided.

The [results] showed that the most simple and intuitive way to organise hierarchy would be keeping:

Home – one page with a brief paragraph about the company, what they do, case studies, their work process (how well does it perform though? is it needed at all?) + clients logo grid;
About us – one page with information about the team, and a link to the careers at JBi page (possibly break down to 2 pages);
Our services – a page with a break down of all company’s services arranged in groups;
Contact us – a page with the address, phone number, a Contact us form.

Since Blog can be a great lead generation tool, I would suggest to keep it as a 5th tab on the site navigation, but rename it from ‘Our Two Cents’ to ‘Blog’.

As an alternative, we could also have Case Studies as a separate page featured on navigation. But it’s placement is also worth A/B testing (Case studies on Home page vs a separate page).

Cards ‘London calling’ and ‘Our two cents’ confused test participants. Most of users couldn’t understand what they would find on those pages.

Also, ‘Support’ (as apposed to ‘We support’) was looked at as the way to contact JBi rather than the service that JBi provide.

Wireframes

Since most of visitors use a desktop version of the website, we concentrated on creating a desktop experience first.

Based on card sorting and user observations and feedback exercises, we created 4 wireframes for Home, About JBi, Our Services, and Contact Us. Our Services and Contact Us pages have groups of content, so I suggest to go with tabs within the page.

Mockups

Being given brand guidelines and following wireframes, we designed a few UI mockups. Since we have 1, 2, 3, 4 and 6 columns of content on different pages, I use a 12 column grid for the desktop page layout.

screen-shot-2016-12-28-at-18-29-03

The final Home page mock up:
1. Since the primary goal for the website is to get contacts, we highlighted ‘Contact Us’ in the navigation;
2. The first screen on the page introduces what JBi are, and suggests users to hit ‘Get Started’ if they have a new project;
3. The page scrolls down to  ‘What We Do’ section with a more descriptive introduction of JBi’s services, which break down to 4 categories, each of which can be clicked through for more details;
4. The grid of case studies that can be hovered over to see which client and which type of service was used in a case study;
5. Clients’ logo grid to showcase who JBi worked with;
6. Footer with site map, phone number and social media accounts.

Over to JBi

Going through the research and testing, we came up with certain results which we were trying to incorporate in the final Home page look.

Editing structure: having had the website that operated for some time, it would be better to use analytics to see user behaviour and pages performance. It would also be more accurate, since there would data on many more users. Because we didn’t have analytics, we conducted user testing, which also gave us valuable information about site performance.

Visuals: we were provided brand guidelines with colours and fonts, which we used for the final Home page look. The look and feel can also be tested in future on if they help conversions and make the website clear and understandable.

Date

December 24, 2016

Category

UX Design