pendragon.online

User Story Website

User Story work placement project | Website redesign | Axure RP | Usability testing in a professional environmente

Define

The User Story are UX consultants based in Norwich. Whilst I was on a work placement there in Year 2 of university, they asked me to design a new website for them.

Discover

The User Story requested that a new website be designed and felt that the UX process and information about it needed to be at the centre of the website to help encourage new customers to use their services. If the customers could understand how UX benefits them then they are more likely to choose The User Story help improve their business. The current website does not mention the UX process in depth.

'We need customers to better understand the UX process. That's what we sell.'

A group of people graphic.

Develop

A clickable wireframe prototype that could run in a web browser was created using Axure RP. The wireframe prototype acts like a website that that the user can interact with in the same way they’d be able to interact with any other website.

Prior to creating the final prototype in Axure, I sketched some ideas for how certain pages could look based on how competing firms had designed theirs and also on what The User Story wanted to get out of a new site.

Sketch of how a page titled 'how we do it' might look.

This is how I envisaged a page called 'How we do it' looking. This page would be dedicated to explainin the UX process. The information on this page was later moved onto the 'What we do' page.

Sketch of how a case study page might look.

Sketch of a design for a case study page. The case study page would feature some key information about the case study, a summary, the brief, 'before and after' sections to show the reader what was changed and testimonials.

Sketch of how the home page may look.

Home page design sketch. The mission statement of the company would appear at the top of the page, followed by a section dedicated to displaying the clients that they had worked for and then an infographic about the UX design process.

During its development, I carefully considered the IA of the website and the order that content should be displayed in.

Visualising the UX design process

One of the hardest challenges was to come up with a way of showing the UX design process in a visual manner. It was generally acknowledged that writing out the whole process wouldn’t be engaging for a visitor, so instead I was tasked with creating a visual interpretation of the process.

Diagram explaining the UX process. The four stages (discover, define, develop and deliver) are inked together by lines that join them to show that the process is linked and ongoing.

I wanted the design of the infographic to show how all of the stages were connected, part of one overarching process and were all repeatable. The ideas I came up with showed the different stages of the UX process linked with lines to show that the process is fluid, continuous and repeatable - and that all stages relied on the one before it.

The diagram shows the different stages of the UX process horizontally - the user is able to click on each part of the process and a speech bubble containing information about the part of the process is shown.

Another idea I had was to make the diagram clickable. The user would be able to click on the different parts of the UX design process and information about the part of the process would be displayed - as shown.

The diagram shows the different stages of the UX process with the user at the centre of the diagram.

This design focused more on making sure the customer understood that the UX process was a part of 'user-centred' design. By putting the user at the centre of the diagram, it figuratively shows that the parts of the UX process are all about ensuring that the user is at the centre of design.

The diagram shows the different stages of the UX process horizontally in the traditional 'double diamond' layout. The 'define' and 'discover' stages are in the first diamond, the 'develop' and 'deliver' are in the second diamond. The diamonds represent separate sub-sections of the process.

This diagram is similar, but is arranged more in the traditional 'double diamond' layout which is known amongst UX designers, but possibly not so well-known amongst the general public or those looking for services from The User Story. 'Evolve' was added to show that the UX process is repeating one.

Test

Testing was carried out by inviting members of the general public in to test the website in The User Story’s testing lab.

Before the test was conducted, user personas had been created which were verified by The User Story’s UX researcher. The personas were similar to the customers that The User Story believe they presently have. In this case, personas were helpful in identifying potential testers for the prototype. We generally recruited people who relied on internet services for the running of their business.

Personas

Below are the three personas I created which helped to recruit actual testers

Stock image of a middle-aged man with grey hair wearing a dark green polo shirt.

Mark

CEO of a tourism/city-break planning phone app in Hertfordshire.

Demographic

  • 55 years old
  • Studied Architecture at university
  • Owns a £900,000 house in rural Hertfordshire
  • Earns £100,000 per year
  • Married to his wife of 30 years, two children (now left home), two dogs

Lifestyle

  • House furnishing: 'olde-worlde' but very comfortable and luxurious
  • Phone: iPhone X
  • Computer: Microsoft Surface Studio
  • Shops at: Sainsbury's
  • Drives: BMW 7 Series
  • Holidays: in the UK with his wife

Job tasks

  • Managing the business and ensuring it remains a success by setting strategic goals and evaluating the work and welfare of its employees
  • Creating and implementing the company’s mission statement and strategies
  • Maintaining awareness of the competitive market landscape
  • Communicating on behalf of the business with shareholders, government entities and the public

Job frustrations

  • Keeping his company’s app innovative on relevant where big competitors such as TripAdvisor and Citymapper exist
  • Occassionally users complain that prices of things have changed, attractions and facilities have closed, new attractions and facilities have opened (or similar) and the app isn’t updated to account for this
  • Some features of the app aren’t always utilised (as shown by analytics) - some of these features set them apart from the competition but users aren’t noticing these

Needs

  • Advice and guidance on how to improve communication between clients and the company and the best way to add features and updates to the app
  • Guidance on how to make products and services more ‘obvious’ and accessible on the website
  • Possibly hire somebody who can implement these changes

Dan

Head of IT, large Peterborough-based online tuition services provider

Demographic

  • 35 years old
  • Studied Business Information Technology at university
  • Owns a £170,000 3 bedroom house in Chatteris, Cambridgeshire
  • Earns £25,000 per year
  • Lives with his girlfriend, no children, no pets

Lifestyle

  • House furnishing: 'homely', 'comfy'
  • Phone: Samsung Galaxy A5
  • Computer: mid-range HP notebook
  • Shops at: Tesco's
  • Drives: Ford Focus
  • Holidays: Europe or the UK once per year

Job tasks

  • Managing the IT department and ensuring that IT problems are solved
  • Creating and managing the website
  • Suggesting ways that technology can be used to increase outreach to the marketing department and company directors

Job frustrations

  • The team has built a website but with no user-centred design or usability testing considered – Dan is trying to convince the board that UX design is worthwhile
  • After the website is completed, he wonders if there’s anything else that can be done to increase outreach using technology

Needs

  • Guidance on how improvements to the website could help increase sales and engage new customers
Stock image of a man in his 30s with som facial hair and short brown hair wearing a grey top.
Stock image of a young blonde woman with shoulder-length hair, red lipstick outside in the winter wearing a red coat and white scarf.

Carly

Founder of a start-up company that makes phone apps in Cheltenham

Demographic

  • 25 years old
  • Has A levels and worked afterwards
  • Rents a flat for £500 PCM in Cheltenham, Gloucestershire
  • Pays herself £21,000 per year
  • Single, but looking for love, no children and no pets

Lifestyle

  • House furnishing: contemporary
  • Phone: iPhone 7
  • Computer: MacBook Air
  • Shops at: Morrison's
  • Drives: Vauxhall Adam
  • Holidays: in the UK and Europe with friends

Job tasks

  • Managing the business and ensuring it remains a success by setting strategic goals and evaluating the work and welfare of its employees
  • Creating and implementing the company’s mission statement and strategies
  • Maintaining awareness of the competitive market landscape
  • Ensuring that sufficient funds are in place so that the business can grow and prosper

Job frustrations

  • The business needs to further develop its apps ‘Car park finder’, ‘Bill splitter’ and ‘I can’t remember where I put it!’ in order to get funding
  • Tight deadlines means that it is a challenge to find an agency to work with
  • She’s not sure how to progress these apps and add new functionality that has been suggested in user reviews
  • The company cannot afford expensive consultancies
  • The company’s requirements and goals are often changing very quickly as they receive different targets to meet for funding

Needs

  • Consultancy on how to further develop the website and apps to become eligible for further funding
  • Competitively-priced services and a team of professionals that can work quickly and adapt to change to suit her business needs

Test tasks

Annotated table showing the tasks that the user needed to do in order to test this site. Annotations from Katie Fisher, User Story, advising me on how the test could be improved.

The test I created consisted of several tasks that the user needed to complete in order to assess how much they can find out about the company from the website. After the tests had been completed, there was a short interview with the user after to find out if there was anything else they would have liked the website to have told them about the company and to find out exactly what they knew about The User Story having looked at the website prototype.

Reception was generally positive. The site’s simple design was praised and users were able to find the information they needed to complete the tasks. Users mentioned how they liked the ‘human touches’ such as listing the company dogs as employees and the humorous staff bios. However, some of the technical language used to describe the UX process was thought to be too technical and too lengthy, so not all users were able to understand the UX process fully.

What users said

'I'd expect more information about how they've helped customers in case studies and what the original problem was.'

'The site shows that The User Story has got a lot of experience.'

'From the site I can see that The User Story would look at customer insights in order to consider what website would be made.'

Graphic showing people.

Outcome

The outcome of this was a fully-functional clickable wireframe prototype of what a new website for The User Story could look like. Below are some of the final wireframes produced.

Wireframe showing the home page.

The home page of the redesigned website features a bold mission statement to introduce the reader to what the company does and some examples of famous companies that The User Story has completed work for.

Wireframe showing the work page.

The page dedicated to showing the work that The User Story has done would feature the logos of the companies that the company has done work for. The user would click on these to visit the case study page.

Wireframe showing the who we are page.

The User Story is a small company and so all staff there work with their customers, therefore the company wanted this page to be 'human' and personal - as well as introducing the dogs to give an idea of office culture!

Wireframe showing the AdLib case study page.
Wireframe showing the Virgin Wines case study page.
Wireframe showing the Zest case study page.

Case studies form a large part of the new site. The idea is that a potential customer would be interested in looking at previous work that The User Story has completed to transform websites and may decide to use them based on the strength of these case studies. Case studies document the brief, what was delivered and what the client said.

Video demonstration of the clickable wireframe prototype in action.

Evolve

The copy about the UX process on the site needs to be rewritten and simplified so that it is easier to understand. The design of the website can then be developed into a high-fidelity prototype with colours and images and this process can begin again.

I did redesign the ‘What We Do’ page based on the feedback from usability testing. Usability testing proved that users did not read the entire page and so often did not read about all of the services offered by The User Story, possibly due to it being too long. To combat this, I created a wireframe of a shortened version of this page, shown.

Related

Enjoyed this case study? Have a look at some similar work!

FFA brand logo.

Accessibile Mobile e-Commerce Site

A shocking 98% of the top one million home pages on the internet fail to meet accessibility standards. Mobile use by the blind is also very low. How can this be improved?

Stellardrive Car Infotainment System

Infotainment systems are standard even on entry-level cars these days, so why are they still frustrating to use, slow to operate and poorly rated? What would be better?

Cura-T Facebook Chatbot

How do you make finding clinical trials easier? Interning at Earthware, I worked closely with Cancer Research UK to develop a Facebook Messenger chatbot to do that.