UX
UI
UI
Delivery Work Bench
38%
less interactions Increasing efficiency and productivity for the user
C-Suite audience
as the primary user of the platform
Documentation hand off
to facilitate the smooth transition of the project
suite
audience
Increasing efficiency and productivity for the user
Branding, Web Design
suite
audience
Increasing efficiency and productivity for the user
Branding, Web Design

Project Overview

Phase 1: Data Driven Reinvention

The preliminary stage of the project focused on transforming various pieces of content, some of which were originally non-digital, such as PowerPoint presentations, while others were developed from scratch. The primary goal was to consolidate all this information into a cohesive micro-site, ensuring a consistent look and feel across all applications. This phase aimed to create a unified digital experience, integrating diverse content into a seamless and visually cohesive platform.

Phase 2: Delivery Workbench

The DDR Delivery Workbench was designed as a comprehensive system to streamline the project creation process for DDR employees, offering a unified platform that brought together resources, methodologies, and strategies into a single, intuitive interface. This workbench integrated key modular tools such as the Business Case Builder, Roadmap Generator, CDE Manager, and Organization Model Builder, enabling users to manage projects more efficiently. The primary goal was to enhance the overall user experience by minimizing manual input and improving workflow efficiency. After the initial development phase, the project was successfully handed off to another design team for ongoing management and enhancement.

  • Team: Project manager (x1), Design lead (x1), UX UI Designer(x3).
  • My role: UX UI Designer.
  • Dates: March 2021 - Jul 2021.

Phase 1: DDR

Content Transition

We translated functionalities that were originally non-digital, such as PowerPoint presentations, along with those developed from scratch, into interactive elements within the platform. This ensured a smooth transition from static to dynamic interfaces. The process began with low-fidelity wireframes, which were gradually refined with real content and iterated into high-fidelity prototypes. This approach was designed to enhance the user experience, making it more engaging and interactive.

Design Kit Creation

Following this, we developed a comprehensive design kit to standardize UI components and ensure consistency across the platform. This design kit served as a foundational resource for all future developments, allowing for scalability and streamlined updates.

Development Team Alignment

We then collaborated closely with the development team to ensure technical feasibility and alignment with design specifications, facilitating the smooth implementation of interactive features. This partnership helped ensure that the designs were translated effectively.

Phase 2: DW

Information architecture

For the second phase of the project, which focused on the Workbeanch, we began by interviewing stakeholders to better understand any missing requirements. This was followed by a preliminary understanding of user personas and the creation of the initial information architecture to provide clarity and gather feedback, ensuring we were heading in the right direction.

Wireflows

Once we consolidated the feedback and completed a few iterations, we developed wire flows to not only illustrate the actions but also how they relate to the primary user flows and tasks. This helped provide a clearer understanding of the user journey and interaction points

Atomic Design Style Guide

At this point, we needed to hand off the project to another team, and one of the client’s instructions was to provide a style guide, as we had been working on other products for them. Given the new objectives for this project, we determined that the best solution was to create an atomic design guide. This approach would offer clarity and flexibility for future platform needs, especially since many elements were not yet fully established. This guide included atoms (colors, typography, icons), molecules (form fields, navigation elements), organisms (headers, sidebars), and templates to maintain visual consistency and support scalable design solutions.

Proposal

This marks the first high-fidelity iteration of the product since the project was transitioned to another team.