Digital Products Researched, Designed and Tested by London based UX Designer Daniel Abbott.
Read more about my experience and background
The user reads from left to right. Image first (using the arrows to scroll through views of the product), then copy. The hierarchy of elements enhance digestion of information. During development we introduced thumbnails for alternative views to increase engagement.
Showing an image thumbnail for search results was intended to help the user find what they are looking for but this became confusing when there were multiple views available for the products.
Skip logic in my survey was a successful tool to funnel users through questions relating to multiple user journeys.
A balance of quantitative data and rich qualitative insights put me in a strong position to begin writing interview scripts and delve deeper into the behaviour of the users.
I installedi Hotjar on the client's website, and identified that a content audit and a review of the of the prominence of key interactions on the screen was required.
Screen recordings showed that some users were confused about where the CPD logbook could be found. Responses from surveys and user interviews confirmed that logging CPD was one of the top 3 user journeys.
I conducted 10 user interviews with users across of 4 key personas.
My scripts concentrated on areas that I already knew caused frustration. Where appropriate, I shared ideas for new functionality which were well received and appeared to solve additional problems as well as align with business goals.
Audiences needed personalised content to be surfaced. The current homepage provided little interest to any audience.
The existing navigation was in need of an overhaul. Naming of sections was not in tune with what could be found within them.
I presented a new sitemap to the client who liked the approach andcame up with a solid architecture that was ready to be tested on users. Before taking it out to users, staff from the client's office verified the concept and worked through small amendments. I proposed a searchable repository with meaningful filters based on a user-centred taxonomy.
View the sitemap here
I conducted usability testing for two user journeys
1. I'm a Chartered Banker professional who needs to log actvity for CPD
2. I'm a student studying for a qualification
Three scenarios were tested.
1. Locating an article based on one of the topics in the new taxonomy
2. Logging CPD activity
3. Seeing progress on the current module as part of a qualification
I set up video conferences and users took control of the screen. I recorded their interaction with Invision prototypes. Another designer in the team took notes.
Users found the surfaced progress information much easier to find than the live version of the website.
The black panel proved difficult for a colour blind user and was replaced with a more suitable contrast between font and background in a later iteration.
It was important to remain disciplined and spend time sketching before jumping into any wireframing software. I sketched multiple ideas and then began to verify the sketches by creating paper prototypes that I hostpotted using POP app.
I took to Sketch very quickly having already had years of experience using Adobe Illustrator and Photoshop. It was quick to mock up wireframes, create styles and symbols. I would later introduce the Sketch workflow at the agency that I was working for.
The protoype was a result of all the research, sketching, user journey mapping, content planning and wireframing that had been undertaken so far.
This iteration was tested at The Guardian user testing lab.
The user testing session was tough. The users were confused by the UI. It was much less conventional than I had thought.
Users were taking the onboarding aspect of the app very seriously and I had only mocked this up very quickly. I had to revisit this in much more detail.
The second iteration of the prototype included amendments to features and onboarding following the user testing session. I also began to apply UI design by adding fonts, colour, opacity and images to create a high fidelity prototype.