Introduction
Overview
The Template Builder allows our customers to build and create emails, pop ups or notifications by either using the visual template builder tool, which is using a plugin called Unlayer or they have the option to switch to code, to create their template using code.
The problem
Part of the application is using a plugin, so our developers do not have complete control over how it works and are restricted by its capabilities. Our goal was to find out how our customers use the template builder and also how easy or difficult they find it to use. We wanted to discover what problems or difficulties they might have or come across while using it.
My task was to find out where the user might have some frustrations using the template builder, and find some solutions to where we can optimise the plugin or if there is anything else we can do to help solve the issues the user might be having.
My Role
To Lead my manager and COO through the UX Process of a user test, affinity diagram and a customer journey map.
Timeline
1 Week To complete the process of the user test, affinity diagram and customer journey map.
Skills
Empathise - Usability Test , User Interview
Define - Discover pain points, Affinity Diagram, Customer Journey Map
Design - Design the solutions to the problems
Tools
Google Hangouts
FigJam
Figma
Research
Usability Interview and test
I wrote a script to loosely follow and guide us through questions we can ask during the user testing phase. As this was the first time doing anything like this there were a few stakeholders in the call, so we were unable to conduct a full user test as it should normally be conducted. However, the script served as good reference to follow so we could stay on track. It also served as a way to show the stakeholders how important it is to do these user tests and how valuable the feedback is.
Working with my manager, we carried out an interview to understand and learn more about the context of how the customer uses the template builder, and where they gather the information they need to enter into the template. We also asked about the context of what devise they use. Following on from that we asked the user to build an email template as they normally would, while talking us through their thought process, so we were able to watch and understand how they work, if there was anything they found frustrating or confusing and if there was anywhere they seemed to get stuck or found difficult.
This process was very enlightening for us as we were able to understand more in depth of how they use the tool, and where they gather the information that they need to build a template. It was also incredibly insightful watching the user build a template as we were able to see where they got stuck, and where they would click off the page to gather some information they needed. As the user has done this so often, they don’t seem to realise that this might be something they find annoying or difficult as they are so used to doing it.
Analysis
Affinity Diagram
Once we had completed the user test it was time to gather the information we had found. As we are working from home we needed to do this virtually. FigJam allows for collaborative working, and provides coloured postit notes for individuals use (also much more environmentally friendly). At this stage I lead my manager and one of the stake holders through the process of writing all our notes individually on postit notes, then together grouping all the notes in to logical groups and giving them headings. At this point the stakeholder involved really enjoyed the process as was keen to do it on a more regular basis.
From our findings we were able to gather them into groups, which made it easier to break down the areas we needed to look at to improve the product.
Customer Journey Map
From the notes and groupings we created in the affinity diagram, I was then able to organise the findings into a customer journey map, so we were clearly able to see exactly where any problems lay and visually see where we might need to think about possible solutions. Some of the problems were already in the process of being resolved which I was clearly able to note down. I also used this to note down any instant ideas or actions that could be taken to improve the problems. I was then able to share this document with my manager to discuss our solutions.
Design Solutions
Full Screen Mode
Solution: I have designed a full screen mode which means the navigation bar and the menu at the top would be hidden and so the user is able to see a full screen of the template builder, and see much more clearly where everything is, this should reduce the need for scrolling as much. (The grey area is where the Unlayer plugin is for the template builder).
Problem: The user was using a very small screen, so along with that and the space taken up by the navigation bar on the left and the menu at the top, it made it very difficult for the user to actually see the whole template builder on the screen at once, we observed the user scrolling around a lot when they were trying to find something.
Reusable Blocks
Solution: We have made it possible to duplicate templates, this would help the user as they would be able to duplicate a previous template and amend anything they needed to, while also keeping, for example the header and footer that was previously made and stays the same in each template. Secondly, another way to solving this problem, we found that within Unlayer the developers could enable the user to save a certain amount of blocks they had created, which would then always be available in the template builder itself, so the user will have quick and easy access to regularly used (and already designed) blocks.
Problem: The user would need to go back and forth between a a document on their computer, and the template builder to be able to copy and paste in the hex code of the brand colours they needed for the header of the email they were creating. This showed two problems, one was that the user couldn’t save colours they used regularly, and two that they had to recreate the header that is the same for every email.
Conclusion
Overall this was a very successful task for two reasons, firstly in understanding how the user interacts and uses the template builder, finding where they either found problems or struggled to use it. As it was built using a plug in, we had to find solutions that were possible within the capabilities of the plugin itself. Secondly, we found the task was successful in helping the stake holders understand the importance of the UX process, and how it can help find any problems the user is having that we would not have found by just asking them a direct question. Although this task was not how a future usability test would be carried out, with the inclusion of the stakeholders often asking leading questions, or just giving the answer. It was a very successful introductory task to show the stakeholders how UX can be beneficial for both the user and the business.