END TO END WORKFLOW

Enterprise resource planning and scheduling system which allows any organisation to track and monitor its resources.

To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of my client.

My Involvement:

  • User research and interviews
  • Competitive Analysis
  • Identify your target market.
  • Persona Creation based on real users
  • Defining the product’s purpose
  • Establishing design direction.
  • Information Architecture techniques
  • User Flows
  • lo-fi to hi-fi wireframe development
  • Prototypes development – paper to hi-fidelity
  • Testing with users
  • Iteration and Pivots

Tools:

  • Adobe Photoshop
  • Adobe Illustrator
  • Sketch
  • Card Sorting Tools online
  • inVision
  • UXPin

BACKGROUND

Stakeholder needs

Briteplan is an enterprise SaaS cloud application. The system originated from a need for the founder of First Technology to track and manage their own in-house and contract resources on different projects, teams and locations.

The idea started when the founder of the company was spending most his time being bogged down with reviewing timesheets when his team of developers rapidly grew from 15 t0 115. The initial idea was a simple timesheet application. He quickly realised that in order to fill out timesheets he needed to have active projects. The idea of a a full scale enterprise resource and project planner was born.

Once the potential of selling the system as a service as the client decided to develop the system further and offer it as a subscription based service. After fist releasing to a hand picked few already existing clients and we as a team custom developed the application for each client the company decided to sell the service to anybody.

The company wished to showcase it’s talent and ability to develop custom made SaaS applications and this opportunity fit with that vision.

The client decided to launch this application as a responsive web based platform and create mobile application versions at further stages.

Personas

User Needs

After the initial competitive analysis a focus group of project managers, accountants, team leaders and resource companies were invited to share their views on the ideal software which could save time and serve their potential needs. Three following target groups were identified as potential user personas.

Approach

Technology

The technology used on this large scalable project are established and emerging. I had to familiarise myself with the possibilities these technologies had to offer as well as keeping the user in mind.

Technologies used by Developing Team.

  • Custom Developed CRM framework
  • Angular JS
  • HTML 5 CSS 3
  • C#
  • Web API

Discussions with programmers and Project Managers assisted my understanding of the basics of the technologies and what they had in mind when using it. I found that collaboration with technical departments and a clear channel of communication, although in this case I was one of the team working remotely, to be one of the building blocks of the success of the project.

CHALLENGES FACED

Once the basic product was built with content tables displaying data the challenge was to interview clients in order to establish which data they required and how the data should be displayed once the application retrieved it from the database.

Some clients needed detailed data breakdowns regarding costs, expenses, timesheets for instance whilst other clients needed a more basic layout and information as they were not too concerned with breakdowns. This is where the work really started as literally hundreds of different screens had to be built and customised to ensure user expectations were me.

Another challenge the team had to overcome was the fact that a number of the members were working from remote locations. I was fortunate in the fact that I have had the opportunity to work with some of the team previously. The challenge of everybody being on the same page was the most important to address.

The Solutions

After a near exhaustive combination of data displays were first prototyped and tested with users and itterated several times they were handed over to the development teams working for respective clients.

These screens were finally all collected and added to the SaaS product where new users could then choose how their data were being handled and displayed through them responding to certain questions during the registration process.

Communication to the success of the project was key as an Agile methodology was used. The project was managed using Agile as the application is cloud based where development, testing, improvements and deployment could be done in quick cycles. This not only allowed for the project to be completed in a shorter time period but also cut out the need for time consuming meetings and piles of documentation being sent back and forth waiting for approval. Decisions were made rapidly to keep the process on track.

Short meetings were held with the use of Skype and Team Viewer and all files were shared on the cloud.

 

PUTTING IT TOGETHER

Quick sketches helped to get a sense of the layout for the application. These were done with clients during interviews and also during low fedility testing sessions.

These sketches were then mocked up in Sketch App and rough prototypes were created to assist the developers in building the framework for the application.

Onboarding Registration Process mobile first Approach

Breaking down the registration process screens in digestible chunks using onboarding techniques. This onboaring technique would be carried through to the first time opening of the dashboard page where a short tour of the product is offered through visual prompts.

Below are the first draft freehand sketches and Sketch App prototype screens.

    SIGNUP SCREENS ITERATIONS

    Desktop Registration Screens – Hi-Res

    INTUITIVE GRID BASED DASHBOARd

    TESTING, DEPLOYMENT, LAUNCH, MAINTENANCE & Mobile
    • The testing of the application followed by utilising the client’s team especially key employees who played key roles in conveying their requirements to me as well as professional unit testers.
    • UI design completed by the client’s in-house designers using Style Guide prepared by outside graphic design agency.
    • The final product was released and launched in early to mid 2015.
    • Improvements, upgrades and maintenance are ongoing with no impact on the client side because of cloud technology.
    • Mobile applications for IOS, Android and Windows Mobile are in development based on responsive version of web application we developed.
    TAKE AWAYS
    • Learn from users by interviewing them and by observing them. After building more than 200 screens for different requirements for different clients I have more empathy for users and their needs as I saw first hand how business requirements differ from organisation to organisation.
    • A data driven site has the potential to throw some challenging layout problems a UX Designer and Developers’ way. Communication and Collaboration is key to be successful especially when a project grows rapidly and unexpectedly.
    • Stay Humble. There is a lot to learn from the process and people involved in the process 

    Thank You for taking the time to view this case study

    Please feel free to contact me to discuss my work, skills or if you would like to discuss potential employment.

    The End

    Lets work together

    12 + 1 =