Gareth Morgan case study - Professional diploma in UX design
Home

Papa Pixel Training
Case Study

From brief, research and prototype iterations, through to final wireframes.

Papa Pixel Training

This project saw me designing a website for a start-up software training company requiring a minimal user journey.

The case study concentrates on creating a global navigation for the site, a global landing page to be used across all software manufacturers, and a global course page to be used across all software types. The user journey from the homepage to the booking page must also be as intuitive and fast as possible. Because this start-up company had a limited budget, building the site in a CMS wasn't financially viable. The way around this was for me to create the master pages and get a developer to help with the trickier parts, such as Javascript functions, to make the best possible use of the budget allocated to me.

I had six subjects conducting the usability test of competitor websites. Through a combination of watching their usability tests (observational research), creating an online affinity diagram (because of Covid) and following the rest of the UX cycle, I was able to design a fast and practical journey.

As long as I got the 'master' product and landing pages right, I could then copy these pages and directories, rename them accordingly and add supplied content. I also had SEO considerations in this project. After speaking with a digital marketing agency, and conducting SEO research on the competitor sites myself (site structure, content architecture, keywords, organic Google rankings), I decided on building a landing page before the actual specific course pages that will have a positive impact on rankings:

www.papapixel.co.uk/adobe-classroom-courses/photoshop
/

This made the user journey longer but was imperative for good SEO of the whole site. As an example, a Beginners Photoshop classroom course URL would look as so:

www.papapixel.co.uk/adobe-classroom-courses/photoshop/beginners-photoshop-course.php

The website's plan of action was to have a clear booking call to action near the introductory copy as some users would book having just read that part. But for the more discerning user, they could scroll down the page, and using progressive disclosure methods, read a more detailed description of the course presented in accordian dropdowns. This accordian was immediately followed by a video highlighting what a user could physically do with the software, and each video would be unique to each software package. After this part would be a general overview of the course and another booking call to action. In my research, I noticed that none of the other training centres used images or videos that demonstrated what you could achieve with knowledge of the software. We decided to make the whole site rich in graphics and video, but these were built in such a way to allow lazy loading so as not to slow down page load times.

  • Create an online booking experience that is simple, fast and intuitive.
  • Website must be rich with images and video without reducing load times.
  • Follow the whole UX cycle and document everything - (this UX design was conducted during Covid, so some improvisation had to occur.)
  • Create a working prototype and final wireframes.
Certificate for Professional Diploma in UX Design

Methodology

This website already had some basic pages, but they had a dropdown navigation that was already causing user confusion internally. I decided to scrap this and start from scratch and adhere to the whole UX cycle.

  • STEP 01 - Conduct competitive benchmarking and usability testing to find patterns and pain points. Because of Covid restrictions, I was unable to sit with the subjects during these tests, but I could record one session and still make UX decisions based upon their collective feedback.
  • STEP 02 - Because an affinity diagram wasn't possible during the lockdown restrictions, I needed to find a digital alternative. I chose Trello for this, as I was already using it, and it would be perfect for sharing with the subjects so that they could organise things into what they perceived as logical groups.
  • STEP 03 - Having created the affinity diagram, I had started structuring the qualitative data and producing a customer empathy map. Creating this map allowed me to measure the subjects goals, behaviours, contexts and pain points, and the data was now in a structured quantitative format.
  • STEP 04 - From the research above, I then moved onto producing a flow diagram.
  • STEP 05 - Benchmarking the old and new designs.
  • STEP 06 - After examining my research so far, I then started building a low fidelity prototype in Adobe Xd. Once completed, I then conducted some final usability testing.
  • STEP 07 - Once I was happy with the prototype, I then created detailed wireframes for developer handoff.

Step 01 - Homepage creation
View the video (9m 48s)

Because I was working to a minimal budget on this build, I decided the best way to go would be via a template and adding changes to that (via a developer.) This video gives an overview of the decision process involved in creating the final iteration of the homepage.

Logos of Aer Lingus, Ryan Air and Fly UX.

Step 02 - Global page iterations
View the video (5m 56s)

The first thing tasked to me was creating the homepage from the purchased template. The company initially had two domains, papapixeltraining.co.uk and papapixelonline.uk. The idea was that people booking classroom courses would use the papapixeltraining site, and ones booking online courses the papapixelonline one.

I changed this assumption immediately for SEO purposes and also because they were doubling their site maintenance work doing it this way. We then agreed to use the papapixeltraining domain, and the users could choose if they wanted to study in a classroom or online during the booking process.

Once we had established the above, I then set out creating the homepage. I used a mixture of design best practice, pastoral scenes and credit card logos on the booking page to build trust.

The biggest challenge I faced was surfacing the course types. Initially, we placed all of the courses into a dropdown menu. When a user selected a course type, the available ones would display accordingly using some Javascript. But it becomes apparent that this would be catastrophic for good SEO, so I had to find a workaround for this. In the end, I decided on having a landing page that most users wouldn’t surface, and when a particular software was chosen, it would then open a new page displaying the available courses.

The users would view the available software through a global navigation that displayed the course types on each page. This worked brilliantly in the user testing, and all of the subjects were able to navigate from the homepage to the final course booking page in approximately 20 seconds.

Old navigation part 01
Old navigation part 02
New navigation part 01
New navigation part 02
Adobe Photoshop landing page
Adobe Photoshop landing page



Step 03 - Usability testing/competitive benchmarking
View the video (13.2mb)

For these usability tests, I chose five competitor websites, six test subjects and set the subjects the same task. They all had to find a Beginner's Photoshop course on the sites and go through the booking process until they arrived at the actual booking page. Again, because of Covid, I was only able to record one of the sessions. I gave them all a test script and asked them to time themselves on each website, and made sure I pointed out I wasn't testing them. I was testing the logical structure and flow of the website.

When they had finished their tests, I asked them to make notes on the Trello board I had set up, and from there, I was able to group the common pain points. The five websites were acuitytraining.co.uk, docklandsmedia.com, mediatraining.ltd.uk, sohoeditors.com and xchangetraining.co.uk.

The PDF below shows all of the competitor site homepages.

VIEW THE PDF

Logos of Aer Lingus, Ryan Air and Fly UX.

Step 04 - Affinity diagram

All of the subjects made notes on the Trello board, and I then went through those and removed duplicates. Once this was all done, I had an affinity diagram representative of the users emotions so far. (I had to use Trello because of Covid.)

VIEW THE PDF

Logos of Aer Lingus, Ryan Air and Fly UX.




Step 05 - Empathy map
View the full PDF (448kb)

I then mapped out the user's journey from the affinity diagrams, highlighting their goals, behaviours, and context. This was coupled with their positive emotions and pain points whilst conducting the tests. Creating this empathy map had now produced quantitative data in a structured format.

The customer jourmney map I created.

Step 06 - Flow diagram
View the full PDF (10mb)

Because I was effectively designing one master journey, I only needed to create one flow diagram for this project. I already knew the journey would consist of choosing a course, a landing page, a specific course page, and a payment page, so created a flow diagram to emphasise this.

Affinity diagram part 01



Step 07 - Navigation and course selection
View the full PDF (8.8mb)

These are visuals of the differences between the old-style navigation and course selection process, compared to the new style navigation that incorporated the course selections. Bear in mind that there were also two domains at this point: papapixeltraining.co.uk for classroom-based courses and papapixelonline.co.uk for online-based courses. I set about merging these domains to only a single domain for classroom and online training.

I got around differentiating the different training types when booking by having both classroom training and online training links in the header. These course pages would be practically identical except for having some copy variations. But at the booking stage, I was able to separate classroom training from online training using tags in the booking software. For example, using a tag of beginners-photoshop-classroom inside the course booking software, I could add the URL
papapixel.co.uk/adobe-classroom-courses/photoshop/beginners-photoshop-course/iframe?tag=photoshop_beginners_classroom which would take a user only to the specific dates of those courses.

Getting the correct booking software was a huge challenge at first, and it took many weeks to find this particular one that could be customised as needed.

Old navigation part 01
Old navigation part 02
New navigation part 01
New navigation part 02
Adobe Photoshop landing page
Beginners Photoshop course page
Beginners Photoshop booking page




Step 08 - Low fidelity navigation prototype
View the prototype (opens in a new window)

From the data gathered so far, I was able to create a very simple low fidelity prototype. Some design work had already been carried out for this site's look, so by using one of the Photoshop files, I was able to make a crude interactive prototype in Adobe Xd.

This prototype has limited functionality, and the following conditions must be met: Click on classroom courses, click on Photoshop, select Beginners Photoshop, click anywhere on the page to mimic scrolling down, click on the 'book course' CTA.

The customer jourmney map I created.



Step 09 - Final wireframes
View the full PDF (7.5 mb)

I now had enough data and a working prototype to create final wireframes to hand over to the developer. These wireframes are based on user research and not assumption. Going through the iterations with the prototype gave me a product that I knew would work and the wireframes were a by-product of all of the above steps.

 

Final wireframes 01
Final wireframes 02