My role at Bupa as a Visual UI Designer sees me play a integral part of a project early on in the product cycle, working alongside the project team: UX Architects, Information Architects and Product Owners. This involves translating what the business requires and end users want into high fidelity prototypes for testing and to get a t-shirt sizing estimation of the project before going on to design fully fledged mockups.
In my latest blog post I give you an insight into the different stages of translation process to really understand what is involved and how to go about reaching the designs phase.
Use cases are a list of findings from the business and end-users about their needs and motivations they wish to accomplish. I was brought onto the Bupa ‘Dental Quote and Buy’ project as soon as the project team had gone out into the field and gathered requirements from the business and end-users.
Once I had a thorough understanding of what was required, I managed to gather a set of user personas to really dive deeper into the mindset of the users in order to create a user-centered-design with an emphatic end-result.
The purpose of the Bupa’s ‘Dental Quote and Buy’ form is to allow potential customer to get an instant quote online rather than the current process of having to phone or visit a centre. This would allow for staff members at the centres to devote their attention on other aspects of the day-to-day business.
Once I was briefed in and had an understanding of what was needed, I was able to research competitor’s process flow, focusing on the pros and cons of those with a similar successful e-commerce and similar business model. Moreover, I kept a note of some of the best practices which would be applied to the quote tool:
- Offer support throughout the process i.e.. help icon, web chat, phone number
- Ensure there are no distractions; minimalism design
- Responsive: mobile friendly
- Ensure there are as few steps and requested details as possible
- Allow users to save a quote or email it
- Highlight that details entered are kept secure
- Non-linear navigation for users to jump to any point in the quote process once a section is complete
NOTE: There was insufficient data from analytics tool User Zoom to use, based on other PMI (Personal Medical Insurance) forms live on the site.
Sketching & Wireframing
To design the right solution for the business it meant creating a system where the form process was seamless to generate more revenue. For the end-user it was a case of creating a form that had a great tangible, user experience. I started by sketching my thoughts and ideas gathered from the research onto white paper before wireframing the designs using Axure, taking the mobile first approach. This ensures that the most important elements are considered, stripping out all the unnecessary clutter. Adding clickable hotspots to the static wireframe brought the work to life by highlighting various dynamic interaction. This is not only beneficial for testing purposes, but also helps the development team understand how the form should work as intended.
Early testing meant the online tool remained user-focused while making iterations as part of a lean working approach. The UX research methodology used involved turning the user goals into task case scenarios as part of the usability testing. This is the most effective way of understanding what works and what doesn’t by measuring the how many users complete tasks correctly.
Early testing meant the online tool remained user-focused while making iterations as part of a lean working approach.
Spotlight: Many users stumbled during the first task of the form requiring them to “locate a dental centre close to them” during step one in the first section. The idea behind forcing users to input their postcode before any other details was to enable them to locate a Bupa Dental close to them before continuing with the form, however, this was “confusing” since there wasn’t any supporting content around this. I later went back to the drawing board and moved this into step two, prepopulated based on the user filling out their personal details (including their address) in step one.
Testing internally with staff from Bupa UK and Corporate Centre that matched the user personas, I set three goal tasks for each of the users to achieve while asking them to speak-aloud through their process. Recording their on-screen actions and voice notes using Quicktime on a Mac enabled me revisit the feedback gained and make relevant changes to the prototype in conjunction with heuristic evaluations. Testing was also conducted on mobile.