Company and Project Background

Business & Domestic Insurance Services develop insurance products and services that protect businesses’ and consumers’ most valuable assets: their customers, health, family, home, autos and possessions.

Re-stated Brief

In the initial meeting, it was expressed that their target market is Business to Business (B2B), predominantly males aged 35-50 years. The proposed deliverables in the initial redesign phase was the development of user personas and user journeys, a sitemap, and wire-framing with a mocked up website page based on the research that was done and previous outcomes completed.

Original Deliverables

User Personas and Journeys

A set of five user personas were to be developed, outlining the user’s goals on the website, motivations for using it, pain points and frustrations, demographic data and a short bio.  This is to identify their overall character and the main objectives for using the website. This will help determine the type of user that will use the website and which user(s) should be targeted. A set of five user journeys were then to be developed, to show how the user navigates the website. The journeys to be developed include: how each step enables users to reach the next, the website’s pain points, consideration of which device is used to access the website, and benefits to the user/business. This aids the structure and design of the website to be able to create navigation that is easy for the customer to use.

Sitemap

After the development of the user personas and journeys, a sitemap is to be created to lay out all the content pages and structure of the website, and outline the relationship between certain pages and how to continue to the next stage. The navigation of the website is very important to this redesign and is the core aspect within the proposal. The sitemap enables a macro-view of the amount and type of content pages that will be on the website, and to edit accordingly.

Wire-frame

Wire-framing is a visual representation of the user interface but without any brand elements. The three outcomes from above (user persona, user journey and sitemap) all contribute to this stage in the development. This is where the look and the feel of the website is explored in terms of hierarchy of information and putting together all the research. The proposed outcome may be two website designs to demonstrate what could happen with the website when it is taken to a developer.

Website Prototype

The next two stages of prototyping and developing the website with a developer may be explored and decided upon once the proposed initial stage has been completed. There are technical and legal elements that need to be considered in deciding server space, hosting, and search engine optimization (SEO). Due to the scale of the project, there are multiple outcomes that can be decided upon: other students may be brought in to complete the project or taken over completely by someone who you appoint either in-house or outside recruitment. There are many options of which can be considered once the initial proposed outcomes are complete.

Development

The initial meeting with the client proved confusing and took me a long time to process what they were looking for. This was the first of many frustrations. The deliverables above were agreed to in November and due for delivery end of January/beginning of February. There were several problems in the beginning, the biggest one being that I did not understand what I needed to do. I decided to continue and create user personas and user journeys that were not based on real people. These were detailed and well thought through, but lacked real data as discussed below.

Basing the user personas on a fake person would have had no impact on the design and would be missing a crucial process in designing a website. It was only after completing the website project as part of PRA (Reading Buses) that I had an idea and understanding of the steps I needed to take to create a successful design. I realised I needed to start again and talk to real users that used Business & Domestic if I wanted to correctly learn the process that we had been taught. This was after the original deadline had already passed, as the Reading Buses project started the middle of January. Additionally, the client had not been pushing me for the deadline and I was unable to get feedback from my supervisor in time due to a miscalculation, leading to a further delay in the process. I take full responsibility for this delay.

The proposed sitemap had been completed before starting the process again and was used as a basis for the design of the wire-frames. The sitemap was complicated as Business & Domestic had a lot of products under multiple categories and one of the main purposes of the re-design was to simplify the navigation. The client was unsure at some points what they wanted to include on the website as they were reshuffling the focus of their products at the time.

Around the end of March , I decided to start again after meeting with the client and assuring them that the turn-around time would be quicker. It was also around this time that I swapped supervisors from Jeanne Louise to James and acquired Hannah Smith (alumni) who works at Asos to help me with the re-design. In the beginning the client was confusing about what they were expecting from me. It was incredibly helpful to have Hannah help me and guide me in this process as at times I misunderstood what the client wanted.

I reached the breaking point around the end of March when I had to explain to my client I couldn’t fulfil what they wanted. I had a meeting with my client not long after discussing with Hannah and James which route I should take. The meeting proved beneficial as I had not seen my client since the first meeting back in November and things had been at a standstill since. The meeting went well and I came out of it fully understanding what they wanted and the steps I needed to take in order to achieve a successful outcome. They were apologetic in letting it slip to the side and not pushing me on it, which taught me a valuable lesson about the need to continually follow-up with non-responsive clients. That said, I take full responsibility for letting myself fall to the side due to not being pushed.

I quickly began collecting real data with the help of my client and talking to their employees and current partners. I created four user personas and four user journeys that highlighted real pain points that they brought up. The personas that were presented to my client are below. One of the frustrations was not being able to find things that they were looking for on the current website, such as to download sample policy wordings. This was taken into account when sketching and wire-framing started.

Sketches

The sketches is where a lot of my wire-framing is done to understand the different hierarchies and how the user would interact with the website. This can be seen in some of the examples of my sketches for this website re-design. I took these sketches and started working with the ideas in Sketch. I found Sketch was easier to use than Photoshop and more realistic to the web industry than using InDesign. From discussing with the client in the last meeting and feedback from Hannah I was able to start strong with the wire-frame.

High-Quality Wire-frame (greyscale)

The wire-frame that I presented to the client included their brand and all elements including text and photographs in greyscale. This was because I had to as fully as possible what the end website would look like. However, I did strip the colour back for them to focus on the hierarchy and how the user would interact with the website. The feedback that I received from the client and the staff was focused on the copy and text. I had reiterated on multiple occasions that the only copy I had to use was from the current website, which clearly had some issues that needed to be worked on. The client was aware that the copy needed to be worked on by a professional and that I would try and put it together as best as I could. There were no comments on the design, which was both good and bad. It was great because I had no amendments to make to the website and could continue to the full-scale prototype, which would include colour. The drawback was that I was unsure how to improve the design without feedback. This was when I decided to gather a couple users that had no awareness of Business & Domestic or what they did and conduct a small test. This test was to gather information and data based on this wire-frame whether they understood what Business & Domestic represented and what they could do for the user. From the feedback, it was clear what Business & Domestic did and how they could access products that they were interested in. I asked the users to perform certain tasks and it showed that some of the buttons and labelling were misleading. This helped in improving the user experience and to add this adjustment into the final round of revisions.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Deliverable – Full Colour Website

The full colour prototype that can be viewed on Invision can be seen below. To access the website online: here. The next round of feedback from my client was about copy again, but they did like the design of the website and had no feedback in that respect. They were pleased with the outcome of the website and I was glad to fulfil what they had wanted from the beginning: to showcase who they were and what they did. This was where I went wrong in the beginning. I thought they wanted me to design a website to be able to provide quotes and multiple product pages. Once it was simplified and I understood, I needed to design a ‘storefront’ in a way for them to be seen online: “This is who Business & Domestic are and here are our products”. The products that Business & Domestic supply are clearly stated at the first point on the website homepage to direct the user to where they need to go. It was also important to have information regarding who Business & Domestic were in the banner at the top.

The prototype is on-going but will be finished in less than a week once I finish the last edit. The files supplied to my client will be pngs and a link to the live prototype. Due to the complicated nature of coding a website, as a department and myself, we are unable to continue the design till full completion (making the website go live.)

Reflection

It was a slow beginning and I should have pushed and asked for more information in order to understand what needed to be done. It is not down to the client to push me but for me to push myself. I went into the job unsure of how to design a website and purely on the basis of wanting to see if digital design was more suited towards me. I did push myself in terms of learning the process quickly of how to design a website on a professional level and that enabled me to create a successful outcome that the client is pleased with. I have learnt to gather as much information as possible from the client in the first meeting in order to minimise what happened this time.

Changing supervisors and having Hannah Smith as the additional advisor helped immensely in completing this real job in a short period. Hannah’s feedback was invaluable as her job involves website design and user experience on a daily basis. She was always willing to help me and if I was unsure about something she was able to help. I should have asked for more help from my supervisor earlier on in the process and this was my fault. In the future, I would begin to recognise the signs if I didn’t understand something and ask for help, whether that was from the client or someone unrelated.

The design of the website was a pleasant experience that I thoroughly enjoyed. Using Sketch is now my go-to for designing websites. I developed the skills during the Reading Buses project and was able to quickly mock-up the website in the short time I had. One thing that I did not account for in the beginning is the turn-around time in getting a supervisor to see it. This was more of a problem in the beginning than in the end and it was my fault in underestimating the time it took. This meant that on some occasions I was late to the deadline that I had set myself and for the client to receive the outcome. My client was understanding from the beginning which was hugely helpful for when I decided to start from the beginning because I knew that if I had continued it would not be the same result that the client liked so much.

Overall, I am pleased with the outcome of the design because it fulfils the purpose that my client wanted. Following the process from start to finish was hugely valuable experience that I will remember for when I start to apply for digital designer positions. This real job cemented to me that I enjoy the process of creating digital design and specifically website design. While this was my only real job for third year (and having been in Australia for most of second) I learnt a lot in which I might not have learnt if I had not taken on a complicated job. The mistakes and failures I made in this real job will help me if I decide to take on freelance work and for when I enter the design industry.