Daniel Abbott UX Portfolio
UX Research and UX Design by London based Designer Daniel Abbott.
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.
Using skip logic, the survey was successful in funnelling users through questions to find out the most frequent user journeys they were required to fulfil.
A balance of quantitative data and rich qualitative insights put me in a strong position to begin writing interview scripts to delve deeper into the behaviour of the users.
By installing Hotjar on the client's website, I was able to see that a content audit was required along with a re-evalution of the prominence of key interactions on the screen.
Screen recordings showed that some users were confused abut where the CPD logbook could be found. Responses from surveys and interviews reinforced that logging CPD was one of the top 3 actions that users needed to perform.
I conducted 10 user interviews with users across of 4 key personas.
I wrote scripts based on survey data and concentrated on areas that caused frustration. I also shared ideas for new functionality according to the client's business goals which were well received and appeared to solve additional problems the users faced in their day to day work.
Each audience needed personal content to be surfaced. Students wanted to see exam results. Qualified bankers needed to see CPD logging options. The current homepage provided little interest to any audience.
The existing navigation shown above was in need of an overhaul. Some of the naming of sections was not in tune with what could be found in the sections.
I presented a new sitemap to the client who liked the approach and then through some collaborative tweaks we came 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.
A Resource Library was proposed. A searchable repository with meaningful filters based on a user-centred taxonomy.
View the sitemap here
I conducted usability testing sessions with users who covered the two main scenarios for logged in members.
1. Chartered Banker professionals who log actvity for CPD
2. Students 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
The tests were conducted over video conference with the user taking control of the screen share and their interaction with Invision prototypes recorded. A colleages accompanied me, taking notes while I facilitated the participation.
Users found the surfaced progress information much easier to find than the previous incarnation 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.