Overview
Tesco Bank is a UK retail bank offering financial products and services. Its community platform provided customers with a space to connect, get support, and access helpful information.
The challenge was to improve clarity and consistency of the homepage, aligning it more closely with the main Tesco Bank website while improving navigation and user engagement.
I led the design and front-end development of the community homepage, translating Tesco Bank’s brand into a clear, accessible interface and introducing features that improved navigation and supported user engagement.
The redesign was launched successfully and supported customer engagement over several years before the community was discontinued.
- Client
- Tescobank
- Role
- UI Designer & Front End Developer
- Focus
- High-fidelity UI design,
Front end build - Platform
- Web - Community Platform
- Tools
- Adobe XD, Digital Design System, HTML, CSS (SCSS), JavaScript
Challenge
The previous Tesco Bank community homepage lacked clarity and consistency with the main site, making it difficult for users to navigate content and understand how to engage with the community.
Cluttered layout and unclear hierarchy
The community homepage used a multi-column layout with competing content blocks, resulting in a cluttered interface and unclear hierarchy. This made it harder for users to prioritise key actions and navigate the page.
Inconsistent with the main website
The page was visually inconsistent with the main site, with differences in layout and the styling of content blocks that created a disconnect from the main site experience.
Limited distinction between user states
A clearer distinction between logged-in and logged-out experiences was needed to better guide users towards relevant actions, such as signing up, logging in, or asking a question.
New community features
New features defined by the client, including monthly community statistics and a persistent ‘Ask a question’ call-to-action, needed to be incorporated within the existing layout while maintaining clarity and ease of use.
Approach
Simplifying the layout and hierarchy
Simplified the layout from a two-column structure to a single column, improving hierarchy and aligning it with the main site. Lower priority content blocks, including the latest news, top solution authors, and latest accepted solutions, were removed to reduce clutter. Spacing and grouping were refined to create clearer separation between sections and improve the overall flow of the page.
Aligning with Tesco Bank’s brand
Redesigned key content blocks, including the community boards, getting started links, and product categories, to align with the visual style used across the main site.
Iterative design and collaboration
Collaborated closely with the client to understand requirements and help shape the overall strategy for the redesign. Designs were developed iteratively, incorporating feedback to refine layout, content blocks, and visual style.
Introducing features to support engagement
Redesigned the hero banner to reflect logged-in and logged-out states, with tailored actions for each. Monthly community statistics were introduced to highlight activity levels and build trust, and a persistent ‘Ask a question’ call-to-action provided a clear entry point for users to seek support.
Solution
The following screens show the redesigned Tesco Bank community homepage, focusing on improvements to layout, hierarchy, and visual alignment with the main site.
Homepage (Logged out)
The logged-out homepage presents the Tesco Bank community, with clear sign-in and registration CTAs in the hero banner supported by key content that guides users towards joining.
Homepage (Logged in)
The logged-in homepage builds on the experience with an updated hero banner, introducing an ‘Ask a question’ call-to-action to encourage users to seek support.
Contributions
Discovery and planning
Collaborated with the client through meetings and workshops to understand requirements and help shape the overall strategy for the redesign.
UI design
Led the UI design for the community homepage, producing high-fidelity layouts aligned with Tesco Bank’s brand, and refining the designs in response to feedback.
Front-end implementation
Implemented the redesigned homepage using HTML, CSS (SCSS), and JavaScript, collaborating with developers to build new features and ensure the final build accurately reflected the intended design.
Outcome
The redesigned homepage was successfully launched, improving clarity and alignment with the Tesco Bank brand. It made it easier to access key content and take action, while the new features supported community engagement.
The design approach was later extended to other pages, introducing a consistent single-column layout across the platform. The community remained active for several years before being discontinued.
View Tescobank.com
The design approach was later extended to other pages, introducing a consistent single-column layout across the platform. The community remained active for several years before being discontinued.