Project Overview
I was assigned with redesigning Competenz E Services portal. The E Services portal provided a way for account managers, assessors, employees and companies to easily access learner, assessor and unit standard information aswell as prioritise their search and organise their data. I was responsible for design and UX/UI from start to finish. Below is the strategy and development I went through for the project.
Know your users
Here I am (blue shirt) explaining the importance of stake holder interviews.
The project began with stakeholder interviews, I spoke with the key people needed to fully understand the product. This also gave me an insight to the users of the current tool and some information on the primary use cases. it was important I also understood the Competenz Brand values, businees needs and user needs.
Existing Product
I had the team walk me through the exisitng E Services portal. Highlighting the strengths and weaknesses. This identified why it needed a redesign and what was currently not working.
Task Analysis
Now I had a good understanding of who my users were, I went through some simple task analysis with the main user groups. Here you can see an example.
Red Routes
From the task analysis I could then define my red routes. Red routes are the most important user tasks. I used a sheet to break down my users actions even more so.
Work sheet courtesy of David Travis.
User Journey
The user journey technique was used to see what screens a user goes through to reach their desired outcome. It helps define what can be automated and gives a great overview of how easy or difficult something is.
Wireframes
I used Balsamiq Mock Ups to create fast templates of how the new E Services may work. This allowed me to get something infront of test users before any programming is needed. It also allowed me the flexabillity to test the user flow and check it all made sense.
Technical Overview
Now I had to work through the technical opportunites and restrictions. Our users were a mixture of people in the field and at their offices etc. So we needed to make sure the E Services portal could work across multiple devices. This ment making a custom version for mobile phones that was slightly more streamlined. We made the portal design responsive and able to work on computers, tablets and phones.
Rapid Prototyping
Once the screens were ready I used Invison to mock up working prototypes in the mobile and computer views. Invision is a great tool for collaboration between users/testers, myself and developers as you can comment and leave notes on any part of the working prototype aswell as do live screen shares.
Comment view on prototype from Invision.
Mobile prototype screen from Invision app.
Build & Iterations
Once the protoype is confirmed, then development begins. I worked closely with the dev team using an agile design process until all bugs were fixed.
