Staff Compliance Homepage
& Navigation Header

The homepage is a simple hub of content for those navigating through the compliance applications. This homepage had to host legacy apps and new apps in one place.

Staff Compliance Homepage
& Navigation Header

During this project I worked collaboratively with another senior UX designer, working on aspects of the UX, I also created all the UI required for this project.

Background

This was the first project I worked on at Deutsche Bank and has now been completed. The user could vary from a very logical individual working day to day on dense data, to someone who does not work on data and wants instant clarity. The staff side was a new concept requiring the user to navigate a range of applications for declaring any conflicts that require permission or declaring. The navigation header and home page would be updated using an agile process, integrating new applications over time.

 

The Challenge

The Brief is to design a homepage to hold all new and legacy applications in place this homepage must also host EC policies and the “My Queries” application for advice or help.

The look and feel: As the staff side of compliance was not established this required a new look and feel and to approach the screens layouts in staff friendly way existing applications designed for compliance were primarily designed to be data-dense however these users need a more simple design holding fewer data but requiring more clarity. As a starting point, it was agreed that re-using existing components from the private side and adjusting the look and feel of the layout and the application interface would be efficient.

The Solution

Although the header and homepage are now completed. Over time new applications will be integrated into this framework. This may take many years to implement, with some Staff compliance applications still using legacy apps.

Solution includes:
- Creating a breadcrumb navigation
- Homepage design that considers old and new apps.
- Integrated Query management application and chatbot.
- Links to resources required for employees
- Bilingual layout that works at all breaking points
- Account viewing options to see organisational information
and more…

  • My Role

    To design a home page UI, explore different layouts and consider the responsiveness of select components whilst using existing DSM library

    Deliverables:
    - Visual Designs
    - Component updates
    - Personas
    - Simple navigation map
    - Moad board look and feel staff side

  • Software

    Agile - Work framework
    JIRA - Organise tickets
    Sketch - UI/UX design
    DSM - Design Library
    Invision - Workshops, Prototypes
    Invision/Axure - User testing

  • Stakeholders & Team

    Stakeholders:
    Head of UX (Client)
    Business owner
    Product owner

    Team:
    x2 Teams of developers
    (1x staff side 1x Private side)
    Product Owner - per staff and private side.
    UX designer
    UX/UI Designer
    User tester

  • Duration

    Home page (staff) 1 yr complete whilst working on other applications along side.

Emphasise - Understanding My User

This application needs to cater to all employees, from users who may only use this software 3 to 4 times a year to user’s that will use this application on a daily or weekly basis. In order to understand the range of abilities using this application and any specific goals or pain points, they may face.

 

Look and Feel for Staff side

As the staff side of compliance was not established this required a new look and feel and to approach the screens layouts in staff friendly way existing applications designed for compliance were primarily designed to be data-dense however these users need a more simple design holding fewer data but requiring more clarity. As a starting point, it was agreed that re-using existing components from the private side and adjusting the look and feel of the layout and the application interface would be efficient.

Where Are We Going?

Before starting the main design it is important to understand the requirements. This home page needed to cater to an in-page chatbot, applications within the main employee compliance framework and also external legacy applications. It was also important to make sure that that space was allowed for new applications to be added over time.

Home Page Development Journey

 

When I started designing the Home page, not all requirements had been finalised due to this the design has developed over time. As a UI/UX designer, it is always important to listen to your users and get clarity on how to use the space available as more features are added.

Feedback from users:

Please see brief details from user testing:

Pro’s:
- Tiles are helpful to see links used regularly
- Tabbed system was helpful to separate the key information

Con’s
- News area is too dominant on the screen.
- The table area could become quite busy if there are a lot of disclosures visible.

Change in requirements

Business Additional requirements:
- Remove new section
- Remove application overviews
- Add legacy app links
- Add FAQs and EC Policies

Considering Future Applications Integration…

Adding applications to the header: Due to the screens being responsive it was important to consider other applications that will need integration in the future when considering the application breaking points

Language considerations: When working with bilingual responsive pages it is important to consider the longest possible language when designing the screen. The german translation of the screen was taking up the most space so I used this benchmark and also showed a max character limit before I would expect a name to truncate see details below.

Working Out Breaking Points

For the home page, it was important to define all the breaking points to developers between mobile view navigation to oversized screens. We defined the largest breaking it at 1920px, at this stage content is restricted to a container but the bleed continues to the edges of the page.

breaking points.png

Communicating Final Designs

All specifications are designed on Invision and links are shared with developers. All components are linked to the DSM system giving the developers a link straight to the component.

Here’s My Design Process Summary…

 

Empathise

The user could be any employee working in DB. This could be someone working in reception to the CEO of the company. Some will be using this software once a year. Others once a week… Managers also needed to use the application to monitor their teams.

Define

What are we trying to achieve? To create one single place for all employees to find a specific compliance application, whether this is an external or internal application.

A place an employee can get advice and information on what to declare or if they need to declare something.

The home page is straightforward to use, with a low cognitive load.

Ideas

The initial concept was surfacing all current disclosures on the home page and making them collapsible content to users the user would then need to click a link to see more detail.

However, after testing a more simplified navigational system that holds all links and allows the user to save regularly was used.

 

Prototype

Overview prototypes were developed Invision when discussing navigation and specific interactions were created in Axure.

All UI and UX designs were uploaded onto invision as the single source of truth for the developer and other stakeholders.

Technical stuff
AG grid - responsive breakpoints
components, text styles, Colours - DSM Library.
Font - Ariel
Made in sketch

Testing

A lot of time went into testing this application through a high fidelity Axure prototype. Testing was carried out by our user research team. During testing, we went through three iterations of the design after feedback.