Portfolio Archive - Robert Sheppard Design

Ford Pro app

robshepp — Tue, 05 Aug 2025 12:35:53 +0000

Case Study.

As Lead UX/UI Designer in an agile squad, I led the redesign of a native mobile app for Ford Pro, targeting small to medium-sized fleet operators. This case study focuses on improving engagement with Vehicle Health Alerts, a core feature designed to keep fleet vehicles on the road through pre-emptive maintenance notifications.

Case Study.

As Lead UX/UI Designer in an agile squad, I led the redesign of a native mobile app for Ford Pro, targeting small to medium-sized fleet operators. This case study focuses on improving engagement with Vehicle Health Alerts, a core feature designed to keep fleet vehicles on the road through pre-emptive maintenance notifications.

The Challenge

Support the business: Re-purpose an existing app, that was not built for the target audience and gradually iterate on features. Leverage the existing desktop software solution and liaise with the global team. Manage an evolving brief and strategy whilst upholding insights revealed by our team through user research.

The Challenge

Support the business: Re-purpose an existing app, that was not built for the target audience and gradually iterate on features. Leverage the existing desktop software solution and liaise with the global team. Manage an evolving brief and strategy whilst upholding insights revealed by our team through user research.

Vehicle Health Alert problems

Ford Pro’s analytics revealed that users were not engaging with Vehicle Health Alerts, undermining the app’s key value proposition. Fleet drivers ignored VHA notifications, often relying on dashboard warnings or routine checks instead. Multiple UX issues contributed to the problem:

Confusing visualisations of “level” vs “quality”

Arbitrary percentage indicators without actionable insights

Misunderstandings of the term “Oil Life”

Lack of clear timeframes for preventive action

Discovery

To uncover root causes, I initiated a design workshop with the product and engineering teams, followed by a Crazy 8’s ideation session. To get the most value from these sessions, I set the theme: ‘How can we respond to the particular problem of differentiating between ‘quality’ and ‘levels’?

These collaborative efforts surfaced multiple hypotheses and led to the creation of new visualisation concepts that better differentiated oil quality from quantity.

Design explorations.

We explored a range of visual metaphors and interaction patterns for Vehicle Health Alerts. Key goals were clarity, intuitiveness, and reduced cognitive load. Design ideas were continuously reviewed with Engineering leads to evaluate technical feasibility and I conducted some user testing with colleagues, before deciding which options to develop further.

Design explorations.

Validation & user testing

I conducted two rounds of remote, unmoderated user testing. An A/B test with 30 participants to compare the existing design with our new proposed solution. This was repeated as a B/A test with a new set of 30 participants, to remove any bias from the test results.

Version B (new design) was preferred by 72% of users

80% could correctly predict when oil life would become critical with version B

All could correctly identify state of oil as 'normal' with version B

48% of users still thought “Oil Life” meant oil level, confirming the need for better terminology and contextual education.

Accessibility

Accessibility is always a priority. I use a mix of figma plug-ins and webaim.org colour contrast checker to ensure visual elements met AAA standards for text contrast, and at least AA for graphical elements.

Designs were tested against common types of color blindness (protanopia, deuteranopia) to ensure clarity for all users.

Accessibility checks highlighted issues with this style of data visualisation.

Final design solution

Outcomes

The redesigned Vehicle Health Alerts experience significantly improved user understanding and engagement. With 72% of users preferring the new interface and an 80% success rate in interpreting critical oil life status, the feature now aligns much more closely with Ford Pro’s preventative maintenance goals. The solution laid a strong foundation for further enhancements to fleet management tools on mobile and contributed to the evolving design system.

The post Ford Pro app appeared first on Robert Sheppard Design.

Anthropos app

robshepp — Thu, 17 Jul 2025 11:50:20 +0000

Case Study.

Anthropos Pro is a connected care solution for the home. Anthropos builds a rich picture of the daily routine of older people living alone. Based on their daily routine, the environment in which they live, their wellbeing and their safety and security.

Case Study.

Anthropos Pro is a connected care solution for the home. Anthropos builds a rich picture of the daily routine of older people living alone. Based on their daily routine, the environment in which they live, their wellbeing and their safety and security.

The Challenge

The Anthropos portal was originally designed with desktop users in mind, leaving the mobile experience inconsistent, limited, and frustrating. With no designer involved in the original build, the platform lacked usability and accessibility – crucial gaps considering the target audience: non tech-savvy carers monitoring elderly relatives through in-home sensors. Data was hard to interpret, and the experience didn’t reflect the empathy or simplicity the users needed.

My Role

As the sole Product Designer on the project, I worked directly with senior leadership, engineers, and marketing to lay the groundwork for a user-first redesign.

The Challenge

The Anthropos portal was originally designed with desktop users in mind, leaving the mobile experience inconsistent, limited, and frustrating. With no designer involved in the original build, the platform lacked usability and accessibility – crucial gaps considering the target audience: non tech-savvy carers monitoring elderly relatives through in-home sensors. Data was hard to interpret, and the experience didn’t reflect the empathy or simplicity the users needed.

My Role

As the sole Product Designer on the project, I worked directly with senior leadership, engineers, and marketing to lay the groundwork for a user-first redesign.

Where we started

1. Competitor audit

To kick off, I evaluated four competitors – assessing branding, feature sets, and overall user experience. Rather than dwell on what Anthropos lacked, I used the analysis to identify actionable opportunities: cleaner UI, clearer insights, and stronger brand cohesion.

2. Heuristic review

I then reviewed the existing platform across desktop and mobile, focusing on key user touchpoints like onboarding, data views, and alerts. I mapped out user flows, highlighted friction points, and layered in feedback from actual users. My recommendations centered on consistency, accessibility, and emotional clarity – especially important given the sensitive nature of care-based monitoring.

3. Recommendations

The insights revealed a clear path forward: align the portal with Anthropos’ brand, elevate usability to meet modern expectations, and design with empathy. Though technically functional, the portal needed to reflect the sophistication users experience elsewhere, especially in health-related apps. With a mobile-first, accessible design and a focus on simplicity, Anthropos had the opportunity to leap ahead of its competitors.

UX: Information architecture & user flows

A major part of the redesign focused on reworking the app’s Information Architecture and refining key user flows, not only to improve the current experience but to build a foundation for future scalability.

The original app lacked structure, especially around core features like alerts and insights, which are essential for family members monitoring their loved ones. I reorganised features into intuitive groups to align with the user’s mental model, ensuring they could navigate the app with confidence, not confusion.

Clear user flows were created for critical tasks, making sure users could complete actions quickly and intuitively. These weren’t just design artifacts, they became alignment tools.
• Engineering used them to identify technical dependencies.
• Marketing used them to validate proposed features with real users.
• Product Design used them to define reusable UI patterns and spot opportunities for scalable design components.

Leveraging AI for rapid prototyping.

To evaluate features and usability, I wrote prompts for AI tools (using a combination of Chat GPT, Claude and Stitch) to create interactive wireframes. After aligning with stakeholders on feasibility and prioritising features into must-haves and nice-to-haves, we presented the wireframes to real users for feedback. Their input guided rapid iterations, driven by refined AI prompts. This approach significantly accelerated our process, enabling us to validate the app concept early, before committing to full-scale design.

UI: Designing the mobile app interface

With the structure in place, I turned to interface design, running design discovery for each section and creating multiple prototypes for testing with users and stakeholders.

Pain points from earlier phases guided the design:
• Poor menu organisation made features hard to find.
• Data was overwhelming, lacking summaries and actionable insights.

A smarter home screen

A new onboarding flow leads on to the home screen, which was designed to be a personalised dashboard. A concise, high-level summary of the individual’s wellbeing. It shows updates from each sensor type and provides quick access to more detailed data. By writing in a warm, conversational tone and showing only what matters at a glance, we gave users peace of mind without cognitive overload. We also elected to go for a full screen alert message, which cannot be dismissed. This deliberately forces the user to take action, if only to confirm that all is OK.

Intuitive data visualisation

The challenge was to present sensor data along a 24-hour timeline, clearly highlighting any abnormal patterns. But just as important was knowing when not to show too much. Research confirmed that users didn’t want to constantly check in, they wanted to be notified when something stood out. The UI now reflects that balance: minimal when everything’s fine, proactive when something changes.

Several design variations were tested with real users, and their feedback directly shaped the final experience, ensuring the app was not only functional but empathetic to the realities of caregiving.

Using progressive discloure to drill down into more granular data.

Outcomes

The redesign of the Anthropos Pro app transformed it from a complex, desktop-centric interface into a mobile-first, user-friendly platform tailored for non-technical carers.

By rethinking the information architecture and prioritizing clarity, the new design offered a coherent dashboard that presented only essential information, reducing cognitive overload and improving accessibility.

Empathetic language and simplified interactions made the experience more approachable, helping carers monitor vulnerable individuals with greater confidence and ease.

The post Anthropos app appeared first on Robert Sheppard Design.

Hitachi EV depot dashboard

robshepp — Mon, 10 Jun 2024 12:53:43 +0000

Case Study.

Hitach Social Innovation, is a division of Hitachi focussing on initiatives to drive change. This project supports their efforts to reduce and manage the energy usage of large organisations. It focusses on tools to give organisations insights into their facilities, allowing them to reduce energy consumption and transition to EV vehicles as part of their fleet decorbonisation goals.

Case Study.

Hitach Social Innovation, is a division of Hitachi focussing on initiatives to drive change. This project supports their efforts to reduce and manage the energy usage of large organisations. It focusses on tools to give organisations insights into their facilities, allowing them to reduce energy consumption and transition to EV vehicles as part of their fleet decorbonisation goals.

My Role.

Lead Digital Product Designer. I guided the team in transforming their specification document from a ‘wish list’ to a final product. Using a tried and trusted design process to validate assumptions along the way and tailor our design decisions more closely to user needs.

Discover.

Turn specifications into user-stories. Define the product value proposition.

Define.

IA, userflows, interactive prototypes. User test with audience.

Design.

Final UI design, User test with stakeholders, data visualisation, tokenised design system.

Validate.

Continuous validation, lightweight research, including lean experiments.

My Role.

Lead Digital Product Designer. I guided the team in transforming their specification document from a ‘wish list’ to a final product. Using a tried and trusted design process to validate assumptions along the way and tailor our design decisions more closely to user needs.

Discover.

Turn specifications into user-stories. Define the product value proposition.

Define.

IA, userflows, interactive prototypes. User test with audience.

Design.

Final UI design, User test with stakeholders, data visualisation, tokenised design system.

Validate.

Continuous validation, lightweight research, including lean experiments.

Discover

I advocate for launching small but useful features with a strategy for growing the product. I helped the team convert their requirements into user stories by breaking them down into more detail.

We scored each feature by value, confidence and effort in order for the Product Manger to prioritise the product roadmap and release cycles.   It also enabled the engineering team to identify parts of the product that can be built without the need for design, such as fundamental back-end services.

Example: what do we need to do in order for the user to navigate to the dashboard.

We established a clear product value proposition, defining the target audience, the product’s purpose, and the reasons behind its development. This declaration serves as a crucial reference throughout the project, helping to maintain focus on the core ideas. Without this, there is a risk of losing sight of these essentials amidst the influx of feature requests.

Define

Information Architecture
I ran virtual card-sort sessions using Miro to define the Information Architecture.  Taking the product specification from the user stories, we asked beta users and stakeholders to organise content and features into logical sections.

User Journey Maps
I used these diagrams to illustrate the user experience as they interact with features and tasks, as well as touchpoints across the other brand channels and devices, providing a comprehensive view of their journey.   By highlighting pain points, opportunities, and key moments, the diagram enabled us to optimise their experience in order to meet their needs and expectations.

For instance, we realised a pain-point for the user was the amount of information we were asking them to input when setting up a new facility. Instead, we decided to allow the user to input basic information and give them the option to include more, after the facility had been added.

Wireframing and Prototyping

A wireframe diagram is a low-fidelity visual representation of the digital interface.  It focuses on usability and alignment with the product value proposition.   These were used for early user testing, as well as testing the placement of elements such as buttons, menus and content.   Wireframes and prototypes were instrumental in the early stages of the design process, allowing the product team and stakeholders to double-down on the product and quickly iterate before investing time and resources into high-fidelity design and development.

Language and Tone of Voice

We took the opportunity to make sure we were using consistent messaging throughout the product and that we aligned with other Hitachi software products. We asked participants to describe what they expected to find behind each of the navigation pillars.

Data Visualisation

Low-fidelity protoypes allowed us to test various iterations of the facility load graphic. We asked participants to describe what the graphic was telling them. We used this feedback to improve the data visualisation, before the final design.

Task Completion

Does the proposed product align with the value proposition? Can users undertake the most common tasks, without prompting? In their mind, is there anything missing that we can either add now or include in the roadmap?

Design

Agile Delivery

The team worked with the Product Manger to finalise the product roadmap. Referencing the user stories from the ‘Discover’ phase along with any new information gained from user testing the wireframes.

Engineering deliverables were timeboxed into 2 week sprints. Although design works differently, because I have to consider the whole story, I prioritised to align with the roadmap and made sure I was ahead of the next sprint.

UI Design

Translating the insights gathered from research into high fidelity UI designs.  I focused on crafting a UI design that followed Hitachi’s brand guidelines and AA-AAA accessibility standards.   The final design addressed the comments and issues that were experienced with the previous wireframe prototypes.   As part of the hand-off, I documented typography and layout styles as well as layout grids, components, interaction patterns, and data visualisation.

Handover Process

Documenting and communicating design decisions eased the handover process, prior to a design system being in place. Layout grids, for instance, serve as a tangible reference that communicate the spatial arrangement of elements, such as buttons, text fields, and images, within the interface.

This enabled developers to accurately translate design concepts into functional code, whilst ensuring consistency and alignment with the intended user experience, minimising discrepancies between design mockups and the final product.

8pt Grid System

I also followed the 8pt grid system when designing styles and components for this product. Adherence to an 8pt grid promotes scalability and adaptability across various screen sizes and devices, ensuring that the design remains cohesive and functional on all platforms.   The consistent spacing provided by the grid simplifies the development process, as engineers can translate design specifications more easily, especially if a component has several variants and states.

Overall, the 8pt grid system not only enhances the aesthetic appeal of the design but also streamlines the design-to-development workflow.

Validate

Lean Experiments

Lean experiments offer a systematic and cost-effective approach to validating hypotheses and refining digital products. This iterative process allows for the identification of user needs and preferences early on, facilitating the development of features that resonate with the target audience. Working within the product team to test and review real-world results to confirm if individual features are performing as expected.

Find out more.

Analytics

Quantitive data offers precise, measurable insights into user interactions, engagement metrics, and performance indicators, providing a clear picture of how users interact with the product. It enables teams to track key performance metrics objectively, identify trends, as well as the effectiveness of implemented changes.   This data empowers product teams to prioritise features, ultimately driving iterative improvements to the overall user experience.

User Feedback

Through methods like user interviews, surveys, and observational studies, qualitative data uncovers user motivations, preferences and pain points. It enables teams to empathise with users, identify patterns, and make informed decisions to enhance user satisfaction and drive product success.   Ultimately, qualitative data complements quantitative analysis, giving a better understanding of how to meet user needs and expectations.

Stakeholder Reviews

Regular internal reviews, ensuring the success and alignment of a digital product with organisational goals.  Is the product achieving the desired business goals?   Business requirements and focus can change. These reviews serve as opportunities for stakeholders to share new insights, re-confirm the product vision and align on business priorities throughout the product development lifecycle.

Outcomes

I led the end-to-end design of a new digital tool for Hitachi, turning a loose brief into a focused, user-validated MVP. Starting with stakeholder workshops, I defined core user needs and translated them into clear product goals. Through rapid prototyping and testing, I refined the UX and delivered a high-fidelity design that helps organisations manage energy use and plan EV fleet transitions. The result: a launch-ready product that supports smarter, more sustainable operations.

The post Hitachi EV depot dashboard appeared first on Robert Sheppard Design.

KarmaPact app

robshepp — Wed, 01 Nov 2023 16:56:45 +0000

Case Study.

KarmaPact help employers connect with their employees through social, community and environmental programs. This allows companies to embrace and engage with their workforce, while enabling employees to be part of the changes they care about. These relationships are more relevant in the ‘new normal’ where teams are dispersed and individuals can feel isolated.

Case Study.

KarmaPact help employers connect with their employees through social, community and environmental programs. This allows companies to embrace and engage with their workforce, while enabling employees to be part of the changes they care about.

My Role

Reporting directly to stakeholders, I led the brand identity design and acted as lead product designer for the app. Part of a global team (spread across the USA, India, France and the UK) I was responsible for the visual design of the entire product. We followed Lean UX and Agile principles to scope and launch a brand new digital offering at pace, during a global pandemic.

Discover.

Identify users and product purpose.

Define.

MVP scope, userflows, sketches & wireframes.

Design.

Brand Identity design and product UI design.

Validate.

Review feedback from trial to build roadmap.

My Role

Reporting directly to stakeholders, I led the brand identity design and acted as lead product designer for the app. Part of a global team (spread across the USA, India, France and the UK) I was responsible for the visual design of the entire product. We followed Lean UX and Agile principles to scope and launch a brand new digital offering at pace, during a global pandemic.

Discover.

Identify users and product purpose.

Define.

MVP scope, userflows, sketches & wireframes.

Design.

Brand Identity design and product UI design.

Validate.

Review feedback from trial to build roadmap.

Brand Identity Design

The brand identity was designed with a vibrant, but accessible colour palette that really allowed us to breathe life into the UI design.

The chosen logo represents the three types of activities that users can upload in order to engage with their colleagues:
• Donations
• Volunteering
• Support.

The strong visual language supports the story and purpose of KarmaPact and is extremely important when launching a new brand and product. Any start up needs to hit the market with a professional brand identity so they can approach prospects with confidence and KarmaPact are no exception.

Collaboration was essential because the team is truly global. The stakeholders are based in the USA and France, the development team is based in India and I’m working from the UK. For that reason we chose to work in an agile way, breaking the scope down to user stories and running regular ideation sessions, workshops and retrospectives.

I clearly scoped and explained features by mapping out userflows and creating detailed annotated presentations. This allowed us to collaborate as a team, with early stage feedback.

This flow of information kept the project going at pace, despite the differing time-zones and languages. Complex flows and detailed interactions were built using Anima and Principle, to compliment the static Sketch files.

UI Design

Identifying and expressing the purpose of the app, as well as it’s intended users is fundamental to the way it is designed. I was also conscious of time and budget constraints which led us to adopt material design principles. This saved time and gave us a library of proven styles and components to work from.

UI Design

Identifying and expressing the purpose of the app, as well as it’s intended users is fundamental to the way it is designed. I was also conscious of time and budget constraints which led us to adopt material design principles. This saved time and gave us a library of proven styles to work from.

Adding an activity

For KarmaPact, we wanted to make engagement frictionless. A recent study showed that 85% of people use their thumb to navigate apps, and 49% operate their phone with one hand.

To allow users to add new activities quickly and easily, I designed the ‘+’ so that it was in a prominent position and available on every screen. It is positioned so the user can easily reach it with their thumb whilst holding their mobile device.

Showing support

Engagement and connection is at the core of what KarmaPact is all about. Showing support, saying thank you and getting involved with colleagues is a huge part of bringing people together.

Gamifying the experience

Initially we had planned to generate a score from the users activities in order to create competition within the teams and gamify the experience. However, initial feedback from test users highlighted that this wasn’t in keeping with the purpose of the app. People don’t do charitable work in order to shout about it or score points. Instead, we had another look at this and created a personal ‘Karma footprint’. This isn’t shared with other users, but it can be used as a rewards scheme that the employees organisation manages.

Outcomes and results

The KarmaPact team have been able to put a tangible and credible product into the hands of some large organisations’ employees. They are trialling the app and are actively involved in helping us to refine it, because they want to be part of it’s success.

The next phase for us, is to consolidate this feedback into a roadmap and launch the product to a wider audience. Along the way we’ve learned how working remotely can be an isolating and sometimes lonely experience. Regular collaboration, updates and demos (no matter how small) brings the team back together and gets us talking and focussed again. This has been a key part of this experience for me. Better things happen when you work as a team.

Outcomes and results

The KarmaPact team have been able to put a tangible and credible product into the hands of some large organisations’ employees. They are trialling the app and are actively involved in helping us to refine it, because they want to be part of it’s success.

The post KarmaPact app appeared first on Robert Sheppard Design.

Move brand identity

robshepp — Tue, 02 May 2023 16:48:53 +0000

Case Study.

A team of product, technology, and travel experts launched ‘Move’ a machine-enabled booking platform, which tailors holiday experiences to the individual preferences of each traveller. This innovative approach promises to provide unparalleled levels of personalisation.

Case Study.

A team of product, technology, and travel experts launched ‘Move’ a machine-enabled booking platform, which tailors holiday experiences to the individual preferences of each traveller. This innovative approach promises to provide unparalleled levels of personalisation.

My Role

The business formerly known as SmartAir recognised a promising opportunity to pivot into a technology and platform partner for travel brands. As the assigned designer, my responsibility was to develop a fresh brand identity and create a website that would bolster the introduction of Move’s updated image and business focus.

Brand Identity Design

I worked closely with the team to create a fresh and contemporary image that reflected the brand’s unique vision and offerings. In this portfolio, I showcase my design process and how we captured the essence of Move’s new direction while remaining true to their brand values.

Stage 1

I replayed the brief back to the client, emphasizing particular keywords that could form the basis of the brand’s values and proposition: Relationship-based, connected, inclusive, confident, trusted, assured.

Following that, I created four distinct brand identities and presented them to the team. We then gathered feedback from stakeholders throughout the organisation to reach a consensus on the most suitable overall look and feel.

Stage 2

The most favoured version was selected, and I further developed it to better capture the concept of partnership. The final design portrays Move as a technology partner in the background, providing support to their customers.

Brand Guidelines

As a designer, I understand the importance of consistent and coherent branding across all touchpoints to create a strong, memorable, and recognisable brand identity.

In this project, I was tasked with creating a set of guidelines to ensure that all creative elements remained aligned with the brand’s core values and messaging. These guidelines are a vital tool for anyone involved in creating marketing materials for the brand, from designers and marketers to copywriters and photographers.

Website Design

The design process for the new marketing website involved several key steps to ensure that the website aligned with Move’s brand values, messaging, and business goals.

1 Planning: The first step was to define the website’s objectives, target audience, and features required. I collaborated closely with the Move team to understand their vision and gather all necessary information to inform the design.

2 Wireframing: With a clear understanding of the website’s purpose, I created wireframes that outlined the website’s structure and layout. The wireframes acted as a blueprint for the design process, and allowed the team to visualize the website’s overall organization and navigation.

3 Visual Design: Once the wireframes were approved, I moved on to the visual design stage. I used Move’s brand guidelines to create a consistent visual language that reflected the brand’s values and messaging. The design included graphics, illustration, typography, color schemes, and imagery that conveyed the brand’s focus on personalization and innovation.

4 Prototyping: With the visual design approved, I moved on to prototyping the website in Figma. This allowed the team to see how the website would function in a live environment and provide feedback on any necessary changes. A prototype also helps when handing-over to developers as I can also highlight any animations and interactions.

Outcomes

In conclusion, this brand identity case study showcases the successful transformation of SmartAir into Move, a forward-thinking technology and platform partner for the travel industry.

Through a collaborative process, I worked closely with the Move team to develop a fresh, modern, and distinctive brand identity that reflects the brand’s values and messaging. The final result is a consistent and memorable brand that stands out in a competitive market and resonates with its target audience. This project demonstrates the importance of effective brand identity design and how it can be a powerful tool in helping a brand to communicate its unique offerings and vision.

The post Move brand identity appeared first on Robert Sheppard Design.

UX/UI experiments at NewDay

robshepp — Wed, 18 Aug 2021 14:28:09 +0000

Testing a theory.

There are times as a UX/UI designer, where I already have a solution in mind for the problem I’ve been tasked to fix. So when I want to simply test a theory as part of the Lean UX process, I like to follow the Lean Experiment Map.

This process allows me to test and measure the potential of a new design and present back to the team and stakeholders. The point of this process is to formulate a hypothesis, run an experiment, measure the results and if necessary, re-run the experiment until the desired result is achieved.

So here’s how I ran this experiment at NewDay against a KPI to reduce call centre traffic and encourage customers to use the self-help tools:

Hypothesis.

New customers rely on the call centre because they cannot easily find the information they need on the website. Re-purposing the hidden FAQ page, renaming it ‘Help & Support’ and moving it into the main menu will enable visitors to ‘self-help’ and reduce calls to the call centre.

Experiment.

Show participants the current live FAQ solution and then the proposed Help & Support solution. Ask them to imagine they are looking to find information on when their PIN number will arrive. Run two basic usability tests for control (an A/B and a B/A test)

Existing FAQ solution tested:

Task completion

Av time to find the answer: 2m 32s

Difficult

How easy was it to find the answer to your query?

Confident

How confident where you that you had found the correct page, before clicking on it?

New Help & Support solution tested:

Task completion

Av time to find the answer: 46s

Easy

How easy was it to find the answer to your query?

87.5

Confident

How confident where you that you had found the correct page, before clicking on it?

Results.

The Help & Support variant performed better overall. It took users less time and less clicks to find the answer to the query presented to them at the beginning of the user test.

Why?

Because users understand ‘Help & Support’ and although a few participants spoke in the think out loud test about looking for an FAQ section, they mentioned it was hard to find. The new Help & Support page is designed to signpost users to the most commonly asked questions.

Insight.

Making it easy for customers to self-help through the website for basic queries should reduce the stress on the call centre. But it needs to be clearly signposted, more prominently positioned and the page itself needs to be better designed.

Next steps.

Re-purpose FAQ into a Help & Support page and move it into the main navigation. Review and refine the design and content for this page in conjunction with insights from speech analytics.

Launch and test.

Lean UX process at NewDay

Read how I use the Lean UX process to highlight a problem, develop a theory and design solutions that result in successful outcomes.

NewDay case study

MyWay Health (pdf)

The post UX/UI experiments at NewDay appeared first on Robert Sheppard Design.

UX/UI process at NewDay

robshepp — Tue, 18 Aug 2020 14:56:04 +0000

An example of my UX process in action.

The following case study was undertaken at NewDay, where I have been contracting as a Senior UX/UI designer. I was working within an agile squad, who were responsible for the online acquisition journey. The KPI for the squad was to improve online conversion. As a result, the team looked into ways of achieving the KPI. I adopted the Lean UX process to find a problem, come up with a theory and ultimately design a solution.

The Lean Experiment Map

Read how I use this process to formulate a hypothesis, run an experiment and measure the results.

NewDay case study

MyWay Health (pdf)

The post UX/UI process at NewDay appeared first on Robert Sheppard Design.

CarGuide 0-1 product design

robshepp — Sun, 29 Mar 2020 11:13:39 +0000

Case Study.

CarGuide is a start-up that exists to help and guide all used car buyers. It gathers vital information about the used car(s) you are considering and presents that back to you along with an assessment of the vehicle and key questions you should ask the seller, offering bespoke advice in a non-technical way.

Case Study.

CarGuide is a start-up that exists to help and guide all used car buyers. It gathers vital information about the used car(s) you are considering and presents that back to you along with an assessment of the vehicle and key questions you should ask the seller.

My Role

Collaborating with the founders and working alongside a remote team of developers, I led the design of the brand identity, product definition, user experience and final visual design of CarGuide. As part of the process, I took the team through the Lean UX methodology and cherry-picked the appropriate activities for this project.

Discover.

Ideation workshop, personas, user stories, business stories.

Define.

Userflows, sketches, prototype & wireframes, user testing.

Design.

Brand identity design, UI design, design system, collaborate with developers.

Validate.

Gather data throughout the project to iterate design.

Discover

Firstly, I ran an ideation workshop to help stakeholders define the overall value proposition for CarGuide. A huge amount of data can be gathered for each vehicle, but what is actually valuable to the user?

By encouraging the business to bring users to life with personas, we can understand (or at least make some assumptions) around their motivations. That helped us to decide how much (and what) data to display to both petrolheads and less experienced used car buyers.

We collaborated remotely on card sort sessions to define the MVP. By creating user stories, we could reference the personas to validate that the MVP functionality met all of their needs. We also set the business needs alongside these.

Creating these cards in Trello, meant that the whole team could contribute, comment and add their own user story. In effect, we were developing the functional spec of the product.

Whilst we were focussed on the customer needs, it’s also important to remember the business goals and objectives and aim to balance the two.

Define

Userflows

I started the define stage by generating userflows to describe and optimise the paths taken for users to perform the key tasks within the site: Add a vehicle / Compare saved vehicles / Buy credits / Buy a report.

Userflows allowed us to focus on the users experience and not the design details on the screen. A flow should show the number of decisions required to perform a certain task. It therefore shows us where we can optimise the journey and reduce friction for the user.

https://robertsheppard.design/wp-content/uploads/2020/03/CarGuide-1.mp4

Interactive wireframes.

Next, I created interactive wireframes in Adobe XD, to better understand the userflows and to start to bring the solution to life. These are extrememly useful for early user testing and A/B testing of key pages (mobile-first). We conducted a live test in order to gain feedback on the following:

• The overall proposition

• Value (cost per report)

• Usability and intuitiveness

• Tone of voice

Design

Brand Identity.

I designed a brand identity that gives CarGuide a personality to fit with their brand values: “A friendly guide helping motorists every step during the used car buying cycle, helping them to make the right decision, avoiding unnecessary trips to view dodgy cars”.

The smiley ‘saintly’ car logo was created to give CarGuide a device which can be used on social media channels and throughout the website as a visual guide.

Launch Website

The launch website introduced users to the CarGuide proposition and brand for the first time. It was important that we had clear messaging and brand guidelines to follow, so that their first impressions would be positive.

UI Design

With the style now set in place, I could design the functional pages that were created during the ‘define’ stage. I adopted a mobile-first approach to design as we had identified this would be the main use case for CarGuide.

Together, we explored UX solutions for the detailed report pages and key functionality such as ‘Compare favourites’ ‘Buy Credits’ and the ‘Buy Report’ journey.

Design system

To enable CarGuide to iterate and introduce new features, each of the elements are archived into a library or design system. This system is an important tool to ensure that the established design is maintained, going forward. By creating the design system in Sketch, developers can access and inspect all the elements using Zeplin.

Results

The CarGuide MVP was launched during lockdown and is now providing 1000+ buyers reports a month to UK motorists. Established businesses are also integrating their unique vehicle data API into their platforms. The team will build on this success and together we continue to develop and refine the product.

The post CarGuide 0-1 product design appeared first on Robert Sheppard Design.

Direct Line application flow

robshepp — Sat, 29 Feb 2020 11:14:32 +0000

Case Study.

Direct Line for business did not have an online quote and buy journey. It was deemed too complicated due to all of the variables each business could have. This meant each quote had to be handled manually which was time consuming, costly and not a good experience for potential customers.

My Role

Lead the experience design for Direct Line. Lead and manage the design and dev team at buffalozoomedia. Act as lead UX designer within the team and report directly to the stakeholders at Direct Line. Manage handover of assets and front-end code to DL’s technology partner. Plan and implement future phases of incremental updates.

Discover.

Ideation workshops, review data, userflow diagrams.

Define.

Sketch wireframes, high fidelity clickable prototype, user testing.

Design.

UI design of entire journey, styleguide, collaborate with devs.

Validate.

Gather data throughout the project to iterate design.

Discover

I collaborated with DL staff to review the problem and advise on how to manage the experience design for Direct Line. What became clear was that the insurance products needed to be tailored to individual, specific businesses. For instance, a hairdresser might have several locations, all of which could be different types of building. They might also have a mixture of permanent and part-time staff, stock in the form of products and maybe a vehicle to include. Roll that out for multiple types of businesses and it soon becomes very complex.

The goal was to keep the application process to 20 minutes. This was to minimise the amount of abandoned applications.

As this was a first for the business insurance team, we only had historical speech analytics data to go from. We used these real life scenarios to understand the pain points and also to highlight areas where compliance had to be adhered to. We discovered that although the existing offline phone application wasn’t ideal, it had a conversational quality to it which helped to optimise the journey. By replicating this and asking pertinent questions up front we realised we could then make the application journey itself more bespoke and therefore quicker for each individual.

Define

My role was to lead the experience design for Direct Line. I created a simple interface that adds insurance products to the users basket as they answer the pre-questionnaire. This is a transparent user-centred process that tells the customer exactly what products they will be offered in their quote and buy journey. It makes the remaining quote and buy journey shorter becasue it’s personalised to that user. It also means, therefore, that Direct Line’s quote will be more accurate and more competitive.

https://robertsheppard.design/wp-content/uploads/2020/03/Wizard-walkthrough.mp4

Design

Whe it came to the quote and buy part of the journey, Direct Line already had a distinctive style in place. However, we still needed to design new components. It was my responsibility to make sure that not only the agreed solution was carried forward, but that the designers understood and respected Direct Line’s style. Above all, I wanted to give designers and developers enough freedom to discover and suggest additional solutions that would further improve the experience.

Both design and development had to be done to meet AAA accessibility standards. I gathered requirements and mentored the dev team to achieve that, whilst also understanding the needs of the technology supplier responsible for the back-end and integration. I encouraged my team to get involved in regular presentations to the stakeholders and partners. Where problems arose, we worked very quickly to come up with a solution that would not interfere with the experience.

Styleguide

During the design phase I developed a styleguide which was accessible and valuable to all members of the team. As a result, the look and feel is maintained as the product is developed and iterated.

The post Direct Line application flow appeared first on Robert Sheppard Design.

Aston Martin UI design

robshepp — Fri, 03 Jan 2020 12:06:56 +0000

Case Study.

Aston Martin joined forces with Masters Historic Racing, one of the world’s leading historic race event organisers, to become its official automotive partner. This has allowed Aston Martin to engage with it’s customers through a number of activities, including exclusive events for owners of historic race cars and road cars.

Aston Martin joined forces with Masters Historic Racing, one of the world’s leading historic race event organisers, to become its official automotive partner. This has allowed Aston Martin to engage with it’s customers through a number of activities, including exclusive events for owners of historic race and road cars.

My Role

I led the design and managed the development of the website. As the Senior UI designer, I advised on the website architecture, built wireframes, designed all layouts and created the e-commerce user journeys. As a team, we collaborated remotely with AMHR’s team in Monaco.

Define

I built a website structure to create a story around this new initiative. I sorted content into two sections – ‘Drive’ and ‘Heritage’ The Drive section connected the user to the unique and exclusive experiences on offer, selling the dream and leading them to the booking forms. Content in the Heritage section played on Aston Martin’s race pedigree and will eventually become a lifestyle blog.

A slight deviation

Once the structure had been agreed, the team at Aston Martin were keen to see how this would translate in the final design.

Whilst managing the process is important, it’s also crucial to understand how the business works and as there was so much excitement around this, it was acceptable to temporarily ‘jump ahead’ and give them a UI design concept.

The team understood that this was purely theoritical and set to change. We then continued to the wireframing phase in the knowledge that the design would be re-visited.

A slight deviation

Once the structure had been agreed, the team at Aston Martin were keen to see how this would translate in the final design.

Whilst managing expectations is important, it’s also crucial to understand how the business works and as there was so much excitement around this, It was acceptable to ‘jump ahead’ and give them an early view of the UI design.

Design

Early in the design process I identified how we could build the page layouts using repeat components. For instance: calendar, booking forms and feature links that can be built once and integrated into the pages throughout the site. Thinking ahead and involving developers at this early stage, saved time and created efficiences further down the line.

Booking forms

The race drivers booking form had to capture a lot of information. Where possible I optimised the question sets and grouped them into logical sections.

The sections are dynamic and will only appear based on the previous selections.

Software integration.

The technology team wanted to use a third party solution to handle bookings, e-commerce and user accounts. They chose an off the shelf events solution that can also generate e-tickets. Some design work was done to re-skin this and create a seamless journey for the user. Using established software in this way dramatically cuts down the development time, but crucially also reduces the time to take the initiative to market.

The post Aston Martin UI design appeared first on Robert Sheppard Design.