Dummy version
project management web app - homepage

Workflow Web App

With this app, UKAEA users/business can create projects boards, todo lists, timeline cards, subtasks - to name a few - and manage their requests for the creative department. Vice versa the backend is fully automated to streamline workflow and reduce mundane admin tasks, so the creative department can focus at the work at hand.

Discover Define Ideate Prototype V alidate Develop

Understanding the problem

During my initial days at the UK Atomic Authority, I observed inefficiencies in addressing stakeholder issues over the phone, often struggling to locate relevant project information.

The underlying issue lay in transitioning from a rigid waterfall methodology to a modern agile workflow that aligns with our project pipeline.

Design Goals

Leveraging the insights gained from interviews with users across the organization, I was tasked with streamlining operational processes, including job operations, by designing simple yet effective platform workflows.

I defined the project goals as follows:

  • Reduce the effort in data collection.
  • Empower clients and managers to communicate through a unified system and reduce emails/phone calls.
  • Keep files organized for quick access
  • Create a throughout team collaborative way to effectively plan and execute upcoming new project requests
  • Promote transparency while maintaining one single source.
  • Automate mundane tasks like creating folders of projects, SharePoint files, sending notification emails, etc.

The solution

Implementing a unified system with role-based views, each tailored to the specific needs and responsibilities of different user groups.

For instance, the stakeholders will have access to relevant project information and progress updates tools, while the print room will have its dedicated dashboard and print request management. This approach extends to various project types, including video production, website development, and 3D design.

The app performed well in the test, as evidenced by Lighthouse, an accessibility measurement tool. Project web app - Lighthouse testing
Fully responsive for every screen
Project Workflow - Login page Project Workflow - My projects requests Project Workflow - All projects Project Workflow - Create a project request Project Workflow - Project page Project Workflow - Todo list card example

Design Process

Research / Interviews

Upon joining the team, I immersed myself in the existing workflow to gain a thorough understanding of the underlying issues.

Subsequently, I embarked on a series of interviews, starting with my department and then expanding to other relevant teams, including communications, marketing, print department and other companies within the facility. Following each interview, I diligently synthesized and documented key findings.

Flow model

Having gathered sufficient data, I developed a comprehensive flow model that illustrated the interactions between various stakeholders and systems involved in the process.

This model effectively identified key merging and breaking points, providing a clear understanding of the overall workflow.

Flow model Project management initial workflow

Personas and user journey

Through interviews with multiple key end-users, I aligned with user needs, defined requirements, and gained insights into their aspirations. This informed the creation of personas, user flows, and IA to identify errors and eliminate pain points.

Project management user journey

Wireframing, from low-fi to high-fi

Utilizing wireframes as a foundation, I prioritized crafting semi high-fidelity prototypes to facilitate early user testing and gather feedback on:

  • Clearly visible elements
  • Sufficient contrast and size
  • A clear hierarchy of importance
  • Key information that is discernable at a glance and more

I adopted an iterative design approach to craft a user-centric product, employing Adobe XD prototypes for each stage of validation. During user interviews, I shared prototype links to gather real-time feedback and refine the design accordingly.

After gathering all the feedback, I incorporated the changes needed.

Component process example Wireframing Design Library new colours and icons Bold Line

A/B testing + User metrics

I was pretty pleased with the design, but I wanted to make sure it was a hit before diving into development. After all, it's way cheaper to test with design than with code.

So, I whipped up an alternative version of the UI and set up a quick A/B test to see which one people liked better.

A/B testing A/B testing A/B testing

Development & MVP

Once the designs were given the green light, I got down to business building a Minimum Viable Product (MVP) using HTML5, CSS3, and JavaScript. This MVP allowed us to test the user experience through various other software e.g Hotjar and identify further painpoints.

Final stage - Usign the power of Automation

Using Microsoft Power Automate

The website was connected with Microsoft office 365. After a client submits a job the data are transferred to a Microsoft Teams channel, which enables the team to collaborate on any new project and work efficiently.

At the same time a folder is created in SharePoint with Job title or CPS Code (Special Id to identify the project).

Concluding to the last step a task is created in Planner with details of the project and notifies the person in charge to assign someone to complete the project.

What was achieved?

  • Improved efficiency
  • Improved data integrity and accuracy
  • Instant communication with stakeholders
  • Modern CMS Web App
  • Automated system in the backend
  • Effective collaboration on projects
mobile login mobile Homepage