Refining the UX of an Expression
Builder Widget
Client
A telecommunication company who specialise in mobile data monetisation
Time and Place
Two week rapid project, May 2018
Type
Low to high fidelity Wireframing . Interactive Prototyping . Axure . Agile
Brief
Our client developed a widget that allowed their own clients to build specific queries (or expressions). This widget allowed their clients to build queries to target specific types of people for their online marketing based on the user’s mobile data.
We were engaged to revise and enhance the current user experience and interface to make it more engaging and to also simplify the existing complex system without losing any functionality. It was important that their clients were able to build their queries and identify their target market as quickly and efficiently as possible.
Our Approach
With only two weeks to solve the brief, we adopted an Agile approach which involved designing, presenting to the client for feedback, iterating the designs, and then repeating the process until we had achieved the brief. To help their development team the final deliverable was an annotated interactive prototype built in Axure.
An interactive prototype also made it easier to test our design. We achieved this by our client providing us with complex expressions to test the design's longevity in different scenarios.
My Role
UX Designer
I was part of the two-man UX Design team who conducted initial subject matter research, to understand the expression widget, created and designed the wireframes as well as presented our work to our client for feedback to enable design iteration.
Discovery Phase
Discovery
Understanding the subject matter
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.
Discovery
Creating Design Principles
Combing the client's requirements and our own knowledge, we created four Design Principles to act as a set of guides for when we were designing our wireframes. As well as a place to go back and check our designs were still meeting the brief.
Efficiency
Construct a correct query as quickly as possible
Simplicity
For the overall look and feel of the design. Keep a complex system as straight forward as possible
Minimal thinking
Reduce Cognitive load and immediately understand what is going on
Error Prevention
Only present options which are relevant. Help the user avoid mistakes
The four design principles
Design Phase
Design
Wireframing
Using the design principles, a collection of low-fidelity wireframes was created. I presented the wireframes backs to our client and iterated the designs based on their feedback. We started with the default states and slowly designed in the complexity.
With one of the principles being Simplicity, we focused on making the interface cleaner and simpler. We did this by changing the query builder from a drag and drop functionality to be more like reading a sentence, using words rather than symbols.
To ensure all edge case scenarios were included, I was responsible for wireframing out all the main expression attributes and their values, as each attribute has a different number of values, sub values and different data field types.
Some low-fidelity sketches presented to the client
Higher fidelity wireframes illustrating how the design changed over the different iterations. Going from a drag and drop approach to using sentences.
Design Evaluation
Testing the design
To test the new design we asked our client to provide what they considered a complex set of criteria, allowing us to apply it to the design with the aim of trying to break it.
After a few iterations we were able to incorporate the criteria successfully and proved the design would deal with all the different scenarios.
The whiteboard we used to solve the complex equations and difficult attributes to test our design
Delivery and Outcome Phase
Outcome
Final Design
Our client received an annotated working and interactive prototype made on Axure. We delivered a simpler and more efficiently designed widget, with features to help prevent user error and also the ability to edit a query.
The final deliverable was a tried and tested widget which withstood complex queries and was intuitive to follow for both the experienced and first-time users.
Screen grabs of the final design, showing the same page but at different stages of the user's journey. The larger visual is a 'completed' page.
Outcome
Challenges and Learnings
The main challenge (and one I enjoyed facing) was getting to grips with an unfamiliar subject matter of databases and query building, as well as understanding how to apply logical operators, attributes, values and segments. I overcame this by researching the subject matter and discussing new information with my colleague. I felt that coming in as a beginner was beneficial as it helped when trying to keep the process simple.
Another challenge I faced was how to display the sheer volume of options available to the user without overwhelming them. There was a large number of attributes and each attribute had values and sub values. We solved this after confirming our hypothesis that the user will know the attribute they are looking for and a predictive search and dropdown list was designed to help them find it.