Audio Software Toolkit Development
Client
Works in the Semi-conductor Industry and supplies integrated circuits (ICs)
Time
9 week agile project, Aug - Nov 2017
Type
Usability Review . Rapid Prototyping . User Flows . Design Sprints . Agile
Brief
We were re-engaged by the client to continue refining and developing the UX of their Certifying Software Toolkit. This toolkit provides another form of Quality Assurance to confirm that their software is performing as expected.
This toolkit had multiple users involved and a quite complex journey. Our task was to extend the existing functionality, map out and design a more user-friendly interface and ultimately deliver a feasible and deployable design.
Our Approach
The project was broken into two main parts, a Discovery phase which included a Usability Review on the existing toolkit and a Design phase.
The design phase included three design sprints allowing us to adopt an agile approach and use rapid prototyping to demonstrate concepts and continuously iterate designs with feedback from the client.
My Role
UX Designer
Working as the sole UX designer I was responsible for conducting the usability review and providing recommendations. As well as designing the user flows and wireframes and presenting the latest designs to the client for feedback.
I worked closely with my Project Manager and Visual designer to ensure all work was delivered on time, especially important as our clients were based in India and the USA.
Discovery Phase
Discovery
Usability Review
To get to grips with the subject matter we deep dived into the terminology, the existing widget’s process and the steps the user would go through to complete their task.
To make the widget as simple as possible we worked to understand the tool in order to identify the limitation and must have features.
A screenshot of the Usability Review. Including the relevant Heuristics, description of the issue, it's priority level and recommendations
Discovery
User Flow
With no pre-existing completed end-to-end user flow of the toolkit, I built up a user flow for the two main users (the developers and testers). I worked closely with our client to ensure all the correct steps, decision points and interactions between the two users were accurate and included. This flow would also help me when I began wireframing.
A zoomed out version of the whole User Flow, showcasing the interactions between the two key users
Design Phase
Design Planning
Prioritisation of Design Sprints
Combining the knowledge from the review, user flow and the Epics and User stories we generated earlier with the client, we prioritised which of the new and existing functionality and usability improvements would be addressed. This provided a clear and agreed direction for the designs sprints and to ensure all objectives were met.
Design
Wireframing
Starting with a whiteboard and moving quickly onto drawing low-fi wireframes, I mapped out the end-to-end journey in multiple screens, focusing in particular on how the screens linked together and how this would affect the functionality and usability.
Myself and Zoe (Visual Designer) white-boarding out some initial ideas
Snapshot of the end-to-end journey I wireframed
Design
Design > Feedback > Iterate
Throughout the design sprints we constantly spoke to and received feedback from the client. This rapid cycle of design, feedback and iteration meant we moved quickly from paper to a digital prototype and successfully achieved our design objectives.
More detailed sketches after receiving feedback from the client
Design
Prototyping
While I was building the interactive toolkit in Axure, simultaneously my colleague, our visual designer was creating the high-fidelity visuals.
Using Zeplin, I was able to merge her visual designs with the UX wireframes resulting in a high-fidelity interactive prototype that the client’s developers could use as a guide when building the toolkit in code.
Delivery and Outcome Phase
Outcome
Final Design
The end result saw the client receive a high-fidelity interactive prototype with an easy to navigate end-to-end journey. With the new functionality incorporated the main users would be able to use the toolkit more seamlessly and efficiently.
The client also now had a toolkit with a user interface that was more consistent and aligned to their visual style and branding.
Two screens taken from different stages of the final prototype, with credit to Zoe Lester for the Visual Design
Outcome
Challenges and Outcomes
The toolkit was quite complex and the wireframing took some time. This was due to the variety of different factors which changed based on what stage the software was at in the process. I overcame this complexity by continuously sketching out ideas, getting feedback and referring to the user stories to keep myself on track.
As a remote client, I never got the chance to meet the client in person, with all meetings done via skype. This meant I was able to develop my own presentation skills as well as how to build a strong relationship with people you never meet or even see.
When remote working wasn't as commonplace as it is today, this was an article I wrote describing how to have a successful working relationship when working with remote clients: