Papa Pixel Training
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.
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:
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:
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.
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.
Step 02 - Global page iterations
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 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.
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.
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.)
Step 05 - Empathy map
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.
Step 06 - Flow diagram
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.
Step 07 - Navigation and course selection
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.
Step 08 - A medium fidelity prototype.
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. (Please note, this is the old iteration before classroom and online courses were combined into just a 'courses' dropdown.)
Please click 'Enable all' on the Adobe cookie notice to display correctly. The module has functionality, but the following conditions are required for it to work:
Navigation - Click on classroom courses
Course selection - Click on Photoshop
Photoshop selection - Click on Beginners Photoshop
Click anywhere on the page to mimic scrolling down
To view the booking page - Click on Book Course CTA
Step 09 - Final wireframes
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.