Case Study: Management Tool
 
- Online Tool design for desktop, tablet and mobile - UX + IxD - 2014 -
Vistex, London
OVERVIEW 
The company was developing equivalents of their SAP solutions in online browser-based products, starting with their Performance Incentive Management tool. 
 
CHALLENGES 
The existing SAP solution UI is a direct translation of how the system works. Whilst grasping the abstract SAP concepts and gathering requirements based on the existing product and our frequent exchange with the Product Owner, our approach was to talk to Users and design a completely new interface tailored to the User needs and daily tasks, flexible and adaptive to their various profiles. 
This was also the first project where we adopted a Lean approach with quick prototyping and User testing at an early stage of the process. 
 

MY ROLE 
I had a prominent role. Working closely with Project Lead UX Architect Mick Worthy and Product Owner Cara DeGraff, my role was to generate interface ideas and produce content for all major deliverables; while Mick was structuring the project plan and framework, conducting User tests and establishing basis for development framework. 
 
1. Discovery: understanding the context 
 
We started the project with a deep introduction to the existing software and the industrial context in the form of 2-hours conference call every other day with the Product Owner and expert based in the US. 
The training included the presentation of typical business use cases and demo in depth of the existing SAP software and how it currently works. 
 
We took notes, then used sketches, mindmaps and concept maps to build an understanding of the existing system. 
Besides we carried out web research and created a glossary and shared knowledge database: 
> What is an incentive program, how does it work? 
Using sketches and mind maps to understand existing product and typical use cases
2. Research & Definition: identifying the Users
 
> Who are the users? What do they need to do, what are typical use cases? 
Besides, we researched the web and interviewed our colleagues in Sales to gather stories, portrait the archetype Users, identify behaviours and start defining typical use cases.
3. Design Principles, Plan of action and guidelines
 
In the meantime, The project lead prepared the Project plan and conducted an Heuristic Evaluation of the existing software resulting in a set of recommendations and Design guidelines.
4. Research & Definition: Understanding the Users
 
> What does the User need/want to achieve? What goes in her mind? 
Based on our research and the Personas we defined, the Project lead and I brainstormed and collectively came up with a list of User goals and tasks. We used techniques of card sorting and collaborative sessions to rank the tasks, and then elaborate a task model for each User goal.
Such exercise revealed how a same (system) ‘user type’ could use the App to do totally different things and with different mindset: e.g. One, more competitive, wants to see precisely what is her distance to target, whereas Another, motivated by his job, simply wants to track sales he has made.
5. Sketching Interactions
 
I then created short User stories that would become a shared base for designing. Based on selected critical User stories, task models and personas, I then proceeded to sketch and mature the User Journey flows, taking note of any pain point or constraint to account in the interface design.
User Stories and flows
I then explored interface interactions, laying down first initial concepts and use quick drawing to generate ideas. The thinking took into account the content and features requirements and the different platforms we were designing for: mobile and desktop/tablets. 
Quick sketching: generating ideas
6. Information Architecture 
 
With these first sketches, I went ahead with sorting the areas and pages to define how they relate. The top-level navigation is task-based. 
The challenge was to define a navigation that could cater for both an individual employee as well as a manager. 
Areas, features and page sorting
7. Wireframing: from low-fidelity to prototype 
 
I then created the wireframes to define where all the elements of the interface stood together; then amending and refining them as we iterate with Project Lead and Product Owner feedback. We designed a mobile interface alongside the tablet version. 
The wireframes in Axure will be the base for the prototype Mick was preparing in parallel to test with target users. 
Interaction Design: wireframes and wireflows
Interaction Design: higher fidelity mock-ups and prototype (Axure)
8. User Testing
 
The company’s annual trade show was the perfect opportunity for us to gather a panel of test users amongst their clients. 
The User Test had both a quantitative and a qualitative objective: receiving feedback on the interface usability and meeting ‘real’ incentive planners and learn more about their duties and daily work lives.
Beforehand, we prepared collectively a set of tasks to accomplish with the prototype in a think-aloud protocol and a series of questions for the participants to describe more generally their job, work environment, tasks but also their feelings and (dis)likings. The Project Lead defined the protocol and conducted the interviews.
 
It was also our first User Test experience it was important for us to demonstrate its value in the process; we prepared a method to analyse the result, based on existing Lean UX techniques.
This User test was effective and allowed us on one hand to complete and refine our Proto personas and understand better some typical and more complexe use cases; and on the other hand assess our first designs and generate a large list of actionable recommendations on the interface and interaction mechanisms.
9. Rationalising the interface and development start
 
Having prioritized the next steps, I then updated and refined design accordingly. 
The Project Lead established a Design Framework together with the developers with the aim to build standardized templated screens and dynamic sections for the interface to be flexible, configurable and automatically adaptable across mobile to web screens.
Based on this and my knowledge & experience in authoring Design Pattern Library for other products of the company, the next round of designs included identifying the page templates, interface components, interaction patterns and their various responsive versions.
Identifying UI components and building the Design System and Pattern Library
OUTCOME
 
This project is significant for me as it was the only project I have been part of where we applied Lean UX methods from start and were able to conduct User Research interviews and User testing. 
It really demonstrated the value of involving the User in the Design process. Relying on User test results as judge of the Designs allowed us to save time in decision making, as we often found ourselves debating devotedly and endlessly about small design solution.
Back to Top