 |
ICE Design is an enterprise web-based Integrated Configuration Environment (IDE) built to streamline how cross-functional teams configure, model, and deploy complex business workflows on the ICE Engine platform. Designed for business analysts, system configurators, and engineers, the tool unifies fragmented processes, such as BPMN orchestration, data entity mapping, and specification authoring into a cohesive, user-friendly workspace. By replacing disparate legacy tools with an intuitive drag-and-drop interface, real-time feedback, and standardized UI patterns, ICE Design significantly accelerates configuration turnaround and reduces operational friction. |
|
BACKGROUNDAs the ICE platform scaled, the complexity of configuring workflows, transactions, and business logic began outpacing existing internal tooling. Teams were caught between technical friction and inconsistent interfaces, slowing down project delivery. ICE Design was conceived as a centralized, extensible web IDE to bridge the gap between requirement gathering and system configuration. The goal was to replace disparate legacy touchpoints with an intuitive, drag-and-drop environment featuring real-time validation, standardized design architecture, and integrated documentation. |
||
|
PROBLEM System configuration was bogged down by fragmented legacy interfaces, steep technical barriers, and a lack of visual feedback. Teams spent excessive time translating business specifications into code-heavy configurations across siloed tools, leading to high cognitive overhead, delayed implementations, and frequent production errors. |
SOLUTION ICE Design modernises enterprise configuration by replacing siloed, text-heavy utilities with an intuitive, visual web IDE. Through standardized design patterns, visual workflow builders, and real-time validation, the platform dramatically reduces cognitive load, accelerates delivery timelines, and empowers cross-functional teams to configure complex services without technical friction. |
|
|
PROJECT OVERVIEW MY ROLE: UX Research, UX Design, UI Design
|
||
DISCOVERY |
||
| In the Discovery phase I conducted qualitative interviews, quantitative surveys, and workflow mapping, the discovery phase engaged Business Analysts, Configurators, and System Analysts to uncover systemic friction across legacy tools. By synthesizing user research into detailed personas, empathy maps, and journey storyboards, we aligned cross-functional teams around a shared product vision and defined clear success metrics to guide the visual and architectural redesign. | ||
|
DESK RESEARCH To establish a project baseline, we conducted an in-depth desk review analysing legacy tool architectures (BOMUI, MLCS), technical documentation, and historical defect logs. Benchmarking modern enterprise IDEs and visual BPMN workflow builders enabled us to identify standard mental models, reusable UI patterns, and validation frameworks. |
 |
|
|
PRIMARY RESEARCH To complement individual interviews and uncover shared organizational needs, we facilitated interactive discovery and co-creation workshops bringing together Business Analysts, System Configurators, Product Owners, and Engineering leads. Using collaborative digital whiteboards, we guided participants through interactive exercises, including "How Might We" framing, empathy mapping, and priority matrix sorting to unpack operational pain points and map ideal future-state workflows. |
||
|
INTERVIEWS |
 |
|
|
INTERVIEWEE QUOTES
|
||
| Client / End User: "I just want software that is straightforward to navigate, so I can complete my daily tasks quickly without steep learning curves or unexpected downtime." |
Business Analyst: "Translating complex requirements into clear specifications shouldn't feel unpredictable; unified tools and standardized processes are vital for our team's pace." |
|
KEY TAKEAWAYS
|
||
| PERSONAS Personas played a pivotal role in grounding our design process in real user needs and behavioural context throughout the project. By developing detailed personas based on initial user research and interview data representing core roles such as ICE Tech Configurators, Business Analysts, and End Users, we established clear reference points for daily user workflows, frustration points, and technical environments. These personas served as shared mental models across cross-functional teams, ensuring that feature prioritisation, user story drafting, and interface decisions were consistently evaluated through the lens of user impact rather than subjective assumptions. |
||
 |
 |
|
| EMPATHY MAPS In the ICE IDE project, empathy maps were used to translate qualitative user research into actionable behavioural insights across four target roles: ICE Tech Configurators, Business Analysts, Client System Analysts, and End Users. By categorizing direct quotes, behaviours, thoughts, and emotional responses such as Riley Finn's frustration with changing project scopes or Adio Sántos's struggles with unreliable tools and connectivity. The team mapped out specific pain points and underlying motivations. This structured visualization bridged the gap between raw interview feedback and design requirements, ensuring that the resulting IDE directly addresses user anxieties around workflow interruptions, complex tooling's, and unpredictable development environments. |
||
 |
 |
|
| SYNHESISED RESPONSES To capture user needs and translate them into actionable development tasks, I utilized Confluence Whiteboards as an interactive workspace to brainstorm, map out, and synthesize initial research and user requirements. Once the core themes were established, we collated and structured these findings directly onto a dedicated Confluence page using standard acceptance criteria and user story templates. From this centralized documentation, we seamlessly generated and linked corresponding Jira user stories ensuring complete traceability between early UX discovery, requirement definition, and backlog management. |
||
 |
||
| IDEATION |
||
| Reflecting on the research, we synthesized user pain points across empathy maps and brainstorming workshops to identify key operational bottlenecks, allowing us to prioritize features that directly streamline development workflows. The resulting "How Might We" statements include: How might we...
|
||
| BRAINSTORMING Focusing on the “How Might We” problem statements, I explored potential solutions across unified configuration environments, standardized requirement templates, and streamlined onboarding processes using the 10 Ideas Per Feature approach. This exercise allowed me to brainstorm and map out core ideation directions that could effectively resolve both the operational bottlenecks faced by configurators and the documentation challenges encountered by business analysts. |
||
 |
||
 |
||
| USER STORIES Building user stories allowed me to solidify the users' desired functionalities and articulate the value each feature brings. The process of categorising by priority, using the MoSCoW (Must-have, Should-have, Could-have and Won't-have) method gave me a clear direction on the key features that must be incorporated for both Riley's technical configuration needs and Lorette's business analysis workflow. I constructed the user stories in standard Agile user story format: As a... I want to... So that... As an ICE-Engine System Analyst (Riley Finn), I want to...
As an ICE Tech Business Analyst (Lorette Mulligan), I want to...
|
||
| STORYBOARDS Storyboards were used as a visual storytelling tool to map out real-world scenarios and context for how different personas interact with the ICE IDE platform. By illustrating step-by-step user journeys such as Riley Finn encountering incomplete specifications during project setup or Lorette Mulligan navigating requirement handoffs—we visualized the emotional triggers, operational hurdles, and environmental contexts surrounding each task. This narrative framework helped humanize technical bottlenecks, providing cross-functional teams with a shared understanding of how design improvements directly alleviate daily user frustrations across different roles. |
||
 |
 |
|
| INFORMATION ARCHITECTURE To support the key features identified from the user stories and research findings, I focused on structuring the information architecture to eliminate fragmentation and minimize cognitive load. Creating a clear sitemap allowed me to visualize the core navigation and layout of the ICE IDE platform spanning Environment Setup, Configuration Modules, Requirement Mapping, and Workspace Settings while mapping how both system analysts and business analysts move seamlessly from requirement definition to code deployment without tool switching. |
||
 |
||
| USER FLOWS Based on the structure established in the site map, we mapped out core user flows tailored to address key pain points and maximize operational efficiency. Visualizing how different roles navigate the ICE IDE ensured that pathways were designed to accommodate distinct workflows, from Lorette Mulligan mapping and exporting business requirements to Riley Finn building, testing, and debugging configuration scripts in a unified environment. These optimized routes eliminate unnecessary steps and reduce cognitive friction, allowing users across all technical levels to achieve their goals smoothly. |
||
 |
||
 |
||
| WIREFRAMES The design stage began by transforming initial sketches into mid-fidelity wireframes in Figma. This step helped refine the interface layout and provided a clearer understanding of essential UI elements, including visual hierarchy, component spacing, and the logical placement of key functions across the workspace. My primary focus during wireframing was to keep core UI elements such as navigation panels, action buttons, and configuration fields which is clean, intuitive, and consistent across both the System Analyst and Business Analyst user journeys. |
||
 |
||
DESIGN |
||
| MOOD BOARD The mood board consists of a collage of imagery and a collection of colours that represent the product's personality, which is structured and highly efficient. The UI references inspired me with clean lines, minimalist layouts, and clear typographic hierarchy that keep the workspace organized and focused and essential for a complex technical development and configuration environment. The mood board helped me solidify the nature of the brand and the visual direction of the ICE IDE platform. |
 |
|
| STYLEGUIDE Following the visual direction established in the mood board, I developed a comprehensive UI Style Guide to ensure visual and functional consistency across the entire ICE IDE platform. This living document standardized our core design system which includes typographic hierarchies, primary and secondary colour palettes, interaction states, and reusable UI components like data tables, input fields, and action buttons. By establishing these clear design parameters, I ensured that the complex interfaces used for both technical configurations and business requirement mapping remained clean, scalable, and cohesive, ultimately streamlining the handoff to developers and ensuring a unified experience for all users. |
||
 |
 |
|
 |
 |
|
| PROTOTYPE Using the high-fidelity screens, an interactive prototype was created in Figma to simulate the core functionality of the ICE IDE and test the user flows and intuitive navigation within the new unified workspace. The interactive prototype connects both the Business Analyst and System Analyst journeys, from defining standardised requirements and mapping business rules to building, debugging, and deploying configuration code to ensure that the complex development process is seamless, accessible, and truly frictionless. |
||
| |
Note: This prototype is a Figma file and will open in a Web browser.
|
|
| USABILITY TESTING The prototype was virtually tested through moderated usability testing with five participants, representing both Business Analysts and System Analysts to reveal any usability issues or mismatches of expectations regarding the functionality of the unified workspace using Figma. Test Objectives
|
||
| MAIN IDENTIFIED ISSUES | ||
| Issue One: Who is the users? During requirement gathering and system configuration, Business Analysts often struggled to maintain a clear understanding of the specific end-users they were designing for. Without a dedicated reference point within the workspace, requirements were frequently drafted generically, leading to a disconnect between the technical specifications being handed off and the actual needs, workflows, or pain points of the target audience. |
Solution: Including Persona capturing A new "Personas" feature was integrated directly into the system to give Business Analysts a tangible, structured perspective of their users. By embedding detailed persona profiles, including user goals, frustrations, and daily workflows right alongside the requirement mapping tools, BAs can now continuously reference exactly who they are building for without leaving the platform. This contextual feature ensures that business rules and system configurations remain consistently aligned with authentic user needs, bridging the gap between abstract technical requirements and real-world human application. |
|
 |
 |
|
| Issue Two: Limited document formatting During the documentation phase, Business Analysts and stakeholders struggled with rigid, hard-coded system exports. In the previous process, generating printable business requirements, project scopes, or system specifications required users to manually extract data and reformat it in external tools like Word to meet specific corporate branding and layout standards. This manual compilation was incredibly time-consuming and frequently led to version control errors. |
Solution: Document Customisation A highly customizable report and document formatting system was integrated directly into the workspace. This feature allows users to dynamically compile printable documents in a custom manner using flexible, drag-and-drop templates. By enabling Business Analysts to apply specific corporate identities, adjust layout structures, and bind live system data directly to the document fields, the platform now automatically generates polished, stakeholder-ready PDFs and reports without ever requiring the user to leave the environment or duplicate their work. |
|
 |
 |
|
REFLECTION |
||
| Through this project, I applied the fundamental principles of user-centered design to a highly complex, technical domain. I found immense value in the discovery and research phases and specifically building empathy maps and conducting user interviews which allowed me to truly understand the daily frustrations, cognitive load, and underlying motivations of both Business Analysts and System Analysts as they navigated fragmented workflows. A major takeaway from this journey is that effective design acts as a vital bridge between complex system architecture and human usability. Design is truly meaningful when it serves the users’ actual workflow needs, which can only be achieved by actively listening to them. In this sense, this project reinforced the power of Tesler's Law (the law of conservation of complexity). I learned the importance of making the system absorb the technical heavy lifting such as automated document formatting and integrated persona references, rather than offloading that burden onto the user. By utilising familiar, structured layout patterns, we were able to make the ICE IDE feel as intuitive and streamlined as the modern e-commerce or development tools they already know. Ultimately, designing the ICE IDE was a deeply rewarding challenge. It reinforced my belief that enterprise software can be both highly functional and genuinely user-friendly. I thoroughly enjoyed every step of the process and am incredibly proud of the final outcome and the unified, frictionless experience it now provides. |
||
