Odyssey update | deepshikha

DEEPSHIKHA KAMERKAR

User Experience Designer

Home

Work

What was the ask?

Odyssey bank would like to reimagine the design and user experience of the corporate website, making key content more accessible to visitors and operating as a marketing funnel for engaging customers.

How did we approach ?

During Phase 0, the Discovery phase, our team laid the foundation for our design process by establishing the service blueprint and persona of the product. This thorough understanding served as a solid starting point for Phase 01.

To inform our design decisions, we conducted a comprehensive investigation into the websites of banks catering to similar personas and positioned at the same level as Odyssey Bank. Drawing insights from best practices, we identified key moments, crafted task flows, developed Information Architecture, created rapid paper prototypes, conducted usability testing, and ultimately crafted the UI and governance to enhance the user experience.

The impact

The NPS score of the website

Banking Project

REDEFINING BANKING EXPERIENCE

Odyssey(name changed for privacy reasons) is a journey to launch a new human-digital bank with a passion for personalized banking. Odyssey wanted to reimagine its business from the ground up to operate its offering and operations.

My Role : UX Design, Testing, Service Design

Project Type : Web Application, Mobile Application

The corporate website

00

Understanding Customer Service Operations (As-is) and digital experience ecosystem

1/1

01

Knowing the users for whom we are designing

We created character profiles that are representative of different groups that share similar traits, attitudes, and goals with regard to banking products, services, or experiences.

These were developed by reviewing previous Lending personas, insights from previous work with Odessy bank, and Google Analytics data from the current website.

1/1

Pic(1) : It show different proto-personas created in the form of carousal. Click on the image above to expand and view in detail

02

Assessing what the industry does best

We have looked not only to Odessey's direct competitors but also throughout the finance sector from High Street Banks to Insurance companies, in search of the best-in-class examples for Odessey's websites. By performing a UX Competitor Analysis, we assessed competitor sites to see how they design for their users, as they are likely to be solving similar user needs. The goal was to extract the best-in-class examples and strategic insights into the features, functions, flows, and feelings evoked by the design solutions of your competitors, in order to inform our own approach for a better user experience.

Corporate Website — Team Workspace - Frame 41.jpg

Pic(2) : It shows the best in class research done in details. Click on the image above to expand and view in detail

04

Designing the key moments

Taking the proto-personas as a guide, but also making adjustments along the way, For that, we mapped the basic user flows and functionalities to sustain our concepts in realistic user scenarios.

05

Wireframing

The building block that aids in designing the user interface and experience for the web/mobile interface is wireframing, which is a key stage. Wireframe creation and fast testing, in my opinion, should be prioritised because they will form the foundation of the structure, just like the research or discovery phase did.

I find that starting with paper and a pen is the best approach. I have the flexibility to experiment and make errors.

I design several solutions for a given problem, which enables me to have a broad perspective on the problem. Here, paper and a pen appear to work perfectly because it is quick and simple to alter.

The next step is to put it on a digital platform after some buddy testing on paper and pen. Here, I created the wireframe using the sketch software.

06

Ui Designs

Corporate Website — Team Workspace - Frame 48.jpg

Corporate Website — Team Workspace - Frame 52.jpg

07

Testing

Our objective with this testing was to

•Test the usability of the new corporate website design

• Mitigate the risk of what will be built

• Gather feedback to inform future design decisions

The Methodology

•We conducted usability testing with 15 non-Odessey banking customers:

•We interviewed 5 participants from each segment (5 Business owners, 5 High Net Worthy individuals/Mass affluent, 5 Mass market savers), in 1-to-1 remote sessions, for 1 hr each.

•We gave participants access to InVision prototypes(cannot publish in the public forum due to NDA) and asked them to share their screens back as they completed two to three representative tasks and shared their thought processes and reactions.

• Design feedback was captured throughout as well as participants’ reflections at the end.

The Summary

Participants perceived the bank as a business-first bank with experience and expertise

All found the layout clear and easy to navigate.

They liked the colour, spacing, and clarity of language.

The goal was to review the features and layout of different competitors to come up with ideas and insite for Oddessey bank's corporate website. Listed below are the banks analyzed for features and layout.

Barclays

NatWest

HSBC

Santander

Nationwide

Lloyds

Handelsbanken

Aldermore

Shawbrook

Lendinvest

Citi

Chase

Aviva

Standard Chartered

Capital One

Hedvig

GoCardless

Qonto

OakNorth

Monzo

Atom

Paragon

Revolut

Starling

Min

to your destination

1. Consistent and intuitive design makes a good customer experience

Consistency is crucial for an excellent bank website design. A consistent design is intuitive. It carefully guides users through the banking website by eliminating any confusion and creating a sense of control, familiarity, and reliability.

2. Reviews build trust in our products

People are inherently social beings, so it’s no surprise that reading testimonials and reviews can help in their decision-making process. Industry recognition can also help to make a decision.

3. Use a conversational but professional tone of voice

A human-digital bank implies a conversational tone that doesn't sound generic or extremely rigid and corporate. That tone of voice can be adapted to different audiences as long as it has some principles to follow.

4. Signpost to improve navigation

Breadcrumbs are an effective visual aid, indicating the location of the user within the site’s hierarchy. Often forgotten, they not only help the overall navigability of the website but also improve crawlability from search engines and provide handy help.

5. Offer shortcuts to key products

People visit financial websites with a specific goal in mind. They want to get to things without friction and receive some guidance when they need it. Intelligent and prominent shortcuts on the top of the page help users navigate faster to their objectives.

6. Make corporate information simple and useful

The classic 'About us' section should be thought through from the customer's perspective. More than a place for facts or articles about the company and its origins, it's an opportunity to enhance the bank's credibility and connect with customer values.

7. Progressive content disclosure

Messaging should be simple and organized in a scannable format for users to digest and move to the next level of detail if they are interested. Additionally, it should also be written with SEO best practices in mind to ensure findability.

8. Provide support when needed

People often visit websites with the intention of seeking help, and good customer support is essential to establish long-lasting relationships. Bringing that help to where it matters and makes a difference is essential, in addition to enabling the efficient management of product and service FAQs.

9. From simple to more complex product comparison

Customers want to make the most informed decision within the possibilities. In some cases, they would like to compare products within the bank. In other, they would like to do it with products from competitors.

10. Snapshot rates view to facilitate decision

Interest rates are one of the most important criteria considered in making a decision on a financial product. Make them simple to read, understand, and allow them to shine where they need to.

11. Help people create different scenarios

An online calculator or simulator will help reduce unnecessary questions about how much interest the customer may have to pay or receive. This also helps to stop using fixed complex descriptions or scenarios that don't match the user's needs.

12. Anticipate the process to show speed or simplicity

By anticipating a process's steps, banks can remove anxiety from the user to acquire financial products.

03

Navigating complexity through clean information architecture

We have developed an architecture that provides enough flexibility to tackle this and allows for expansion when new products and services are added. We also brought more consistency and less fragmentation to the more corporate areas of the ‘about us’ section.

Click on the pdf for detailed IA