Project #2: Palmersville Training and the Responsive Website (in-depth case study)
This is a case study for our second UX design project as Red Academy trainees.
Main intended audience: UX professionals or UX hiring managers
Client:
- Palmersville Training (a part of the Barnardo’s children’s charity) provides learning programmes for young adults that help them to obtain and maintain a job.
- They focus on developing confidence in their learners. And their learning programmes range from training in painting and decorating to hairdressing to warehousing and storage.
- They are based in Palmersville in North East England close to Newcastle.
Team: Anna Skoulikari, Will Duncan, Elena Gioti
Duration: 3 Weeks
Base: WeWork Aldwych House
Working process:
We adopted the Agile philosophy and implemented it through elements of the scrum methodology. We would hold a scrum every morning at 9:15 before classes started covering:
- What we worked on the day before
- What went well
- What didn’t go well
- What we were going to work on today
- Blockers
I also decided to keep a handwritten journal throughout the project. This allowed me to:
a. have a better record of what happened throughout the project
b. take time to slow down and reflect on the project
Project Focus: The focus of the project was responsive web design.
Overview: The journey through this project had a lot of ups and downs. It being our second project, we had a taste of what a client project entailed but it turned out this was a completely different restaurant with its own unique buffet of experiences.
The designer journey map below gives a birds eye view of our 3 week intensive project and the rest of this case study will go into more detail about each turn on the road.
Deliverables and contents list:
- Client meeting and organisational research
- Domain research (led by Will)
- Interview (led by Anna)
- Contextual Inquiry (led by Anna)
Client meeting and organisational research
The client meeting was done over Skype (considering there were 292 miles in between us). We had the three members of our team on our side, with Will taking the lead asking questions. And on the side of the client was:
- Geoff Mount, the Head of Operations for Barnardo’s employment, training and skills in East of England (woah that’s a long title)
- Georgia a social media apprentice at Palmersville
Georgia would be our point of contact throughout the project and she would accompany us on our journey as we shared with her bits and bobs about user experience design and as she helped us get acquainted with Palmersville training.
From the client meeting and some supplementary organisation research we teased out some important points:
- Palmersville Training had been around for almost 30 years
- It was regulated by Ofsted (Office for Standard in Education) and they are mainly funded by ESFA (Education and Skills Funding Agency)
- They are a small effective team of 15 people
Mission Statement
The main mission statement is:
“To provide the more vulnerable young people with the opportunity to improve their life chances.”
Business Goal
The main business goal is:
“To get more learners on study programmes and apprenticeships.”
More specifically:
- To get 8 new learners on study programmes per month
- To have 1 new apprenticeship start every week
- To have 20 referrals per month from various agencies
Organisational culture
We made a note of the inclusive nature of Palmersville:
“We have an open door policy!”
As well the the honesty with which they worked:
“One thing I never want anyone to be is a salesperson, we are very honest and open about our work at Palmersville.” - Geoff
Logistics
We clarified the two main ways through which learners are referred to Palmersville:
Personal referral: The learners get in touch themselves by finding out about it through social media, Google, word of mouth, getting approached by academic tutors or social workers, or some other channel.
Professional referral: A job agency, further education (FE) college, youth offending team or some other professional team refers the students.
The organisational research gave us a good first idea of the context we were going to be designing in.
Domain research
We did some preliminary research into similar education and training providers.
Will created a competitive analysis looking in particular at what features, forms of engagement and forms of contact the different providers had:
From looking at the competitive analysis and the relative success of the respective organisations we put emphasis on three key points:
- Instagram: This was an important social media channel for the targeted age group and it benefited the organisation to engage in it.
- Contact Form: This allowed for an easy and immediate contact method and it seemed like a must-have for any website.
- Testimonials from learners: This made the organisation and service seem more trustworthy and was worth taking the time to implement in the site.
Interviews
The Lingering Question
With a 9 to 5-like schedule of classes, exercises and some project work the question was whether we would make the trip up to Newcastle from London or not.
The Evident Answer
We planned a couple Skype interviews through Georgia’s help with learners. Georgia was with the learners during the interviews and we were in our classroom in London. While the interviews were useful, it became clear that we would have to go to do in-person research for two main reasons:
- Internet connection: The internet connection was not strong enough to have an easy conversation.
- Communication: Due to the context of the interview the learners were unable to fully express and communicate their thoughts to us and we were unable to understand what they had to say clearly.
The Exciting Journey
So Elena and I made our way up to Palmersville.
And with a total of 13 learners, 4 apprentices and 1 staff member interviewed in person, let’s just say it was worth it!
The Questions
The questions focused mainly on:
- Getting to know the learners
- How the learners had discovered Palmersville
- What the experience at Palmersville was like
- What apps and websites the learners used and their interaction with technology in general
The Key Insights
The key insights from the interviews informed the rest of our planning process from the user persona to the key features and more.
Contextual Inquiry
By going in person to Palmersville we gathered invaluable insights from observing during our contextual inquiry.
- LGBT Activism
By speaking to staff and observing the built environment the LGBT Activism was apparent. Literally, the first thing I noticed as I stepped into the building for the very first time was the bathroom sign on my left hand side:
The staff also spoke about how they tried to make all students feel accepted regardless of how they identified.
2. Special Educational Needs (SEN) Learners
By getting the chance to engage with the learners we learnt about the different kinds of special educational needs the learners had.
We actually modified the design of our interview process and rather than doing one-on-one interviews we did them in groups of 2 or 3. This was recommended to us by Georgia (our Palmersville point of contact) in order to make the learners feel more comfortable. We also always had an apprentice (either Georgia or Lucy) in the room in order to have a familiar face present and create an even more friendly environment.
3. The Staff and the Culture
We spent the whole day at Palmersville, we grabbed lunch from the food van (that resembled an ice cream truck) that came by around midday. We chilled in the staff room. And by doing this we got a good feel for what the culture of the people at Palmersville was like which was in one word: friendly.
It would not be an over exaggeration to say that Palmersville Training is one of the most inclusive and welcoming environment I have ever come across.
Ending on a good note on our designer journey with out research phase it was time to move into planning.
We entered the planning stage feeling very confident with the amount of user research done. We started off strong but soon we would learn that, as a Greek saying (that my Greek parents drilled into me) says:
Deliverables and contents list:
- Affinity diagram (led by Will and Elena)
- User persona and user goals (led by Anna)
- Scenario (led by Anna)
- Storyboard (led by Will)
- Feature list
- Userflow and sitemap
Affinity diagram
In order to gain as many insights as possible from the plethora of qualitative data we had amassed Elena and Will did one affinity diagram each so that we would get two different perspectives on the data.
The insights from the affinity diagram then informed our user persona, user goals and feature list.
User Persona and User Goals
After having spoken to so many learners at Palmersville and processed all the information, creating a realistic user persona was fairly simple so…
“I have tried going to college but it did not work out for me.”
“I feel like my head will explode if I have too much information at once.”
“I like to get up and out. I don’t like to sit for too long.”
“I like when a place isn’t too big. I prefer small places with fewer people.”
“I sometimes prefer to go online on my phone rather than my laptop actually.”
“I don’t really use email. If I have to get in contact with someone I’ll either call or message.”
Out of all of the aspects of the user persona we paid particularly close attention to the user goals. We narrowed them down to four:
A lot of the students had been to other education providers but the environments had not been conducive to their learning and growth.
Luke has autism and many of the other students have other special educational needs. Therefore they need to know those needs will be met.
The ultimate goal of the students it to get a job. Luke has to feel confident he is spending his time wisely.
The students wanted to feel a sense of security and certainty in their situation and that their voice was being heard.
Finally putting all the pieces of the puzzle together we had a full user persona to design for:
Scenario
Now, why would Luke, ever in a million years, go onto the Palmersville Training website, when he could be gaming instead?
Well…
And for the more visually inclined among us we also created a storyboard depicting the scenario.
Storyboard
Key Features
In order to prepare ourselves for the beginning of the design process we had to first decide on the feature list.
We started out with a wide array of features that weren’t very well organised and slowly we funnelled this list down to the essentials.
We began by individually creating a list of features we found important.
The next step was to merge that list and this was the product:
This was a mishmash of features. In my view, it was all over the place. I found it extremely important to take the time to extract the essential information from this list to really understand the nuance of what these “features” stood for.
And finally just to take a second to focus on the stripped down essentials. In the end the four main features were simple and yet powerful.
User Flow and Sitemap
After having done the feature list we were in a hurry to do a design studio and start preparing a prototype that we could test when Will would travel up to Palmersville.
But then we realized that with an existing website in place and additional features in mind, we actually had not ideas what the site map and contents of the site would be.
We took a step back and decided to do a type of content analysis by doing an open cart sort in order to make sense of existing and prospective info we wanted to include in the site.
- First we wrote different types of information on sticky notes.
2. Then we grouped the sticky notes we felt that belonged together.
3. And then we labeled the groups that were together.
The from the above we created a preliminary sitemap.
Then as we prepared to get bums to seats and start our design studio, a quick meeting with our design evaluator brought the lack of a user flow to or attention. We were missing out a crucial steps in our planning process which would later compromise our design.
We took a step back and created our user flow.
This user flow was particularly hard to make because we felt like we were making quite a few assumptions in terms of what the user would look at first and in what succession. It can be noted that there is a lack of decision points in the user flow.
Note: Although the user flow is depicted as a linear process. I made note of the fact that the ultimate goal for the students was to get in contact with Palmersville. Each individual student would look at information in a different order. Therefore one could think of the website as more of a funnel. Where a student needed to reach the threshold amount of information in order to be convinced to contact Palmersville.
Finally with the above lesson having sunk in we were truly ready to move on to the design stage. And it was going to be all hands on deck.
Deliverables and contents list:
- Design studio
- Preliminary design research
- Paper Sketches (led by Will)
- Design decision
- More design research
- Accessibility research (led by Anna)
- Low fidelity digital prototype (led by Anna)
Design Studio
One of the learnings from our first project was that the design studio was important to carry out.
Definition: Our design studio consisted of choosing a particular website page (in this case we chose the homepage):
- For 5 minutes we individually sketched what that page could look like.
- Then, we presented our sketches for 2 minutes each.
- Next, we gave feedback on the sketches for 2 minutes each.
- Finally, we re-sketched for another 2 minutes and repeated the process.
Our facilitator throughout this process was our design evaluator, Jason.
Below one can see the iterations and experimentation that I undertook doing four round of sketches of the homepage:
When our design evaluator took a look at our sketches the first question in his mind was:
What sort of design research did you do?
This is when it became evident that we had lacked design research! For example, a quick looking at the competitors mobile sites it was clear that text always came above or under images but never beside:
So before any more sketches could be done it was time to do some design research!
Preliminary design research
We went on to look at the competitors sites on mobile and on desktop and take detailed notes, here is an example of our design research:
Paper Sketches
Then we went back to the drawing board and made some more paper sketches:
Design decision
Now to provide a bit of context, it was Friday afternoon and by Monday we needed to have a full prototype to test since Will would be making his way over to Palmersville.
Design decisions: We needed to decide whether the prototype we would test would be a paper prototype or a digital prototype. We chose digital.
Rhetoric for design decision:
- It would be easier to incorporate feedback from the team mates during the design process if the design was done digitally.
- We only had time for one more trip up to Palmersville and we wanted the learners to be exposed to a prototype that they would more easily imagine to be real.
More design research: the Menu
One aspect of our design that we payed particularly close attention to was the menu. We looked at competitors mobile sites and thought about what Luke (remember our user persona) would like to use most.
We looked at the Red Academy website:
We looked at Princes Trust:
We also looked at Springboard:
We thought about Luke and his fourth user goal which was:
“I want to feel like I am in control of my learning and life.”
We decided it was important for our users to feel like elements of the site weren’t disappearing. Therefore we opted to create a menu similar to that of Springboard where the rest of the page was still visible when the menu expanded:
Accessibility Research
Another aspect of our design research that I delved into deeper was research on accessibility features.
As mentioned before a lot of the learners at Palmersville have Special Educational Needs and it is important to make the website accessible to everyone.
Also one of Luke’s goals is:
“I want my education to be appropriate and tailored for my needs.”
And what better way to communicate this than to make the website itself accessible to Luke!
I looked at many different websites that had won awards or been recognized for how well they ranked in accesibility criteria and then I presented my findings to my team.
This was something we had spoken about in our retrospective for our first project: We wanted to communicate our findings more clearly to each other. Therefore I created a mini presentation for my team mates so I could succinctly but yet also clearly show them what I had found:
This worked much better than sharing with each other long google docs documents of written content or just trying to orally explain what we had found.
Low Fidelity Digital Prototype
Finally with the first version of the prototype ready it was time to test it out!
Deliverables and contents list:
- Usability test (led by Will)
- Key insights and changes
- Final Prototype (led by Will)
- Conclusion: did we meet our user and business goals?
Usability test
Often with usability testing the facilitator reads out a scenario and tries to have a hands-off approach onwards. However in this case due to the particular context and the users with which we were testing, the facilitator Will, took a more active role by reading the scenario out bit by bit and asking questions throughout.
We recorded the user’s testing sessions so that we could always look back and study them in more depth if we wanted to.
We were able to carry out six in-depth user tests in total which was very useful and gave us a lot of insights to work from.
Key insights and changes
We had quite a few points of feedback from the user testing and here are examples of four things we changed to our prototype:
Learners disliked having to scroll all the way up to the top in order to get to the menu again so we created a sticky header so the menu was always available.
This was mainly a feature we had not had time to build out before and therefore for the final prototype we made the whole thing!
We realised that having calls to action and buttons leading to more information elsewhere in the site was very helpful. It allowed for a much smoother user journey throughout the site, especially if the proper information was available at the right time.
This was another feature that we had not had enough time to build out in full and we made sure to focus on it for the prototype we would present to the client.
Final Prototype
We worked more on the copy in the final prototype, adding colours, allignment and other stylistic and user experience feature, check it out for yourself though:
Conclusion: did we meet our user and business goals?
Feature 1: Hear from people
By visiting the site students got to hear from:
- other current students
- the Palmersville staff
- past students have have gone into the workforce
User goal 1: The videos and quotes of all these friendly faces on the site communicates what a friendly and inclusive environment is created at Palmersville.
User goal 2: Prospective students can relate to other students like themselves, that are either still at Palmersville or have already finished.
User goal 3: The students they come across on the “success stories” page can show them that it is possible to get a job after being trained at Palmersville.
Business goal: By getting to hear so much from the people on the website we in a way recreated the in-person experience of visiting the training centre but this time online. This virtual experience can help more students get to the point where they feel comfortable to get in touch with Palmersville.
Feature 2: Make it accessible and visual
To fulfil this feature we included a lot of accessibility features on the site. We also incorporated a lot of video content as well as many photos. And we made sure the copy was friendly and understandable.
User goal 1: The tone throughout the site is very friendly and communicates the welcoming culture at Palmersville.
User goal 2: A lot of the students expressed their preference for videos rather than paragraphs of text (also evident from the hours they told us they spent on youtube). Including video content communicated that we were listening to their needs and this was the place for them.
Business goal: If students feel that their voices will be heard and their needs met at Palmersville then they are a lot more likely to get in touch. And this can be communicated from the first moment they click on to the site.
Feature 3: Low barrier to contact and engagement
We wanted to make contacting Palmersville as easy as snapping a friend (using Snapchat that is). Users are prompted to possibly contact at the end of each page. And within that prompt they are offered many different options whether that is fb messaging, calling or filling out a contact form. We also sprinkled in some calls to action to contact throughout the site in order to cater to different types of users. Some prefer contacting immediately to gather more information while others would want to take in a lot more information on site before picking up the phone.
User goal 1: By making contacting Palmersville so easy we want to communicate the message that we are eager to talk to learners and always available for them.
User goal 4: By making contacting available to students at any point on the site we allow them to feel like they are in control of when and where they can make that decision.
Business goal: The easier it is to get in touch with us, the easier it is to create that connection with the prospective learner and to see whether Palmersville is the right place for them!
Feature 4: Easy access to information
We have added links to various parts of the site all throughout the different pages so that users can jump from one piece of information to another seamlessly. And we aimed to present information in a simple and easy way for example the timetable of the daily learner schedule. Lastly we wanted to created a flowing experience through the site and therefore at the end of each page we offered a recommended following piece of information to look at in order to prompt users to continue their journey through the site.
User goal 1: By allowing users to access the information they needed online we wanted to communicate that in general at Palmersville they would have access to the information they would need throughout their training.
User goal 2: We tailored the information architecture to the needs of the typical learner so that they felt this was the right place for them.
User goal 4: By having access to the information they require, when they need it, prospective learners can already feel in control of their training process.
Business goal: With the right information available, it would be easier to convince prospective learners to get in touch and to make Palmersville seem like a professional service which can help them reach their goals.
All in all we felt that we made a lot of progress in satisfying both the user goals and the business goals.
There is one aspect of the business goal however that was not satisfied as well. One of the three sub-business goals was:
To have 20 referrals per month from various agencies
This is the so-called professional referral. Since we did include any agencies in our research phase, the rest of the project did not include their perspective in the design of the product. Therefore one could argue that fulfilling this side of the business goal was lacking.
Presentation (created by me)
This was the presentation we prepared for the client:
Retrospective
Finally, in order to bring closure to the project and to extract maximum learning from it we did a final retrospective.
We used the Sailboat technique.
In this technique:
- Wind: represtened things that worked well
- Anchor: represented things that didn’t work well
- Iceberg: represented things to look out for
A couple key things that came out of the retrospective:
Identify “slow” areas: We needed to make sure to avoid rushing certain key activities during our design process. This had been a major learning in this project where in both the planning and design stage some steps were missed which delayed our entire design process.
Design research: We needed to make sure to do more thorough design research in our next project and a more in-depth competitive analysis of other people in the field.
Client’s comments:
“Anna worked on a project for my organisation. What was clear from the initial contact with Anna, was that this was someone who was confident, a great communicator and who knew her subject. Of course communication isn’t all about talking; it’s more important when working with a client to listen to them, understand their business and their needs. Anna did all of this and more. She is someone I’d recommend when considering any digital solution for business in any sector. Easy to work with, reliable and quite simply, she delivers also. Thank you Anna and good luck for the future.”
— Geoff Mount, Head of Operations at Barnardos Employment, Training and Skills (East of England)
Contact:
Hope you have enjoyed this case study and if interested in contacting me, feel free to pop over an email at: annaskoulikari@gmail.com ✉️
Otherwise maybe:
- Check out my case studies for my 1st project or 3rd project 💼
- Browse through my Linkedin 🔎
- Or read more about me and what I’ve been up to the last 5 years here! 🙋
Otherwise check out this video 🎥 where I introduce myself:
Bibliography
