Russell Webb Design

Tag: mobile

  • Pt II – Money Management App UX Challenges Explained

    Pt II – Money Management App UX Challenges Explained

    TLDR; The second on a two-part deep-dive focussing on mobile UX design targeting seasoned designer-types, mastering Design Theory, and navigating lean Agile challenges.

    Contents

    Hard Skills:

    Journey Mapping

    Research

    Visual Design

    Soft Skills:

    Empathy

    Collaboration

    Critical Thinking

    Full List →

    Welcome to Pt II

    Real-world app design challenges, by persona

    In my previous post (01 Welcome to Pt I; Real-world app design challenges by persona) I detailed why wealth management apps are becoming super relevant and how certain UX designers types experience certain user experience challenges. Let’s move on to our second persona;

    Silvr Bank – Europe’s Best Digital Bank*

    *Silvr Bank is a fictitious organisation but these are real-world challenges I have experienced in real-world projects with real-world clients.

    The overarching goal with Silver Bank* is to design an interface for a thriving Generation X, with an emphasis on growing the fledgling millennial users base – i.e mobile-first. The C-level were looking to expand and improve their digital offer on these foundations

    3,000 employees | 85 branches | 2nd biggest player in its market

    The brainstorming UX Designer

    At the kickoff stages this designer is focusing on the ‘what if’, they live their life in the fast lane of UX Discovery workshops and are typically very creative.

    Blindly Following a Predefined UX Process

    Every design team (or team or chapter) will have their flavour, probably with different names. The skill is to take these stages and adapt the outcomes so your creative and non-creative teams will understand and respond.

    Design Thinking 101 – Research, Design, Prototyping, Testing and Measuring (validation) are default to the UX Designers. But do other team members understand or even need these outputs?

    The point is, tailor the UX process according to project needs which comprise staple elements such as research, design, prototyping, and testing (validation).

    Not Following the Iterative Design Process to Resolve Issues

    Successful Agile Mindset – The ‘From’ and ‘To’ concept is familiar in banking UX Design. At MVP stage this pattern could be relatively dry. Using Agile to Iteratively improve the UI and improve the experience with new icons and micro animations to help deliver that delight moment for your users.

    It is crucial and all kick-off stages with all new teams to pivot towards an MVP mindset. Here is my take in the ‘Three must-haves’;

    • Clients must have an understanding of the iterative process 
    • Clients must understand developing software within Scrum is not typical to a design agency. No Big-Bang please.
    • A strong UX-er must be able to push-back on customisations that hold little value and only slow down the Scrum Train.

    Designing within Scrum has its own challenges, but one of the clear benefits is the ability to ‘go fast’. This speed is only maintained if the core team are synced and understand that fast decision making, a complete understanding of the iterative process and grasping an MVP mindset must all be entrenched.

    Confusing signposting – Crazy pop-ups and misunderstood empty states.

    If you don’t understand the flow, how do you expect your users to?

    Do not implement multiple pop-ups on your landing page. Do guide user with short concise phrases that give state, progress and system status (See: Usability Heuristics: #1 Visibility of system status)

    Full Screen Empty States – Clarify your user journeys by offering clean empty state messaging, decode why loading states appear and explain, jargon-free, what are next steps.

    The pop-up frequency, relevance, and placement are key factors that make or break your UX;

    • Don’t show multiple pop-ups at once or one after another.
    • Ensure the empty state tone of voice is relevant to the audience and brand.
    • Your pop-ups shouldn’t cover the entire screen. On mobile, your full screen empty state should.

    Give your users breathing space to explore. You can then set suitable triggers for pop-ups to appear at the right time under certain conditions.

    The UX Consultant on-a-mission

    A seasoned veteran

    This flavour of UX designer has earned their stripes both at the sharp end running in-house UX teams and blazing a trail as a freelancer. They are typically driven, organised and looking for clients to be the same – so education is centre stage (which brings its own set of problems – see Not Following the Iterative Design Process to Resolve Issues below).

    Retail Banking Services

    Banks and FI are increasingly integrating money management functionality into their mobile and desktop apps. There is a clear directive to push their customers to use their products, including Card Management and Selection, more actively.

    Card Management and Selection – Cards have become a ‘must-have’ feature in modern financial application. Retail Services have responded, and to up’d their offer with effective use of colour, animations and UX patterns. i.e Here we see superuser swipe or mobile vertical scroll

    In the western world, 76% of people use mobile banking services. Differentiation, whether that be through the quality of financial advice or expertise of financial service, has to be clear.

    Creative font selection can derail already strong UX

    Unless you have a solid reason to use a particular font type, stick with web-safe fonts. This is a common misunderstanding when implementing an out-the-box or white label product, as they allow your client to go crazy either with their brand font or one that simply doesn’t work online (or both).

    Use your other UX tools to differentiate and stuck with the main players below;

    1. Arial (sans-serif)
    2. Georgia (serif)
    3. Verdana (sans-serif)
    4. Trebuchet MS (sans-serif)
    5. Garamond (serif)
    6. Tahoma (sans serif)
    7. Courier New (monospace)
    8. Times New Roman (serif)

    Know Your Users. Know your competition

    It would be a mistake to believe that money management applications are exclusively relevant for older adults. In reality, the target demographic for such applications is growing younger. Keep an eye out for millennials who, according to CBInsights, will inherit the largest share of the wealth of any generation – so mobile is absolutely key.

    Be conscious of the challenger banks that are making waves and be distinct or what your differentiation actually is, and mobile is leading this charge.

    Portfolio on Mobile – Leading the charge for Generation Z – Performance, Allocations through to Valuations all offer feature parity on web and mobile. Although Gen Z are prominently mobile – gear your efforts equally across all platforms to offer the complete package.

    My conclusion on app challenges

    It’s clear the challenges are many. Whether you’re be UX junior looking to soak-up the World Wide Web of experience or a seasoned veteran looking to fine-tune your UX skills, the key challenges when designing financial money management apps** are;

    Not Following the Iterative Design Process to Resolve Issues

    Clients must have an understanding of the iterative process and an Agile mindset. No Big-Bang please. Accept this and then you and your team can then ‘go fast’.

    Laser Focussed on Design Systems and Best Practices

    Non UX-ers need their outcomes. Without maintenance, allocation and expertise, a Design System that doesn’t rock, will impact UI delivery.

    Blindly Following a Predefined UX Process

    Adapting the Design Thinking process to suit. When implementing a white label product out-of-the-box, prototyping and testing default patterns will yield little value, focus on what makes your offer unique.

    **Can be attributed to other domains, of course.

    RussellWebbDesign: Get your fill of UX trends, case studies and best practice

    Pique’d your interest?

    This is but part of a selec­tion of design information rus­sell­webb­de­sign gen­er­ated for the creative community out there. Please con­tact me fur­ther to dis­cuss how your brand can ben­e­fit from the new channel: info@russellwebbdesign.co.uk

    If something has peaked your interest. Please leave a comment below.

  • Power up your designs with dark mode trend front-of-mind

    Power up your designs with dark mode trend front-of-mind

    Delight, speed and satisfaction are rewriting our UX playbooks in finance. While at the bleeding edge of this digital transformation, a modern UX-er has rapidly emerged, changing the rules of the game.

    Contents

    Hard Skills:

    Journey Mapping

    Research

    Visual Design

    Soft Skills:

    Empathy

    Collaboration

    Critical Thinking

    Full List →

    Strong UX has taken modern banking to the next level

    Designing an ecosystem that can scale to deliver multiple connected products is really the ultimate UX/UI case study. Part of that skill-set is the new must-have that is dark mode.

    Here is my take on this new visual aesthetic.

    Delight, speed and satisfaction are rewriting our UX playbooks in finance. A modern day UX-er has rapidly emerged, changing the rules of the game. Part of that skill-set is the new must-have which is dark mode.
    Delight, speed and satisfaction are rewriting our UX playbook in finance.
    Delight, speed and satisfaction are rewriting our UX playbooks in finance. A modern-day UX-er has rapidly emerged, changing the rules of the game. Part of that skill-set is the new must-have which is dark mode.
    *Names and visuals have been changed to reflect NDRs and client confidentiality
    MYBANK* Europe – 3.8 million retail banking clients This post references MYBANK*. As part of a broader digital transformation, I led full-throttle Discovery sessions laying the UX foundations for this region’s third-largest banking group, with total assets at CHF 229 billion
    Simple | Clear | Close
    Three simple principles that complement each other and form the basis for the individuals experience

    MYBANK* Europe – 3.8 million retail banking clients

    This case study is based on MYBANK*. As part of a broader digital transformation, I led full-throttle Discovery sessions laying the UX foundations for this region’s third-largest banking group, with total assets at CHF 229 billion;

    • 120-person strong team
    • 1-2-1 Leapfrog Workshop
    • A demanding 3rd party agency

    Goals and How-to retool

    The goal here is to give back to the design community a mindset for transitioning handcrafted light-mode UI, to the dark side. As this mode has become the new black, UX / UI designers need to re-tool themselves with the skills to set effective palettes, to design in context and to know the rules or at least know how to break them.

    Delight, speed and satisfaction are rewriting our UX playbooks in finance. A modern-day UX-er has rapidly emerged, changing the rules of the game. Part of that skill-set is the new must-have which is dark mode.
    Ominpayment Form – Financial users are familiar now with the ‘from’ and ‘to’ light mode design paradigm. Pushing that further, UX-ers today are tearing up the rulebook by adding in additional functionality around scheduling and note functionality in dark mode?

    Using dark mode as default

    Designing with a predominantly dark palette, swapping out light backgrounds, lightning text and icons has more recently become a non-negotiable design requirement with today’s clients. For mobile I get it, all apps should have both light and dark UI — or day and night themes that switch automatically. But what happens when your users are purposely choosing dark mode – all the time?

    Delight, speed and satisfaction are rewriting our UX playbooks in finance. A modern-day UX-er has rapidly emerged, changing the rules of the game. Part of that skill-set is the new must-have which is dark mode.
    Login and Authentication – Device registrations, biometrics and timeouts. As dark mode becomes the users preference, should designers be moving this UI style to the top of their to-do lists?

    How dark mode has crept up on us

    Early computer systems were always in dark-mode as characters were inverted. The Mac brought WYSIWYG and what we now know as light mode, or ‘printed paper’ mode. This became the default, with designers rarely even thinking about other colour palettes.

    Although prevalent in certain digital environments, ‘dials-and-lights’ interfaces (car dashboards spring to mind) have always been dark, controls and readouts follow established dark patterns.

    Delight, speed and satisfaction are rewriting our UX playbooks in finance. A modern-day UX-er has rapidly emerged, changing the rules of the game. Part of that skill-set is the new must-have which is dark mode.
    Account Types – Established patterns in finance are fundamental to delivering a best-in-class mobile banking applications. Single-column scrolling and wide-and-shallow IA are familiar patterns.

    An app with a dark palette consumes as much as 90% less energy, especially with AMOLED screens. For battery saving reasons there is enough justification for your clients to build in design capacity for this mode. Be mindful of your users’ environment, a bright rectangle glaring at them in a dim room is not good.

    Most streaming-video services default to dark mode as users do much of their viewing at night. This is why TV have dark bezels – right? Dark backgrounds reduce the overall brightness of the display, so can be used in any lighting condition. A typical dark-mode page is five times less bright than exactly the same content in light mode.

    Defining a dark colour palette 

    Designers have been reducing contrast in light-mode for years.

    Black text is rarely black anymore
    (and not just disabled text)

    Note the emphasis is on contrast. The term colour contrast is misleading. To give context, let’s map out a mini deep-dive on colour theory.

    Quick recap on colour theory

    • Hue—The spectrum on which a colour appears.
    • Saturation—How intense a hue appears.
    • Brightness—The amount of black or white that is added to a colour.

    To most designers, developers, and product managers—the term colour means the hue part only. Red or green, for example. Contrast implies that contrast relates to hue, but it does not. Contrast indicates the difference in brightness levels of two elements. 

    Small differences equal low contrast, large differences high contrast – so contrast is a comparison.

    Delight, speed and satisfaction are rewriting our UX playbooks in finance. A modern-day UX-er has rapidly emerged, changing the rules of the game. Part of that skill-set is the new must-have which is dark mode.
    Account statements – This brand was laser focussed on contrast. UI decisions hung off their mission statement of ‘Simple. Clear. Close’, all in Dark mode. Note: Check out the white line surround

    Contrast in Dark Mode

    When dark-mode palettes are implemented properly, their low overall output should provide extremely high contrast, without anyone on a project team worrying that the display is too harsh.

    But you still need to keep the contrast as high as possible, which trips up a lot of designers. Dark-mode design suggestions, guidelines and inspiration sites too often throw away everything we know about colour theory, especially; 

    • Contrast
    • Visibility
    • Readability
    • Universal design

    Don’t start with a black palette

    A quick, easy way to start creating a dark palette is to create shades and tints of all your colours.

    Keep the hue and saturation, change the brightness.

    Colour theory tip

    • Shade = adding black to the colour.
    • Tint = adding white i.e, pink is a tint of red.

    How-to build a powerful dark colour palette

    1. Choose another dark colour from the palette as a background (or make a shade of one)
    2. Create shades of all your colours i.e. adding black to the colour.
    3. Use a number of dark hues for backgrounds making branded elements pop.
    4. Instead of just using lines or grayscale, use various dark shades of the brand’s principal colour to set-off sections.
    5. Finally, check contrast in a dark room with real users.

    Even Google suggests very dark, highly saturated accent colours, but with lots of very low-contrast, grey backgrounds. Discarding simple lines around card edges and replacing them with dark-grey backgrounds doesn’t solve the contrast argument. Of course, this is just one opinion (albeit the worlds’ largest search company) – white key-lines can work as well.

    Delight, speed and satisfaction are rewriting our UX playbooks in finance. A modern-day UX-er has rapidly emerged, changing the rules of the game. Part of that skill-set is the new must-have which is dark mode.
    Card Management – Providing the complete UX picture is essential for developer handover. Shimmering and Empty Space UI can utilise a grey illustrational aesthetic. Contrast Card UX to give definition against dark backgrounds and colour lines.

    Grey is not the only fruit!

    Hollow icons for available tabs and solid icons for the selected tabs, while not a colour theory issue, is an effective way to differentiate them. Using simple text for tabs, in grey or red is an issue for the colourblind, not acclimated to night or glare.

    Bad contrast impairs readability and users become confused when part of the page scrolls, but other parts do not. Contrast and differentiation is not just text and icons but the entire experience.

    Delight, speed and satisfaction are rewriting our UX playbooks in finance. A modern-day UX-er has rapidly emerged, changing the rules of the game. Part of that skill-set is the new must-have which is dark mode.
    Card Management – Colour palettes vary per client. Purist clients with a pre-existing ‘darker’ brand come alive in this universe. Employ sharp contrast, hues of black and bold principal primary colours.

    Conclusions on dark mode UX

    Delight, speed and satisfaction are rewriting our UX playbooks in finance. A modern-day UX-er has rapidly emerged, changing the rules of the game. Part of that skill-set is the new must-have which is dark mode.
    More menu – Employing an effective Design System allows clients to configure which iterative choice fits their brand and suits their user base. The ‘More Menu’ is a classic example, from flat lists to grouped cards with descriptions.

    Enable iteration by employing a high-impact Design System with global reach

    Personalising a gold-standard, multi faceted, flexible Design System, empowering over 220 global organisations, employing a 6 sections, over 500+ components, catering for 3 industry-standard digital platform

    From foundational elements like typography, to light and dark colour mode across all tokens, icons and logo, a rich library of icons to container, cover and sheets, to selectors components, drop downs, empty states, models, navigational and informational elements.

    Modern UX designers should champion dark mode as the default option for mobile apps. Embracing this trend not only aligns with user preferences but also enhances the app’s visual appeal and overall user experience;

    How design should be re-tooling to this new aesthetic, Should understand dark-mode’s backstory, and how to build powerful dark palettes. From colour theory (for us designers to geek-out on!) to ark mode UX tips on Design Systems, respecting design basics and testing.

    Not just about style

    Design choices such as a colour palette have enormous implications around usability and perception.

    How design should be re-tooling to this new aesthetic, Should understand dark-mode’s backstory, and how to build powerful dark palettes. From colour theory (for us designers to geek-out on!) to ark mode UX tips on Design Systems, respecting design basics and testing.

    Design basics

    Size, spacing, and contrast in dark-mode are still critical.

    How design should be re-tooling to this new aesthetic, Should understand dark-mode’s backstory, and how to build powerful dark palettes. From colour theory (for us designers to geek-out on!) to ark mode UX tips on Design Systems, respecting design basics and testing.

    Test, test and test again

    Don’t forget to test your solution in a real-world environment (i.e a dark room). Try to understand how people would use your product, and make sure you’re designing for their context and their needs.

    RussellWebbDesign: Get your fill of UX trends, case studies and best practice

    Pique’d your interest?

    This is but part of a selec­tion of design information rus­sell­webb­de­sign gen­er­ated for the creative community out there. Please con­tact me fur­ther to dis­cuss how your brand can ben­e­fit from the new channel: info@russellwebbdesign.co.uk

    If something has peaked your interest. Please leave a comment below.

  • Pt I – Money Management App UX Challenges Explained

    Pt I – Money Management App UX Challenges Explained

    A two-part deep-dive focussing on mobile UX design targeting seasoned designer-types, mastering Design Theory, and navigating lean Agile challenges.

    Contents

    Hard Skills:

    Journey Mapping

    Research

    Visual Design

    Soft Skills:

    Empathy

    Collaboration

    Critical Thinking

    Full List →

    Welcome to Pt I

    Real-world app design challenges by persona

    This two-part case study will be exploring UX design challenges within the financial ecosystem that different flavours of UX designers can face. Part I focuses on why wealth management apps are becoming super relevant and how certain UX designers experience different challenges.

    Along the journey, I will also be supercharging the project objectives;

    • Catch-up feature parity
    • Prioritising critical features
    • Stakeholder education (Design Systems)

    Let’s kick off by asking ‘What type of UX-er are you?’

    Silvr Bank – Europe’s Best Digital Bank*

    *Silvr Bank is a fictitious organisation but these are real-world challenges I have experienced in real-world projects with real-world clients.

    The overarching goal with Silver Bank* is to design an interface for a thriving Generation X user group, with an emphasis on growing the fledgling millennial users – i.e mobile-first. The C-level were looking to expand and improve their digital offer.

    3,000 employees | 85 branches | 2nd biggest player in its market

    What type of UX-er are you?

    UX Designer types – How UX designers approach their challenges depends on many factors. Experience, background and where a designer is on their journey are all influencing characteristics.. 

    The challenges are many, so to focus this case study and depending on where you are in your UX journey, both as an individual and within a team, I have split these challenges in to three typical UX professional personas;

    • Mr ‘UX-design-is-completely-theoretical’ Designer
    • The brainstorming UX Designer
    • The UX Consultant on-a-mission

    In this post, let’s drill-down on challenges faced by our first persona;

    Mr ‘UX-design-is-completely-theoretical’ designer 

    This designer is at the beginning of their journey. They are a sponge, soaking up the design thinking processes and navigating their way through YouTube UX tutorials. Along the way they do need to get their hands dirty and experiment. To push back on theories, effects and laws. Learn to go with their gut and develop that inner self, that inner individual designer.

    Laser Focussed on Design Systems and Best Practices

    Design Systems from Hell – The benefits of a fully functional Design System are clear. Consistency. Speed. Best Practice. Collaboration. But when there isn’t a dedicated team or individual maintaining Component and updates. This is when the theoretical designer falls down and you get four bottom sheet options for iOS.

    Maintenance of a fully functioning Design System has its own set of challenges. Inevitable non-creatives will ask;

    1. For a ‘Design System’, where are the outcomes for non-creatives? 
    2. Who and how is it maintained (and who pays for it)?  

    Product teams will inevitably be looking for final deliverables they can understand (and charge for). This typically manifests itself as desktop and mobile UI screens. So while your designer is focused on perfecting their Design Token Figma file, the rest of the team are simply waiting for consistent UI.

    Get you hands dirty… then give-back

    Experienced designers learn their trade. The rest gain practical knowledge while learning the theoretical way. So experiment, make mistakes, try again, share your experiences, and then give these lessons back to the design community as an experienced designer. [For example, this post]

    (Too much) user experience psychology

    Which option matches which theory. The real skill comes for a UX designer to cut through the noise and go with the science. I have my opinion – Do you?

    Theories and Laws can become overwhelming;

    • Retention Theory – Proportion of the information vs. time spent on a page
    • Serial-Position Effect – Recollection of the first and the last in a list of words
    • Hick’s Law – Response to multiple stimuli is delayed forcing user to ‘stay longer’ 
    • The Schema Theory – Human brains like to organise knowledge into meaningful units, or schematas 

    … I could go on, (my go-to is personally Gestalt Principle). From another perspective, and another theory:

    Humans are fickle creatures, they don’t follow the rules.

    These theories alone can help with design decisions, but there is no ABC, no tried-and-tested foolproof formula. So make the intelligent choice, be brave and go with your instincts.

    Explore other perspectives on money management challenges

    You now have a snapshot on why these management apps are so prevalent from one designer type perspective. But what challenges do other UX designer types face, see Pt II – Money Management App UX Challenges to explore how experience and perspective can influence the challenges and solutions you may face as a certain designer type.

    RussellWebbDesign: Get your fill of UX trends, case studies and best practice

    Pique’d your interest?

    This is but part of a selec­tion of design information rus­sell­webb­de­sign gen­er­ated for the creative community out there. Please con­tact me fur­ther to dis­cuss how your brand can ben­e­fit from the new channel: info@russellwebbdesign.co.uk

    If something has peaked your interest. Please leave a comment below.

  • What is the role of open banking in the super app evolution?

    What is the role of open banking in the super app evolution?

    TL;DR Open Banking unlocks a future where financial apps become indispensable partners. A power-shift to more convenience, better financial education and meaningful relationships. Read on to see What’s next in this new ecosystem?

    Contents

    Time: 5 mins

    Hard Skills:

    Journey Mapping

    Research

    Visual Design

    Soft Skills:

    Empathy

    Collaboration

    Critical Thinking

    Full List →

    What is Open Banking

    The role of open banking in the super app evolution is enormous, it is essential for creating a smoother user experience. Open banking is the core technology that allows these apps to draw financial data from multiple sources (APIs) and design products and services that speak to the needs and wants of the end-user.

    Open Banking helps super-apps with:

    • Personalisation: Gathering data to enhance recommendations, habits and trends based on the user’s behaviour.
    • Centralisation: One app to rule-them-all, one roof and one umbrella. No need to switch apps to switch functionality (i.e.make payments, check portfolio performance, monitor transactions, etc).
    • Open finance: Super apps and open banking are foundational pieces in the financial ecosystem jigsaw – mortgages, savings, pensions, insurance and credit, can all talk to each other.
    One app, multiple functionality – Users can monitor their portfolio performance, check allocations and assets values and confirm transactions all within one super app.

    Super app benefits for wealth management

    The end-user now enjoys luxuries that a few decades ago would seem unimaginable. Wealth Management (WM) was dated and rigid, Financial Institute in pole position, controlling the action. The birth of the super app has tipped the balance of power to the investor, putting them in charge of their finances.

    Investment performance is the return on an investment portfolio, with single or multiple assets, measured over a specific period of time and currency. This standard of UX did not exist previously.

    Convenience

    The super app has evolved to give the consumer (and investment professionals) a one-stop shop for all their finances. Investors used to jump from website to website and from platform to app to check transactions, transfer money, pay bills, etc. Now within is single-pane-of-glass, user control their financial world.

    Convenience – UX can elevate the transaction process to effectively display this ‘agreement’ between a buyer and seller to exchange goods, services, or assets for payment using Open Banking on any platform.

    Smarter decisions

    Phone a banker, broker or accountant to see how their money is affected by fragmented financial knowledge; Financial decisions needed the experts.

    • Did the expert always have your best interest at heart?
    • How close and personal was that relationship with these experts to trust their recommendations
    • How transparent were they?
    Make smarter decisions – Market volatility is the frequency and magnitude of price movements, up or down. The bigger and more frequent the price swings, the more volatile the market is said to be, benefiting you and your clients even more.

    The super app brought an dispassionate, clean, and precise approach to financial decision-making. It has trimmed-the-fat off the process, presenting users with the best viable option.

    Enter the financial super app

    A super app alleviates financial institutions from transaction processing, compiling data, building risk profiles and other traditional banking functions. It allows banking institutions to focus on building meaningful relationships with investors.

    It centralises their attention and indirectly allows Portfolio Managers to tailor their campaigns for new products and services. Relationship Managers now know where their audience is; all they have to do is put the right thing in front of them.

    From viewing fund performances to the allocation of assets, to understanding these assets positions, to what transactions have been actioned and reviewing portfolio valuation

    From viewing fund performances to the allocation of assets, to understanding these assets positions, to what transactions have been actioned and reviewing portfolio valuation.

    The future for financial super apps?

    Data management

    Third parties, organisations and fintech companies need to understand

    • Where the data is coming from
    • How they store it
    • How they use it

    This is the way to build bulletproof information flows.

    AI-driven Financial Coaching

    Artificial intelligence in money management apps process data quickly and efficiently. By monitoring financial behaviour, AI can assist users in maintaining smart savings, refinancing, achieving financial goals, and even more*.

    *With approval, of course

    Get in touch

    Want more?

    Discover how FI’s can can offer all clients personalised advice, how UX can help investment firms stay relevant in our neobank world and how to build a *Financial Super App – One click at a time.

    *NDA Case Study Walk-Thru

    RussellWebbDesign: Get your fill of UX trends, case studies and best practice

    info@russellwebbdesign.co.uk

    It truly is, a Brave New World!

    RussellWebbDesign: Get your fill of UX trends, case studies and best practice

    Pique’d your interest?

    This is but part of a selec­tion of design information rus­sell­webb­de­sign gen­er­ated for the creative community out there. Please con­tact me fur­ther to dis­cuss how your brand can ben­e­fit from the new channel: info@russellwebbdesign.co.uk

    If something has peaked your interest. Please leave a comment below.

  • Why do tech guys love drop downs?

    Why do tech guys love drop downs?

    TLDR: Traditional drop downs stifle UX in regulated financial software. They overload users with hidden options, hinder transparency, and increase cognitive load. But there are alternatives, prioritise immediacy, transparency, and champion user-centric solutions.

    Contents

    Recently I’ve been involved with implementing Design Thinking and best practice UX for a heavy technical suit of applications. Although I’m pushing collaboration and inclusivity, especially with the developers, I can recognise that look in their eye when I’m evangelising best practice and stressing user’s needs and wants.

    It’s not their fault.

    To give you a snapshot of this established and mature Agile team, we need to step back. Within a heavily regulated financial development environment, tech guys concentrate primarily on tech functionality. Task orientated user flow (UX) followed by aesthetics and that ‘delight’ moment (UI) very much take very a back seat.

    When select menu has less than 7 options it suffers from a lack of up-front information.

    So cycling back round to the title of this post, I get constantly asked “Please can we use a drop down here’. I’m not Mr Anti-Dropdown but I always ask why?

    Let’s NOT use a drop-down

    Drop-downs seems to be a one-stop shop killer solution for every developer’s requirement. We have a registration form to design, and there is a question about gender. M or F, ‘Lets use a drop-down’. A news article page within a CMS where an editor can choose a collection of background brand colours; ‘Lets use a drop-down’. A mobile home page with three sections, ‘Lets use a drop-down’. Although not so much with iOS developers, it seems this breed have a tighter aesthetic.

    For a better UX experience, be transparent with your users. Show them their choices rather than hide them behind a drop-down.

    The ‘why not’ revolves around these three simple points;

    1. Hiding selection choices behind a drop-down isn’t best practice. Especially when there is the on-screen real estate available.
    2. Displaying the user choices adds immediate vision and scope, reduces the cognitive load and allows the user to see their destination.
    3. For consistency across platforms, would that mean a drop-down on iOS devices – now you Apple fan base out there love your Apple T-Shirts and the WWDC Conference, but it doesn’t dictate best practice UX? This would not be my recommendation – especially the ‘nasty’ native iOS touch drop down.

    I can fully appreciate when you have a selection of more than say 6 – 8 items (this number varies) then you should default to drop downs. But the bigger question is; If you could provide an option for the user to click straight through, where they can see all their choices at a single glance, and you have the on-screen real estate the you should absolutely push for a more transparent solution.

    The 100 option drop-down

    Allow your users to starting typing to narrow their choices and then offer them a limited and tailored number of selections.

    A classic example is the auspicious country-selector with it’s 100 options. There is no no quick and easy overview option. And those of you from an ‘United” country, well it is potluck whether you’ve been bumped to the top or your country is listed by one of its other names. My preferred choice is to use auto complete menu instead – need visual

    When select menu has less than 7 options it suffers from a lack of up-front information. The user has to click in order to see the available options.

    So what’s the definitive best practice answer then?

    When to use on desktop

    Use radio buttons for choices under 7

    For web you should use radio buttons when choices under 7. Your users will be able immediately scan how many options they have and what each of those options are, without clicking (or typing) anything to reveal this information.

    This is particularly true for the ‘Please select your gender question’. At the start for the 21st century there are definitely under 7 choices here, so please use radio buttons.

    Use Mobile convenient add-ons to boost your productivity

    Type “Af” and Afghanistan, Central African Republic and South Africa drop-down

    User are discouraged by the perception of many taps. There is always the ‘fat finger’ issues, but more importantly today mobile savvy Gen X, Y or Z, who interact everyday with data driven (server side) continual validation apps. Always-on spell check, auto fill name and address field and real time dynamic delivery options for example. This is especially true on the smaller screen – speed, convenience and time are crucial factors when completing tasks.

    Conclusion

    Avoiding dropdown menus is a crucial design pattern on mobile platforms. Is there a faster alternative, better UX choice to reduce usage errors.

    Experienced developers are a great resource. As a future thinking UX-er you should always challenge, ask the right questions and be the user; Does this control choice make my life easier?

  • Wire-framing for the larger to the smaller screen

    Wire-framing for the larger to the smaller screen

    TLDR: Following on from my recent ‘How user personas can help crystallise the early stage design process’ post, here the focusses is on realising wireframes and responsively design. This post looks at providing a snapshot of how to visualise the findings and create an experience for both desktop and mobile.

    Contents

    The Challenge

    The focus here is on strengthening the sales staff understanding, how to cross-sell and provide a tool to effectively push leads through to conversion.

    Primary user goal

    These wireframes concentrate on the lead generation in the automotive industry but these principles are clearly transferable.

    (more…)