Russell Webb Design

Tag: branding

  • Blank Canvas to Digital Playground

    Blank Canvas to Digital Playground

    A Designer’s AI Experiment

    As a UX designer, I’m always looking for ways to streamline my workflow and push creative boundaries. So when I heard about Figma’s new AI capabilities ‘Make’, I had to see it in action. Can a tool quickly prototype a complete, narrative-driven landing page from scratch? I decided to put it to the test, and the results were more than I expected.

    From Uninspired to Unstoppable

    My goal was to create a modern, experimental landing page for a creative digital business. The AI prompt was simple yet specific:

    "Design a landing page for a creative digital business with an emphasis on design experimentation, digital visuals, and technology."

    What happened next was a fascinating look into the future of design.

    AI PROCESS

    The AI at Work

    From a blank canvas, the AI started to work its magic.

    78 Seconds later…

    it wasn’t just generating a static layout, it was building a complete design system. It created components, wrote placeholder copy, and even the React underlying code.

    Scroll down

    Ignite Your Imagination: Transform Your Blank Canvas into a Digital Playground

    After a few more minutes, the result was a fully designed, visually rich landing page.

    Breathe Life into Pixels: Watch Your Digital Playground Emerge from a Blank Canvas

    The AI interpreted my prompt and delivered a bold hero section with eye-catching gradients, a featured work gallery with interactive cards, and sections dedicated to services and industry trends.

    Responsiveness

    Seeing the Design in Action

    The AI handled responsiveness very impressively. A mobile-first approach today is essential, the tool automatically created a transition for different screen sizes, providing solutions for interactive elements and flawless responsiveness.

    The Big Question

    Validation or Innovation?

    After seeing the final product, I’m left with a profound question: Did this tool save time, or did it save me from a necessary part of the creative process?

    There’s no doubt that the AI delivered a solid foundation, tackling about 60% of the work with remarkable speed. It created a baseline of good UX patterns and clean code.

    However, as a designer who lives and breathes this work, I have to ask: Are our (human) base-level patterns enough, or should it challenge us to push web design further?

    Stop Dreaming, Start Building: The AI managed to capture responsive versioning too.

    Powerful, but…

    While this technology is powerful, it comes with a few caveats:

    • It’s currently an Enterprise-level feature, locked behind a paywall.
    • The feature must be enabled by an administrator. There is cost, and a credit count

    For now, these tools can save us from the mundane, repetitive tasks. But the real magic of design, the element that makes a project truly stand out is the unique human perspective. It’s the storytelling, the subtle emotional cues, and the a-ha moments that only a human designer can bring.

    So, while AI can build the foundation, I believe our role is to continue pushing the boundaries, ensuring that every design tells a meaningful story.

    What do you think? Is this the future of design, or just a powerful new tool in our creative arsenal?

    Discover high-impact UX case studies

    Portfolio case studies describing design, my UX process, and business impact.

    From boosting user adoption in fintech, to improving trust with responsible gambling through to retaining Millennials in the world of ‘digital lotteries UX’ to leveraging key USPs for mobile healthcare.

    My Case Studies
    Quick-Look PDF
  • Dashboard UX to Business UI

    Dashboard UX to Business UI

    Enterprise-level, real-time data from multiple sources, instantly accessed, no more hunting.
    —
    A single-source-of-truth of unifying insights speak volumes: 56% iPad growth in just 1.5 years over 100K client meetings

    Contents

    The Problem Statement

    Problem framing

    Best practices

    Design principles

    To respect confidentiality agreements, the branding and specific naming have been modified. This product is currently live and serving 6k users

    To respect confidentiality agreements, the branding and specific naming have been modified. This product is currently live and serving 10K plus HNW users.

    Dashboard UX to Business U

    Within a strictly regulated financial environment my clients use dashboards data every day.

    Users

    Advice

    Quotes

    Investment

    As the world’s largest wealth manager, catering to affluent clients requires exclusive online services like advice, quotes and investment strategies, delivered digitally. Internal systems application empower the two principal user groups;

    • Customer Consultant Associates
    • Customer Consultant* (CCA’s/CC’s),

    Assembling these customer meetings takes time, accessing strictly private data to provide a complete, competitive and professional service requires a tailored and specialised tool – of which the Customer Meeting App* is the bank’s primary channel.

    What are the driving factors for developing a dashboard?

    Strategic insights

    Information architecture

    Single source

    Imagine client meetings where crucial information is instantly accessible, scattered data unified, and time spent hunting replaced by strategic insights. This is the potentially transformative power of the Customer Meeting App’s dashboard, built around three “must-have” features:

    1. Single point of access for disparate data
      Instead of opening various applications, interfaces, or online databases, the CCA’s/CC’s have a real-time dashboard.
    2. Broad overview with drill down capabilities
      A dynamic dashboard, digital documentation and secure access.
    3. Easier, faster, sign source of truth
      Consolidated statistic, statues displays, contextual information, and ‘Edit’ functionality placed intelligently for quick consumption.

    Achieving speed, clarity, and brand harmony

    Journey

    Processes

    Re-imagine

    Problem and Opportunity

    The existing offering had become redundant, with processes and previous ways of working no longer relevant or appropriate. The client required the seamless integration of data from third-party repositories and a significantly improved user journey. This presented a clear opportunity to re-imagine the complete ‘Create a Customer Meeting’ user journey.

    Dashboard UX to Business U

    Users do drive requirements, but in business there is another controlling factor. To sync the ‘Create a Customer Meeting’ , the ‘Adding account numbers’ journey there was a further requirement;.

    Funding

    Dashboard design best practice

    There are 3 dashboard design principles that are drove decisions and are considered best practice:

    Dashboard UX to Business U
    Personalisation, speed and convenience will drive any functional improvement and this project was no exception

    1. Five-second insight

    Funding was a principal driver for this project. Empowering a more intuitive process to adding customer data (account numbers, quote links, investment profile links, and upcoming future services) at a glance was key to the baseline UX.

    2. Inverted pyramid layout

    The inverted triangle displays the most significant insights on the top, trends in the middle, and granular details towards the bottom.

    3. Brand champion and ensure DS achievability

    Championing UCD principles for both organisation’s values and consistency was a challenge. Without a dedicated UX stakeholder, negotiating a new global Design System, within budget and development constraints proved demanding.

    Reimagining Client Meetings

    Scalability

    Visual Hierarchy

    Visual Design

    To respect confidentiality agreements, the branding and specific naming have been modified. This product is currently live and serving 10K plus HNW users.

    To reiterate the design process, I went through the following:

    1. Step 1 – Start with the user needs
      The foundation of successful design. Streamlining the preparation of a meeting, and principally future proofing the Create a Meeting process with a scalable UI that can seamlessly integrate new data repositories, ensuring long-term flexibility.
    2. Step 2 – Segment the experience in to ‘zones’
      The on-screen real estate delivers a quick look experience prioritising top from bottom.
    3. Step 3 – Test and Challenge through Prototyping
      Visualising up to 12 users’ journeys leads for better understanding and smoother development. Developers also need reassurance that this would be a boxed development and will not impact working code.
    Dashboard UX to Business UI
    Familiar web tab patterns are used as quick-links behind drop-down.

    Driving Discovery UX within a challenging Agile environment

    Hierarchy

    F-Pattern

    Low-fidelity prototyping

    This familiar UX pattern allows the user to view last modified content, it also adds value from a dashboard perspective by showing last messages and last documents/meetings in the expanded view.

    Early sketches are crucial: They reveal the potential of a dashboard, emphasising hierarchy through top-down, left-to-right user scanning patterns. Grouping key data, utilising white space, and enabling light touch drill-down are key drivers.

    Scope and hierarchy: Initial sketches focus on what’s important, pushing a hierarchical arrangement that guides the user’s eye. Data is prioritised with ‘glance-access’ to preview Meeting Name at the top, followed by Last Modified and owner information.

    Chain of command flow: Expanding on the ‘Mini’ concept, this ‘Maxi’ Dashboard version offers the full experience. Enabling the CCA’s/CC’s to very quickly assess top level meeting status and drill-down to Privacy Setting, customer ID photos, and Mode of Contact.

    Sketching a tailored experience

    Sketching a prioritise and tailored experience
    Sketching a prioritise and tailored experience
    Estimation sketches
    Estimation sketches
    Early sketches are invaluable when demonstrating the power of a dashboard. Hierarchy is brought to the forefront as we know users organically scan top-to-bottom, left-to-right, so grouping what’s important, employing white space and allowing light touch drill-down are all key drivers.

    What is in scope: These initial sketches start to show the power of a dashboard. Pushing the hierarchical arrangement, the user’s eyes organically concentrate from top to bottom, left to right. We have the data, so embracing the Meeting Name and grouping the Last Modified through to the Meeting Owner data just makes sense.

    Sketching a prioritise and tailored experience
    Expanding on the ‘Mini’ concept, this ‘Maxi’ Dashboard version offers the full experience.

    Estimation sketches 

    In Agile, pre-estimation is an important ceremony before sprinting. An efficient method of conveying your UI is to sketch and quickly map out the flow, the user interactions and where the final CTAs might be..

    Estimation sketches
    Great for conveying ideas, great for providing developers with top-level UI when it comes to their estimations
    Estimation sketches
    In Agile, pre-estimation is an important ceremony before sprinting.

    Realising a final solution

    To respect confidentiality agreements, the branding and specific naming have been modified. This product is currently live and serving 6k users

    To respect confidentiality agreements, the branding and specific naming have been modified. This product is currently live and serving 10K plus HNW users.

    Here we can see a Customer Consultant Associates (CCA’s) in the later stages of processing the outcomes of the meeting ‘New Economy Efficiencies’. The status of the meeting is highlighted Published and ready to be sync’d with the customer advisors iPad.

    A conceptual dashboard with multiple layers.

    The final solution solved both the scalability problem, providing easy access to account numbers, the ability to add other account numbers, visibility on the meeting date and time, and the meeting status and who is the meeting organiser, all there front-of-stall for the user. Complete transparency on meeting detail, including location, meeting language an whether the meeting has typed notes and freehand notes plus special features including packaging the meeting contents ready to send the customer and associating the meeting with a customer ID.

    A new dashboard suite is here;

    • Highly Readable
    • Inherently Scalable
    • Data-Driven
    Conceptual dashboard design revolves a rationale of multiple layers, user actions reveal more or less of those layers depending on their needs and wants.

    Design Trade-Offs

    Business Reality

    ROI

    Inverted Pyramid

    One key factor in the development (and acceptance) of this new radical design was ‘achievability’. Funding in a key developmental constraint with financial services, without it a project will not leave the ground – designing with business realities is a UX key skill. 

    Account number drill-down

    Deal breaking UX: Leverage real-wold feedback and user needs from complex requirements to simple solutions: Multi-account number functionality

    The UX was sold into the business as streamlining the ‘Create a Meeting’ user flow at a single glance, adding value at the advisory level.

    There are four (4) account numbers associated with this meeting. The user is able to hover, edit or launch a pop-over dialog box to create an account specific meeting from this functionality.

    Hierarchical details

    From ‘inverted triangle’ concepts, to hover state ‘tooltip’ functionality.

    Providing a tiered ‘inverted triangle’ proved to be an excellent facilitator for the single-point of truth concept. Employing hover state ‘tooltip’ functionality allowed for a broad overview with drill-down capabilities.

    Global Digital Shift

    Adoption

    Impact

    Massive UX Reach

    To respect confidentiality agreements, the branding and specific naming have been modified. This product is currently live and serving 6k users

    To respect confidentiality agreements, the branding and specific naming have been modified. This product is currently live and serving 10K plus HNW users.

    190 offices | Growth from 8% to 56% | 1.5 years

    40

    Countries

    190

    Offices

    100k

    100,000 Meetings

    48%

    8% to 56% Worldwide Growth

    The bank is present in more than 40 countries with approximately half of their 190 offices are in western Europe, where half of the Customer Meeting App meetings are delivered on the iPad. This is a phenomenal growth from 8% to 56% worldwide in the last 18 months.

    100,000 meetings prepared and delivered via the application each year. A true revolution!

    *Names changed to protect the innocent

  • How to launch a digital product using social channels

    How to launch a digital product using social channels

    TLDR: Fostering a close working relationships with your client and presenting with constructive feedback is crucial when building trust and is key to producing better work, especially when delivering across social channels.

    Contents

    (more…)
  • Brand logo design in 5 steps

    Brand logo design in 5 steps

    TL;DR; The branding exercise showcasing a need for a standout, flexible, unique, and impactful logo marque. From sketching, client involvement, standardising the colour palette to finessing the design into a fully-fledged product.

    Contents

    1. Lets get started with… R&D

    I have recently been involved in a branding exercise for a company that has over over 20 years experience in consultancy, project management and business analysis. This isn’t a new sphere of business, there is plenty of competition out there so a stand out logo marque that was…

    • Flexible
    • Unique
    • Impactful

    … was essential. So I presented a limited selection of ideas as I feel, after a certain amount of years, I’m qualified not to waste the client’s time presenting numerous options. This is a concept shared by the likes of David Airey on his site logodesignlove.com

    DAA_dragonheadConsultancy-BrandMarque_Page_04
    (more…)
  • 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…)