Russell Webb Design

Tag: android

  • 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.

  • 8 reasons why you should use sidebar as navigation

    8 reasons why you should use sidebar as navigation

    TL;DR; Why is this new style of popular navigation winning hands down against old-fashioned navigation methods? Well, here’s my take on why, in eight easy sound bites.

    Contents

    01. Users are familiar with desktop left navigation patterns

    This is difficult to implement with such small real estate. Sidebar solves and provides for with this problem.

    8reasonsToUseTheSidebarIcon4
    (more…)

  • 10 considerations when designing for mobile

    This is the first 10 steps to take your mobile design skills to the next level

     Watch the animated version here

    10 Considerations For Mobile DesignWhen designing for the desktop you can consider the end-user environment, when designing for print you can picture where the magazine will be read but when design for mobile the end-user scenarios are so varied and so far ranging that todays savvy mobile designer needs to develop an entirely different skill set.

    Mobile Meet Up - Glassblowers in London's SohoThis is the edited version of a presentation I gave at Mobile Meet Up on Tues 27th Sept about ‘10 key considerations when designing for mobile ‘.  I must stress this doesn’t mean there are only 10, in fact it’s the opposite, there are many more considerations. But here are my top 10:

    1. Real Estate

    10 key considerations when designing for mobile

    Whether you coming from a desktop background or from advertising the canvas size you have to pay with is drastically reduced on the mobile environment.

    Over the years the relative screen size difference has increased. The difference between the smallest (128 x 128) and the largest (800 x 480) is now a factor of 23. That means the largest screen is 23 times bigger than the smallest one.

    2. Design with distraction front-of-mind

    10 key considerations when designing for mobile
    (more…)

  • Our vision for Shopping on Mobile Web

    TLDR: El Corte Inglés, a retail giant, needs a mobile app refresh to captivate customers and boost sales. Create a seamless shopping experience with: intuitive navigation, media-rich content, that is mobile-optimised Features and has a streamlined checkout to transform their UX into a powerful sales driver.

    Contents

    Coverpage

    Overview

    El Corte Inglés S.A. (English: The English Cut as in tailor’s cut), headquartered in Madrid, is the biggest department store group in Europe and ranks 4 worldwide. El Corte Inglés is Spain’s only remaining department store chain, as well as owner of several associated businesses, such as supermarket chains Hipercor, Supercor & Opencor, fashion chain Sfera as well as a travel agency (Viajes El Corte Ingles) and telephone provider (Telecor).

    Brief

    Incorporating a nav search, a store finder with the traditional basket top right design a media rich experience for shopping on  your phone. By captivating a customer and therefore increasing spend, design a system of sub navigation that is convincing and compelling. Drilling deeper into the experience, screens can display products with the the added mobile features of sort and zoom.  Product Info and descriptions, including ‘Add to Basket’ and ‘Wish List’ functionality plus the ability to share your purchase are all important consideration.