Finance - Website

What I did

Project Kick-off Meeting

The purpose of this initial meeting was to firstly introduce the team, secondly to understand the project background, what success looks like and understand what needed to be done, and lastly, to agree on how to work together effectively. To get the project up and running, the team outlined what was needed from the client to complete the next steps in the UX phase.

‍

UX Research Phase Requirements

Initial UX Research

• Creation of the UX report, showcasing UX findings from HotJar and analytics.

• Presentation of the UX report to the client.

• Implementation of findings directly into the design phase for the other templates, using gained data.
  ‍

‍

Research - Phone Interviews

• Two types of user questionnaire were created to ensure the collection of all data, which was achieved through phone-based interviews. This helped to collect valuable insights and to apply them directly to the design or follow up on.

• The questions were divided into "Consumer" and " Stakeholder" based questionnaires, which focused on frustrations, pain points and suggested improvements. The questionnaires was reviewed by the client and after implementing their feedback, the questionnaire was conducted via phone interviews.

• Results were formatted in separate google docs based on the user. This allowed easy access to the results to both the client and the Kooba team.

Sitemap

The following step was the creation of the sitemap, which outlines the site structure and the template applied to each wireframe. This was used to define the taxonomy through grouping of related content. This ensured that the content is in places users would expect to find it.

• T01 - Homepage

• T02 - Form Landing

• T03 - Standard Content

• T04 - Standard Listing

UX Wireframes

Wireframes were created to design at the structural level. The aim was to lay out content and functionality on a page that takes into account user needs and user journeys.

• One of the focus areas was the natural language form design, as these are web forms that don't follow the traditional label-plus-input-field-style. Instead, they consist of input fields that are embedded within a sentence, written in natural language.
  ‍
• The purpose of natural language forms is to make filling in a form as easy as possible and maybe even a little fun for the users.
  ‍
• The unique selling point of this form is that it functions as a pension calculator. The users inputs their current details in relation to finances, and this would generate an output that compares their current savings and their expected saving with Rockwell's services. Additionally, users are prompted with a 'Contact us' call to action at the end of their pension calculation.

• Review of sitemap and wireframe from the client.

• Implementation of client’s feedback.

• Conclusion and sign-off of the UX phase.

‍

UI Design

• The overall visual appeal and usability of the website was improved thanks to a professional and approachable look and feel. The new website sets the overall message of the Rockwell brand as being an approachable and professional financial management organisation, providing a wealth of information in relation to finances.
  ‍
• Staying within the current brand colours that was used by the client, and choosing the new direction of the website design, it was then presented to the client.

UI Feedback

• Through InvsionApp the client collaborated on design prototypes by adding comments and feedback directly to the design screens, followed by feedback implementation.
  ‍
• The client was unsatisfied with the colours used in their branding at that time. They planned to update their brand and wanted new appealing modern colours that reflected this change. The feedback was taken onboard and was iterated upon.
  ‍

UI updates

• Taking the clients feedback onboard, adjustments were made to the colour pallet of the website design and slight changes to the imagery selection in the website design.
  ‍
• A "Make an appointment" call to action was added to the functionality to the Rockwell employee cards in the design. Allowing users of the website to set up a meeting directly with that employee. This was achieved through Calendly, which is a meeting scheduling software.
• ‍
• Creation of multiple variations of the ‘Donate’ CTA button.

• Creation of light box feature including a CTA of "Get in contact" was added to all video based solutions on the website, to entice users to get in contact.

• Improved explanation of the UI homepage design to the client by sending links showcasing the hover state interactions separately within the design.

• Conclusion and sign-off of the UI homepage design.

‍

• The natural Language form went through a number of revisions due to phrasing of questions to be asked to the users. But also the final visual displayed to the users in relation to their current financial calculations.

• Through collaboration with the client, the form output visual was settled on a "fuel Gauge" type of visual.

‍

Handover Process

‍

File Handover

Design file organised into a Desktop, Tablet, Mobile, and asset views. Assets including Colour pallets, text styles, and Illustrations

Test Site Review

Feedback provided to front-end regarding bugs and other issues, followed by amendment. This was achieved through screenshots and logging of issues on Basecamp through a “To-do” list, followed by assigning the issues to the allocated F.E team member.

Brand Update

The client updated the brand logo design, which fit in frictionlessly with the new website design. Complementing the new look and feel of the website design.

‍

Website Launch

Feedback & Learnings

• The project was not in line with the original timeline but was launched successfully without any issues.

• The team was happy with the success of the project but slightly frustrated that the design process had a lengthy reviewing process.

• The client was very satisfied with the final result.

• The main lesson that can be learned from this project is that we need to improve the communication process that describes what the client will be receiving throughout the agreed duration of the project.

• Additionally, user testing plays an important role in the success of the project. However, due to the nature of the design agency and the limited timeline provided to complete the project, user testing could not be undertaken. In future projects of a similar nature, it would be an utterly important matter to consider.

‍