Back

Back

Escode View Portal

Software Escrow Portal

A web application designed for managing software escrow, to ensure source code is secure and accessible.

Lead Designer

Lead Designer

NCC Group

NCC Group

Remote - UK

Remote - UK

Agile Iterative Design Process

Agile Iterative Design Process

2022 - Present

https://www.escode.com/view/

This redesign project aimed to overhaul the portal’s original design and user journey, simplify software escrow management, enhance security and improving the overall usability.

2022 - Present

https://www.escode.com/view/

This redesign project aimed to overhaul the portal’s original design and user journey, simplify software escrow management, enhance security and improving the overall usability.

Problem Space

Outdated escrow services for storing source code fail to meet modern design standards, expectations and accessibility, making users frustrated with poorly designed UI's and unclear workflows. While essential for secure code management, these platforms make the experience unnecessarily stressful and painful currently.

Problem Space

Outdated escrow services for storing source code fail to meet modern design standards, expectations and accessibility, making users frustrated with poorly designed UI's and unclear workflows. While essential for secure code management, these platforms make the experience unnecessarily stressful and painful currently.

Problem Space

Outdated escrow services for storing source code fail to meet modern design standards, expectations and accessibility, making users frustrated with poorly designed UI's and unclear workflows. While essential for secure code management, these platforms make the experience unnecessarily stressful and painful currently.

Secondary Research of Escrow Services

60% of consumers abandon purchases due to poor website user experience, costing e-commerce companies billions

Storyblok

60% of consumers abandon purchases due to poor website user experience, costing e-commerce companies billions

Storyblok

60% of consumers abandon purchases due to poor website user experience, costing e-commerce companies billions

Storyblok

user confusion and task delays

"Baymard’s research indicates that inconsistent navigation can lead to user confusion and task delays. For instance, 66% of sites don’t highlight the user’s current scope within their main navigation, making it harder for users to understand their location within the site hierarchy."

Baymard Institute

user confusion and task delays

"Baymard’s research indicates that inconsistent navigation can lead to user confusion and task delays. For instance, 66% of sites don’t highlight the user’s current scope within their main navigation, making it harder for users to understand their location within the site hierarchy."

Baymard Institute

user confusion and task delays

"Baymard’s research indicates that inconsistent navigation can lead to user confusion and task delays. For instance, 66% of sites don’t highlight the user’s current scope within their main navigation, making it harder for users to understand their location within the site hierarchy."

Baymard Institute

Information Overload Causes Anxiety

"Research indicates that 70% of users experience anxiety when confronted with dashboards overloaded with information. This overwhelming amount of data can lead to users overlooking critical information."

THUMBCHARTS.COM

Information Overload Causes Anxiety

"Research indicates that 70% of users experience anxiety when confronted with dashboards overloaded with information. This overwhelming amount of data can lead to users overlooking critical information."

THUMBCHARTS.COM

Information Overload Causes Anxiety

"Research indicates that 70% of users experience anxiety when confronted with dashboards overloaded with information. This overwhelming amount of data can lead to users overlooking critical information."

THUMBCHARTS.COM

Inconsistent Layouts and Visuals Impede Users

"Inconsistent layout and visualization patterns within dashboards create confusion and cognitive overload, ultimately reducing user engagement and hindering the quick retrieval of key information."

IEEE VIS

Inconsistent Layouts and Visuals Impede Users

"Inconsistent layout and visualization patterns within dashboards create confusion and cognitive overload, ultimately reducing user engagement and hindering the quick retrieval of key information."

IEEE VIS

Inconsistent Layouts and Visuals Impede Users

"Inconsistent layout and visualization patterns within dashboards create confusion and cognitive overload, ultimately reducing user engagement and hindering the quick retrieval of key information."

IEEE VIS

Internal Interviews

12 Colleague Interviews
Subject to NDA Agreements

Based on the secondary research, I conducted interviews with 12 colleagues within NCC Group familiar with View, who have varying levels of experience of depositing code onto the platform. Their feedback highlighted two core themes, directly informing the redesign process.

Direct access to client feedback was delayed until much later stages of the project and remains intermittent, presenting a challenge in aligning the redesign with client expectations early on, due to security and budget constraints.

Managing Code Deposits Easily
Managing Code Deposits Easily

  • Actions

    “Whenever I upload code, I double-check everything first because I’m never sure if it’s uploaded correctly.”

  • Desire

    “I want to see clearly the steps to upload code, and progress being made to if it’s done correctly.”

  • Pain Points

    “The unclear UI makes it hard to know if my code is safely deposited, so I feel worried or anxious every time I need to deposit on View.”

Actions

“Whenever I upload code, I double-check everything first because I’m never sure if it’s uploaded correctly.”

Desire

“I want to see clearly the steps to upload code, and progress being made to if it’s done correctly.”

Pain Points

“The unclear UI makes it hard to know if my code is safely deposited, so I feel worried or anxious every time I need to deposit on View.”

  • Actions

    “Whenever I upload code, I double-check everything first because I’m never sure if it’s uploaded correctly.”

  • Desire

    “I want to see clearly the steps to upload code, and progress being made to if it’s done correctly.”

  • Pain Points

    “The unclear UI makes it hard to know if my code is safely deposited, so I feel worried or anxious every time I need to deposit on View.”

Quickly Finding Previous Deposits
Quickly Finding Previous Deposits

  • Actions

    “I keep a separate document to track my deposits because it’s so difficult to find them in the dashboard.”

  • Desire

    “I want to see clearly the steps to upload code, and progress being made to if it’s done correctly.”

  • Pain Points

    “The unclear UI makes it hard to know if my code is safely deposited, so I feel worried or anxious every time I need to deposit on View.”

  • Actions

    “I keep a separate document to track my deposits because it’s so difficult to find them in the dashboard.”

  • Desire

    “I want to see clearly the steps to upload code, and progress being made to if it’s done correctly.”

  • Pain Points

    “The unclear UI makes it hard to know if my code is safely deposited, so I feel worried or anxious every time I need to deposit on View.”

Actions

“I keep a separate document to track my deposits because it’s so difficult to find them in the dashboard.”

Desire

“I want to see clearly the steps to upload code, and progress being made to if it’s done correctly.”

Pain Points

“The unclear UI makes it hard to know if my code is safely deposited, so I feel worried or anxious every time I need to deposit on View.”

Actions

“I keep a separate document to track my deposits because it’s so difficult to find them in the dashboard.”

Desire

“I want to see clearly the steps to upload code, and progress being made to if it’s done correctly.”

Pain Points

“The unclear UI makes it hard to know if my code is safely deposited, so I feel worried or anxious every time I need to deposit on View.”

Designing for Core Users

To better understand the goals and pain points identified, I created a persona that consolidates the common themes, ensuring the redesign aligns with their needs.

To better understand the goals and pain points identified, I created a persona that consolidates the common themes, ensuring the redesign aligns with their needs.

To better understand the goals and pain points identified, I created a persona that consolidates the common themes, ensuring the redesign aligns with their needs.

Experience Mapping

The user journey map highlights key pain points, guiding design improvements to better address Arthur’s needs and streamline the outdated deposit process.

The user journey map highlights key pain points, guiding design improvements to better address Arthur’s needs and streamline the outdated deposit process.

The user journey map highlights key pain points, guiding design improvements to better address Arthur’s needs and streamline the outdated deposit process.

How can we aid users of escrow services store and manage code securely and efficiently, while addressing frustrations with outdated, complex design?

Identified Opportunities

Clear Information Access

The interface should allow users to clearly view and understand key details about their deposited code, such as status, ownership, and critical updates, without unnecessary complexity. By presenting information in a clean, structured format with intuitive visual cues, users can quickly access and trust the data they need.

Clear Information Access

The interface should allow users to clearly view and understand key details about their deposited code, such as status, ownership, and critical updates, without unnecessary complexity. By presenting information in a clean, structured format with intuitive visual cues, users can quickly access and trust the data they need.

Clear Information Access

The interface should allow users to clearly view and understand key details about their deposited code, such as status, ownership, and critical updates, without unnecessary complexity. By presenting information in a clean, structured format with intuitive visual cues, users can quickly access and trust the data they need.

Streamlined Task Flow

Streamlining the process for depositing or managing code ensures users can complete actions with minimal effort. Intuitive pathways, contextual prompts, and progressive disclosure should reduce confusion, enabling users to focus on their priorities rather than struggling with navigation or unclear steps.

Streamlined Task Flow

Streamlining the process for depositing or managing code ensures users can complete actions with minimal effort. Intuitive pathways, contextual prompts, and progressive disclosure should reduce confusion, enabling users to focus on their priorities rather than struggling with navigation or unclear steps.

Streamlined Task Flow

Streamlining the process for depositing or managing code ensures users can complete actions with minimal effort. Intuitive pathways, contextual prompts, and progressive disclosure should reduce confusion, enabling users to focus on their priorities rather than struggling with navigation or unclear steps.

Error-Free Processes

Providing users with robust error detection and clear feedback at each stage ensures confidence in their actions. Confirmation screens, validation checks, and helpful tips reduce the risk of mistakes while empowering users to correct any errors promptly, improving overall satisfaction and reliability.

Error-Free Processes

Providing users with robust error detection and clear feedback at each stage ensures confidence in their actions. Confirmation screens, validation checks, and helpful tips reduce the risk of mistakes while empowering users to correct any errors promptly, improving overall satisfaction and reliability.

Error-Free Processes

Providing users with robust error detection and clear feedback at each stage ensures confidence in their actions. Confirmation screens, validation checks, and helpful tips reduce the risk of mistakes while empowering users to correct any errors promptly, improving overall satisfaction and reliability.

Task Map

Task Map 1: Uploading Code to an Escrow Service

Ensuring code is uploaded securely with required details, while maintaining compliance of escrow signed agreements.

Ensuring code is uploaded securely with required details, while maintaining compliance of escrow signed agreements.

Ensuring code is uploaded securely with required details, while maintaining compliance of escrow signed agreements.

Task Map 2: Retrieving Code from the Escrow System

Correctly access and download existing deposited code with accurate permissions and file integrity.

Correctly access and download existing deposited code with accurate permissions and file integrity.

Correctly access and download existing deposited code with accurate permissions and file integrity.

Client Feedback Insights

23 Clients Testing Participation
86% Satisfaction Rate
50+ actionable suggestions received

During the design iteration process, client feedback provided valuable insights that helped refine and improve the redesign direction. Below is few commonly repeated feedback that was received.

Problem: Users Can’t Locate the ‘Deposit Now’ Button
Problem: Users Can’t Locate the ‘Deposit Now’ Button

  • Finding

    Vendors struggle due to button placement on the far right.

  • Metric

    Increase in vendor complaints & support tickets.

  • Solution

    Move button to the left for consistency with other actions.

Finding

Vendors struggle due to button placement on the far right.

Metric

Increase in vendor complaints & support tickets.

Solution

Move button to the left for consistency with other actions.

  • Finding

    Vendors struggle due to button placement on the far right.

  • Metric

    Increase in vendor complaints & support tickets.

  • Solution

    Move button to the left for consistency with other actions.

Problem: Reports Are Hard to Find
Problem: Reports Are Hard to Find

  • Finding

    Users need to read a long document to figure out report access.

  • Metric

    Time taken to locate reports & number of support tickets.

  • Solution

    Add a clear ‘Reports’ button in the main menu.

Finding

Users need to read a long document to figure out report access.

Metric

Time taken to locate reports & number of support tickets.

Solution

Add a clear ‘Reports’ button in the main menu.

  • Finding

    Users need to read a long document to figure out report access.

  • Metric

    Time taken to locate reports & number of support tickets.

  • Solution

    Add a clear ‘Reports’ button in the main menu.

Problem: Contact Details Are Not Saving
Problem: Contact Details Are Not Saving

  • Finding

    Users try to update details but changes don’t persist.

  • Metric

    32% of failed attempts.

  • Solution

    Either allow saving or disable fields with an explanation.

Finding

Users try to update details but changes don’t persist.

Metric

32% of failed attempts.

Solution

Either allow saving or disable fields with an explanation.

  • Finding

    Users try to update details but changes don’t persist.

  • Metric

    32% of failed attempts.

  • Solution

    Either allow saving or disable fields with an explanation.

Current New Design

A full high-fidelity prototype of View cannot be displayed publicly in its entirety. However, selected elements that are publicly available are showcased here.

Login Page

Web Portal

Users can access the Escode View portal by logging into their existing account or creating a new one through the registration process.

Account Registration

Web Portal

New users are required to provide their details, including their name, contact information, and agreement specifics.

Components Marketing Compilation

Marketing Compilation

This is a compilation of various components from the portal’s current design, assembled by the marketing team for promotional purposes. Providing a preview of the design of Escode View.

Terms & Conditions

Web Portal

Public legal documentation, detailing the legal framework in which NCC Group and Escode View operates.

NCC Group Design System

NCC Group Design System

I lead the revitalisation of the NCC Group design system, hugely expanding the component library and reviewing each component. I also introduced and oversee documentation to ensure designers, developers, and stakeholders understand best practices and proper use.

The design system is the result of a collaborative effort involving 10 different people contributing at various times,
developed over six years across multiple stages.

Due to confidentiality, please get in touch for details on the project — I'd love to share more with you directly.

Contact

Contact

Contact

Product Website

The product website, featured in the linked video, was developed by the marketing team to showcase its capabilities and appeal.

https://www.escode.com/view/

The product website, featured in the linked video, was developed by the marketing team to showcase its capabilities and appeal.

https://www.escode.com/view/

The product website, featured in the linked video, was developed by the marketing team to showcase its capabilities and appeal.

https://www.escode.com/view/

Project Thoughts

This project has been a rewarding experience, introducing me to a domain I had little prior knowledge of. It broadened my understanding of the development cycle and the scalability required for a product with an extensive existing client base, including large corporations.

This project has been a rewarding experience, introducing me to a domain I had little prior knowledge of. It broadened my understanding of the development cycle and the scalability required for a product with an extensive existing client base, including large corporations.

This project has been a rewarding experience, introducing me to a domain I had little prior knowledge of. It broadened my understanding of the development cycle and the scalability required for a product with an extensive existing client base, including large corporations.

Working within a strict regulatory framework provided new challenges, shaping my problem-solving approach. The project also honed my skills in building a platform from scratch while contributing to a design system supporting diverse products across the organisation.

Working within a strict regulatory framework provided new challenges, shaping my problem-solving approach. The project also honed my skills in building a platform from scratch while contributing to a design system supporting diverse products across the organisation.

Working within a strict regulatory framework provided new challenges, shaping my problem-solving approach. The project also honed my skills in building a platform from scratch while contributing to a design system supporting diverse products across the organisation.

Next

Laptop displaying website on wooden table
Sony Headphones Connect
Laptop displaying website on wooden table
Sony Headphones Connect
Laptop displaying website on wooden table
Sony Headphones Connect