SHOWCASED PROJECT: Online printing for Staples.com
I was in charge of leading a team of 6 UI and UX designs for the biggest project for the company over a 3 year period consisting of multiple designs iterations. The business value for this new staples online printing solution was at $47 million with 900k orders per year and 12k visits per day. Opportunity for growth through traffic and conversion improvement. By redesigning this platform we could supersede an old third-party service saving the business $2 million per year. The goal was to hit 24% conversion witch was hit within a few months of release increasing overall conversion +10%.
SAAS TOOL
B2B Broadband Management Tool
MY ROLE
I served as a key product designer on a project that integrated a new SaaS tool with a legacy system for digital broadband providers.
-
Conducted user research, interviewed users, developed personas and mapped workflows to define use cases.
-
Created wireframes, prototypes, and high-fidelity mockups, and presented design concepts during stakeholder workshops.
-
Collaborated with engineers and project managers, leveraging a shared design system library to ensure consistency in data visualisation and analytics.
HIGH LEVEL TIMELINE
2 years
MAKE OF THE TEAM
2 Product Designers (Me)
5 Frontend Developers
4 Backend Developers
Product Manager
KEY GOAL
Revamp and build a new SaaS platform to help engineers manage their network
OBJECTIVE
The project aimed to redesign and develop a SaaS tool that enhances broadband services by integrating legacy functionality and empowering data-driven decisions, ultimately benefitting millions of subscribers.
-
Enabled advanced data visualisation and analytics to update network nodes, create plan trails, and monitor upstream/downstream usage.
-
Optimise network performance and usability for major clients such as Digicel, Cox, Globe, Claro, and Megacable.
RESEARCH AND DISCOVERY
The research and discovery phase was a critical foundation for this project. To deeply understand the tool's users—primarily engineers—I conducted interviews to gather insights into their workflows, pain points, and goals. These conversations revealed the nuanced challenges they faced when interacting with various software and hardware tools, enabling me to empathize with their needs and perspectives.
Based on these interviews, I developed detailed personas that encapsulated the key characteristics, motivations, and challenges of the user base. These personas served as a reference point throughout the design process, ensuring that every decision aligned with the needs of the engineers using the tool.
Sample Of One Of The Personas I Created
Mapping Multiple User Flows
The project requirements were often quite ambiguous at the outset. To address this, I led design workshops sessions to gather deeper insights and align on design goals. These collaborative sessions initiated meaningful discussions, uncovered critical user needs, and drove clarity around the objectives of the tool. This process fostered alignment among stakeholders and ensured the design direction was both user-focused and feasible.
The next step involved analysing and mapping out the intricate interactions between users and the multiple tools they engaged with. By visualising these flows, I was able to:
-
Identify the different paths users might take.
-
Uncover potential bottlenecks.
-
Highlight opportunities for streamlining processes.
This comprehensive mapping provided a clear, holistic view of the user journey, which informed the design of intuitive and effective solutions for the SaaS tool.
Mind Mapping Complex Data
An Example Of One Of The User Flows
I researched key considerations for designing a data visualisation dashboard, with a focus on several critical areas:
-
Understanding the Audience: Tailoring the dashboard to meet the needs of the network engineers.
-
Ensuring Data Clarity: Presenting data in a way that is immediately understandable.
-
Establishing a Clear Visual Hierarchy: Organising elements to guide the user's attention effectively.
-
Contextual Storytelling: Providing the necessary context to make data insights meaningful.
-
Progressive Disclosure and Drill-Down Capabilities: Allowing users to explore data in depth without being overwhelmed.
-
Performance Focus: Ensuring the dashboard runs efficiently, even with large datasets.
-
Consistency and Branding: Maintaining a uniform design that reinforces brand identity.
This research was pivotal in shaping an intuitive solution that guided the creation of visual insights. The resulting dashboard empowers users to update network nodes, create plan trails, and monitor upstream/downstream usage in real time.
Dashboard Data Vis Analysis
DESIGN PART 1:
ITERATIONS AND USER TESTING
The design process was iterative, evolving from sketches to interactive prototypes and detailed wireframes. Key aspects included:
-
Structured Testing: Conducting sessions with clear objectives and tasks.
-
Alternative Evaluation: Using in-house domain experts and robust analytics when access to real users was limited.
-
Feedback Integration: Analysing insights to continuously refine the user experience.
Sample Page of Usability Report- Calendar widget
Throughout the project, design insights, findings, and iterations were shared with stakeholders to ensure complete alignment. This was achieved by:
-
Hosting regular review meetings to present progress and gather feedback.
-
Maintaining transparent documentation and collaborative sessions that kept everyone involved in the design evolution.
Sample of a usability findings shared with team
DESIGN PART 2:
UI MOCKUPS AND DOCUMENTATION
Design Process & Collaboration
-
Design Iteration: Progressed from initial sketches and flowcharts to interactive prototypes and detailed wireframes, collaborating closely with developers to ensure technical feasibility and design integrity.
-
Data Visualisation Selection: Chose formats based on data types and user requirements, utilising:
-
Bar Charts: For node comparisons,
-
Flow Charts: For process mapping of MAC domains,
-
Pie Charts: For displaying proportional data of upstream and downstream usage, and
-
Stacked Area Charts: For illustrating trends over time, specifically for internet usage data.
-
User Testing & Validation
-
Testing Sessions: Organised structured sessions with clear objectives and tasks, engaging both end users and in-house domain experts when direct access was limited.
-
Feedback Analysis: Analysed user feedback to drive navigation improvements and enhance overall efficiency.
Technical Implementation
-
Developer Collaboration: Worked with dev team to implement visualisations using libraries such as D3.js for custom interactive charts, Highcharts for responsive dashboards, and Tableau for complex data exploration.
-
Technical-Design Balance: Managed technical constraints alongside design goals to uphold core user experience principles.
Accessibility Considerations
-
Retrospective View: Accessibility wasn't initially prioritised in this 2014 project—a time when a11y standards were less established in the industry. However I successfully advocated for tab navigation improvements after user testing revealed efficiency issues.
-
Reactive Changes: After discovering colourblind users struggled with the interface, I implemented alternative visual indicators and improved colour contrast where possible within project constraints.
-
Future Improvements: If I could revisit this project, I would ensure comprehensive a11y compliance with proper focus states, keyboard navigation, semantic HTML, text alternatives, and ARIA labels for dynamic content.
UI Mockups of some of the Data Visualisations screens
RESULTS
The result of this project was a digital transformation that revolutionised broadband service delivery through data visualisation and an intuitive platform design.
Key Results:
-
Advanced Tool Deployment: Created a sophisticated tool serving over 200 telecommunications providers, including Digicel, Globe, Claro, and Megacable.
-
Improved Retention: Increased the client retention rate by 4% over a two-year average—from 80% to 84%—which equated to retaining 200 clients and 6 million subscribers.
-
Actionable Insights: Transformed complex network data into actionable insights, significantly enhancing operational intelligence.
-
Workflow Simplification: Streamlined intricate B2B workflows, thereby improving connectivity for millions of subscribers.
By meticulously redesigning this complex SaaS platform, we successfully integrated legacy functionality with innovative digital capabilities, dramatically improving service delivery across multiple telecommunications markets.