Econ Bank

Case Study - detailed analysis:

The Project 

Project Scope

Econ Bank: Online Banking System - Responsive website and application (Desktop/ Laptop, Tablet and Mobile Phone)

★ Designer's personal challenge: 

Apart from the main user flow (critical path) (in teal colour), to integrate the following:

✦ Dual "sign-in" flows (Light in purple and Full in teal colour) for website and application (2 flows).

✦ Accessibility flows - Languages and Assistive Technologies (AT) (2 flows).

✦ Build a website and application with multiple components to reduce the number of frames (lean design).

Project Overview

The product:

★ A responsive (desktop/ laptop, tablet and mobile phone) website and application for a fictional online banking system (Econ Bank), to allow users to have two sign-in/ access modes and account features: Light and Full. 

✦ The Light Access mode is for checking the accounts balance and do quick transfers (up to £250 day limit).

✦ The Full Access mode is to provide all services to the users/ customers (all features to be visible).

★ Target Users: All types of users (14 years old - no limit), first time internet users, etc. 

Project duration:

October - November 2023

The problem:

★ The existing online banking system for Econ Bank (fictional banking institution) provides full access for their users only. Most users find the existing sign-in procedure to:

✦ Take a lot of time, 

✦ To be unnecessary complex 

✦ With a large number of security codes that are excessive for daily quick balance checks and transfers. 

Hence, the customers don't use the online banking system extensively and rely on visiting the actual bank branches. 

★ Econ Bank would like to enhance their online banking footprint, increase the number of online users, and to provide a more satisfactory service. This is an attempt to attract more new customers and to provide more options to the existing ones. 

★ Most customers that have used the existing online system, have experienced anxiety or psychological discomfort when transfers take place. There is not any integrated notification system to prevent fraud and promote internal communication between users. They have to rely on external communication and messaging applications to check if their transfers are done successfully. This is very frustrating, as the existing system signs-out the users once they leave the website and application for security reasons. And most of them have to sign-in back (onerous task) to check if the transfer is done successfully and their latest account balance. 

The goal:

★ To provide an easy to access online banking system (responsive website and application for desktop/ laptop, tablet and mobile phone devices) with the 2 different “Sign-in” Access and Account modes (Light and Full) and to enable quick account balance checks and fast money transfers (Light mode).

★ To provide a user-friendly online banking system that brings value to the users and serves for their daily fast pace requirements and more detailed/ analytical functions.

★ To promote a safe environment by preventing fraud and encouraging internal user communication.

My role:

★ UX designer, 

★ UX researcher 

★ UX writer, and 

★ UI designer 

[For all Phases - “Product Development Life Cycle”: Conception (Phase 1) to Delivery (Phase 5)]

My responsibilities:

★ Defined strategic project scope

★ Conducted strategic research

★ Conducted design research

★ Prepared empathy maps

★ Prepared personas

★ Prepared user journey maps

★ Prepare problem statements

★ Accessibility considerations 

✦ Languages

✦ Assistive Technologies (AT) 

✦ Building and incorporating visual Accessibility Features in accordance with WCAG requirements.

✦ Website only: Visual contrast

✦ Website only: Brach accessibility

✦ Website only: zoom

★ Prepared sitemap diagrams

★ Conducted interviews

★ Conducted usability studies

★ Designed paper wireframes

★ Designed digital wireframes

★ Designed low-fidelity prototype

★ Designed medium-fidelity prototype

★ Designed components to enable compliance with sticker sheet (design system)

★ Designed sticker sheet (design system)

★ Designed mockups

★ Designed high-fidelity prototype

★ Designed connections

★ Designed triggers and interactions (component graphics, motion and animation)

★ Incorporated findings from usability studies

★ Incorporated and coordinated design iterations 

★ Graphic design

★ Logo and branding design

Understanding the user

User research: summary

To fully understand the challenges of the existing users, the very problematic online banking system and the competitors' systems: 

★ I conducted interviews and created empathy maps to understand the existing and potential users.

★ I prepared user's journey maps to list the challenges of the existing users and to unveil improvement opportunities.

★ I defined the user needs and aiming to incorporate in the design.

★ I researched other competitors' products and online banking systems (websites and applications) to further understand and resolve the issues experienced by other online banking systems - competitive audit.

★ A few different user groups were identified during research, but the two critical ones that incorporated most challenges are:

✦ Users with Accessibility (Languages and AT) requirements 

✦ First time internet users and elderly users

The selected user groups have confirmed the initial assumptions about the Econ Bank visitors, but research also revealed that time and finances was a very limiting factor in visiting the real-life premises only. 

★ Other user problems, had to do with fast money balance checks and speedy transfers: 

✦ Without compromising security

✦ Enabling users internal communication (within the online banking system's website and application)

✦ Reducing transaction anxiety

✦ Avoiding complex and complicated user flows.

User research: pain points

1  Doing fast money balance checks (Light Sign-in) to personal and linked accounts, without compromising security and avoiding complex user flows.

2  Doing fast money transfers (Light Sign-in) to linked accounts, without compromising security and avoiding complex user flows.

3  Having an internal communication system of notifications, so users receive notifications from the payees, when money paid to their accounts.

4  Having a separate full access mode (Full Sign-in) to bank accounts, including linked accounts, to provide all services and operations, but again avoiding complex user flows.

Persona: Mary

Problem Statement:

Mary is a young professional that uses online banking websites and applications extensively, who needs quick, simple and easy access to the online banking website and application, because she wants to check her real-time account balance and to transfer money easily to her contacts.

User journey map

I prepared a user journey map of Mary’s experience, to identify possible pain point and improvement opportunities, while using the existing online banking system. Additionally, to fully observe her feelings throughout the journey and to improve the emotional responses and experiences, too. As observed before, one of the problems and pain points was the users' anxiety due to transfers, without having an internal notification feature. 

Starting the design

Paper wireframes

I attempted to draw 4 design options of the same Homepage template frame, including the two parts (A and B) of the responsive website user flow, where: 

★ Part A is the Homepage template design before signing in and

★ Part B is the Homepage template design after signing in.

I focused on creating a strong visual structure, by incorporating and promoting simplicity and consistency along all elements of the online banking system. I ensured  the inclusion of all the important elements that have to be visible and distinguishable at all times, and to make the navigation and sign-in task very straightforward. 

At this stage, I haven't designed the Light and Full Sign-in Access modes yet, but they will be integrated in the next design phase of digital wireframes. 

Paper wireframes - screen size variations

In parallel, I invested time in designing the responsive requirements of the website and application:

★ Desktop/ laptop

★ Tablet and

★ Mobile phone

This is an effort to see how all features can be accommodated, without compromising the design and the required information. I did 3 design versions for the 3 different frame/ screen sizes, to reflect the breakpoints and the above the fold information. Additionally, I attempted to integrate a consistent and comprehensive visual language, to bring the design agenda and Econ Bank's branding forwards. Last but not least, as accessibility is a crucial design and functional element, I emphasized it by placing it to the top bar. Hence, to be always visible to the users, in all modes and screen frames/ sizes.

Sitemap

The sitemap below shows both Sign-in options (Light and Full Access mode) of the responsive website and application. The Light Access Sign-in option is in purple tones and the Full Access Sign-in option is in teal tones. In consequence, and as it is indicated below, there are two critical user flows that have to work in parallel in order to accommodate the users' needs, for quick transactional tasks versus full banking operations.

Digital wireframes - templates: desktop/ laptop and tablet

The next phase of the design development is the preparation of the digital wireframes for desktop/ laptop, and tablet frames. All important features that identified during the research phase are fully embedded within the layouts. 

Both Access "Sign-in" modes were incorporated in the design, to understand better and imply the optimum user flow for each individual mode. The additional feature of "Create Account" has been included for the new users of the online banking system. 

A separate graphic approach has been adopted for the two user flows, to reflect better the nature of the users' involvement, expectations and tasks. For the Light Accounts a floating graphic window has been integrated in the design to give to the user the feeling of a more temporary feature for quick use. But for the Full Accounts, the design layout is graphically embedded in the main website and application frame, to give to the user the impression of a more permanent feature.  

Finally, additional features such as Security, Help & Support and marketing opportunities (Products & Services) have been encapsulated as per Econ Bank's requirements. These functions are equally important, especially for customers that have issues with accessing their accounts or security reporting, and without signing in. 

Digital wireframes - templates: mobile phone

In parallel, below is the design for another breakpoint - mobile phone frame. The design of this frame typology has significantly different layout structure than the very similar layout arrangements of the desktop/ laptop and tablet. Due to the mobile frame's compact size, a more condensed design approach is incorporated to still include all the important elements, to emphasize the critical user flows and operational functions.

Digital wireframes - Homepage template: All frame sizes (Breakpoints)

Below are all frames/ screen sizes (breakpoints), to compare and contrast the similarities and differences to each other. 

★ Similarities:

✦ The desktop/ laptop and tablet frames have similar landscape (horizontal) layouts. The only difference is the design (UI) of some call-to-action buttons. For the tablet, due to lack of space, only icons (instead of text descriptions) have been used. 

★ Differences:

✦ The desktop/ laptop, tablet and mobile phone frames have different and distinct layouts. The first two have a landscape arrangement, but the mobile phone has a portrait layout, where elements are stacked vertically.

Low-fidelity prototypes - static*

As the desktop/laptop design is very similar to the tablet layout, from this point onwards only the desktop/ laptop and mobile phone frames will be further developed to low, medium and high-fidelity prototypes. 

Reflecting the aforementioned design requirements, the low-fidelity prototype includes two user flows the Light Sign-in and Full Sign-in modes. Both modes include the balance checking feature, however the full mode has more operational elements and provide to the users the full banking experience. 

*static = graphical representation

Refining the design

UI design elements: Sticker sheet (Design system)

So far, the design has been evolved into the 2 main flows, and to distinguish between each other, the two thematic colours were introduced (purple and teal). An additional set of grey tones are introduced, to reflect the Designer's graphical observation. The thematic colours have been adopted into all steps of both flows, to enable a visually coherent and cognitive navigation - Light or Full - for the users. 

Additionally, a number of thematic complementary/ accent colours have been introduced, to further enhance the visual identity, animation experience, and triggers interaction. For example for the Light Accounts, tones of purple and pink have been integrated and for the Full Accounts, tones of teal, olive and lime green, respectively.  

A few other UI elements that have been designed and submerged:

★ All buttons and call-to-action elements were revised, to be in accordance with the WCAG minimum requirements 44px. 

★ The triangular shape of the brand logo has been incorporated, and strongly reflected in the revised designs. 

★ A strong graphical diagonal arrangement has been incorporated in the frames, to further portray the logo and dynamic nature of Econ Bank's online banking system.

Responsive Website: Sticker Sheet

Responsive Application: Sticker Sheet

Mockups - templates

As reaching closer to the high-fidelity prototype phase, the website and application templates have to be revised to bring forward the visual agenda, and to fully encapture the brand identity. The implied amendments are in accordance with: 

★ First round usability study findings (R1).

★ Second round usability study findings (R2).

★ UI design elements - sticker sheet (design system)

★ Designer's personal challenge

★ Designer's graphic observations

Frame sizes and layout challenges:

★ The UI elements were fully integrated in the desktop/ laptop and mobile phone frames, and more triangular shapes were fitted in and composed the design. One of the basic challenges was the compliance with WCAG, where the minimum button size has to be 44px. Some buttons are less than 44mm high but are wider, hence compensate the lack of height.

★ Another important revision for the mobile phone frames mostly, is the "Accessibility" and "Chat/ Help & Support" features. Where they are permanently visible (in the frames) but expand downwards and upwards to reveal the menus, respectively. Similarly to the above observation, due to the triangular shape of those features, the required 44px size is reduced along the vertical axis, but the wider landscape shape provides for the minimum touch zone.

High-fidelity prototypes

The next step from the design of mockups is adding the connections, triggers and interactions to make the user flows fully operative and animated ... hence the high-fidelity prototype. Along the design development, a number of components were incorporated as shown in the sticker sheet, and in accordance with the Designer's personal challenge. This means that the number of frames reduced to very basic designs and most animated elements are part of the same component. As a result, I managed to adopt a lean design approach, where I had the opportunity to design and incorporate complex components with very minimal number of template frame designs.

Accessibility Considerations

★ Accessibility (Languages and AT) and "Chat/ Help & Support" tabs have been included in the desktop/laptop and mobile phone frames and are visible to users all the time, but without creating visual clutter.

★ Highly contrasting colours are incorporated to pass all the WCAG AA requirements, and most WCAG AAA testing requirements. 

★ Most call-to-action buttons and features are compliant with the minimum WCAG requirements (44px). However, some more testing can be done, due to their unusual triangular shape. 

★ Most call-to-action buttons and features have both icons and text descriptions, to make clear their purpose and function to the users. 

Going forward

Takeaways

Impact:

This banking responsive website and application put accessibility and customer "Help & Support" at the forefront, and reflects the Econ Bank's priorities towards their customers. In parallel, the design provides a strong visual identity to distinguish from other online banking systems (competitor banks), and encourages advanced functionality due to the duality of a Light and Full Sign-in Account accessing system. Finally, the testing and user flows iterations resulted in very task-completion oriented solution and user-friendly design. Econ Bank aims to empower their existing users with this new online banking system, and to attract new customers, as the result or lean design and seamless online operations.  

Quotes from usability studies:

"Visual contrast of selected elements is very helpful“

"Very easy and straightforward navigation and user flow“

Learning Outcomes:

This was a very interesting project, and I have further advanced my learning for UX and UI design - theory, methodology and practice. I had the opportunity to create 2 user flows in parallel, in order to provide a better product for the users and bank customers. In parallel, I developed 2 different layouts for the responsive requirement of the project brief (website and application). Although, for this project I decided to create a very basic UX design and focus on the UI elements, I still had the opportunity to test the user flows extensively. It has helped me to simplify the user flow path steps, and to cater for not very experienced users. I developed the sticker sheet and built up a few components, to further support the operational and human/ graphical interface part. I had a first-hand experience about about constant testing and iterations, incorporating the usability study findings and my own personal observations and ideas (Designer's personal challenge and graphical observations). Last but not least, I followed the WCAG visual contrast requirements, but the colour palette was a bit restrictive, and that was a very interesting graphical challenge that I managed to overcome. Last but not least, I did a number of designs, and I tried to integrate the logo and dynamic branding of Econ Bank. in all frame layouts and all graphical representations. Certainly, some features slide down/ up in a more diagonal direction, which is not a very usual design practice in the industry, but I really wanted to challenge myself and to bring forward some fresh ideas. 

What I could have done better:

★ Responsiveness and diagonal design:

Initially, I tried to design a responsive website and application, just in terms of breakpoints. However, later on I realised that I had to design how the elements within each frame can be re-arranged, in accordance with the selected frame, and still to be legible. Possibly, the diagonal nature of the design hasn't been very easy to accommodate the responsive requirements, but I think I have done it successfully for most frame sizes. However, next time this is something to test extensively while developing the concept phase to ensure a fully responsive design. Also, I have to get more familiar with the Figma auto-layout tool, which plays an important role to the composition of responsive designs. 

Unfortunately, I started the design of the application by using the Android small frame (360 x 640px) which I assume it was the smallest frame, but then I discovered a smaller screen frame - iPhone SE (320 x 568px). This frame is something to reconsider when designing, and make sure all elements fit to the smallest size first, and then scale up to larger frames. As the design stands, it scales up acceptably for larger frames but when using the smallest frame some graphic and design elements are clashing. Certainly this is something to test more in my future projects. 

★ Security and access: 

This aspect is something that I had to consider more during the preparation of the Sitemap (Information Architecture) diagram. Ideally, 3 types of Hamburger menus could have been incorporated: 

✦ Not signed-in version --- where generic security info could have been provided

✦ Light Accounts version --- where users could freeze their cards and bank accounts temporarily 

✦ Full Accounts version --- where users can apply for new accounts and products and fully cancel their cards and bank accounts. Also, a full profile feature with a more holistic user features and controls.

★ An exit "sign-out successful" frame for both access types can be added, to make it clearer to the user that they are signed out, and their data is secured.

★ Add icons for the accessibility and chat/ help tabs (mobile phone frames); During the design development and as per the 1st usability study findings, icons were added for all call-to-action buttons and features. However, during the mockups design, some icons have been omitted due to lack of space. However, this is something to be reconsidered in the future. 

★ Test the buttons and touch points:

✦ Due to the incorporation of logo and branding in the design of the layouts, a number of triangular buttons have been introduced. In most instances, due to their reduced height they are smaller than the WCAG requirements (44px). However, they are a lot longer and potentially compensate the non-compliance. This is something to be tested in a future usability study and a more informed decision to be taken. 

✦ Ideally, the UI has to be tested by users with mobility issues; For example can the triangle buttons operate properly, when they are touched by someone's knuckles, instead of fingers?  

★ Figma technical issues: 

✦ For triangular buttons, the touch area remains rectangular (as this is the starting point of the shape) and in some instances there is overlapping of those areas, even if visually it doesn't look like an overlap.  This will confuse the users - as they might press within that overlapping area and follow another user flow than the required one. Some control can be achieved by the right sequence but still some discrepancies have not been resolved. I contacted Figma to report the issue and waiting for a response. 

✦ A number of components have been build and utilised, hence the template frames seem to be very minimal, but all individual steps and tasks incorporated within the components. I am not sure if this approach is being used in the professional world, and if this is a good design and technical practice, to enable the code developing part for the front-end/ back-end engineers. However, it has been a steep learning curve for me in designing and composing complex and interactive components.

✦ Building complex components was a learning curve and many times I got confused with how exactly they have to be built, sequenced and function. However, I practiced a few times in testing some ideas, and managed to compose all the required complex components.

✦ Some components (especially for the mobile phone frames) are not very responsive when changing frame sizes, this is something to be reconsidered and redesigned in the next iteration.

✦ Complex components that contain a flow don't work by using the frame return button, a separate button embedded within the component has to be embedded to allow "front and back" navigation.  

✦ When I tested the prototypes on my desktop/ laptop they work properly, but when testing them on my tablet and mobile phone some buttons are not working. I have contacted Figma and awaiting for a response. 

Next steps

1. Spend some more time improving the UI elements of the responsive website and application. Especially, revisit the responsive features within the mobile phone frames and solve out some discrepancies.

As mentioned before, possibly use the smallest mobile phone frame to redesign the application, so it is fully responsive for all frames and breakpoints. 

Also, if time and budgeting allows, I would like to fully design for 2 more breakpoints: 

★ Tablets and 

★ Wide/ curvy wide screens that are used mostly by gamers but a lot of other professionals, too. 

2. Create some more frames where I can test more features and part of the website (currently it’s mostly a hierarchical and sequential models), but I would like to create some parts to have a matrix model.

To fully bring forward the sitemap (Information Architecture) in practice, and compose more content and security features that have to be integrated.

3. Conduct another usability study to check the UX and UI elements against accessibility standards and requirements.

A few items to be tested on the third round could be:

★ User flows (especially additional ones that haven't been design and tested, yet)

★ Button sizes (to be fully operated by fingers, knuckles, palms, etc.)

★ Button touching area interfaces to be resolved and separated (currently overlaid in some instances)

★ Colour contrast

★ Colour themes and cognitive functions

★ Product to be tested by various user types:

✦ Teenagers

✦ Adults

✦ First-time internet users

✦ People with disabilities (physical and mental)

✦ Neurodivergent users

Conclusion

This project has been a very steep learning curve and experience. I learnt a lot more about the UX/ UI theory and practice, and I have developed more my technical skills. By using Figma, I built more advanced features and created a visually and functionally coherent design. I spent a lot of time in Figma experimenting with components and interactions, and I incorporated a UI visual agenda to promote the Econ Bank's unique branding. This made me a more confident Figma user, but still there are some features to get more familiar with, such as Conditions and Variables. 

Furthermore, I had the opportunity to experience a new sector that I haven't designed any products before - Fintech. I assume a number of security and GDPR issues haven't been fully considered. But this is something to further develop in the future, as I would like to design and work on this particular sector. In parallel, I was thinking how my designs and components can be converted into coding, and if there are any standard professional/ industry good practices that I will have to learn (in the near future). 

In conclusion, this project has been another delightful experience and learning opportunity, and I certainly feel that I have developed more as a UX and UI designer. I will certainly imply all the newly acquainted learning outcomes, within my following projects and to keep evolving even more. 

Thank you for your time! ✿◠‿◠

★★★★★

More Projects