Solocal UX Learning Platform
How to train web designers in interface design and user experience in a production context?
Client: Product Management Team
Challenge: in charge of UX training for the production team
Activities: User research, persona, experience map, wireframe, prototyping, user testing, training content and support, team evaluation
Result: One week of training, weekly meetings and a training platform
qqq
Solocal is a company specializing in advertising, communications, and digital marketing for local businesses. It offers website creation services. The company has a web production team. Most of its members are self-taught and have no knowledge of interface design. Once in the field, with the pressure of production, they don't have time to learn these concepts.
Discovery
The discovery phase helps us understand users' needs, as well as their motivations, attitudes, feelings, and previous experiences. It is a phase of empathy that allows us to gather information, understand users, and give them meaning.
qqq
Action :
> Maintenance
> Audit
> Meet the team!
Interview
I had the opportunity to speak with most of the web designers. The goal was to assess their different profiles and their needs. This allowed me to evaluate their understanding of user experience, usability, accessibility, and graphic design. I was also able to interview their managers to better understand the issues related to production.
Audit
I adapted the heuristics of Jakob Nielsen, Colombo, and Pasch, the common laws of UX, and the accessibility criteria for the products that web designers design for our clients. I condensed them into a grid of around fifty criteria for evaluating websites. I conducted audits on the sites produced over the past few months, which allowed me to assess, based on concrete implementations, how they put their knowledge into practice.
The evaluated criteria allow for a quality rating in terms of design. Only 20% of the sites came close to meeting design expectations. The score fell short of the company's expectations, which aim to develop good web practices and apply the principle of user experience.
Ideation
Comparing theory with the real world helps reveal usage trends, design errors and resources not identified at the start of a project.
qqq
Action :
> Icebreaker
> Experience map
Experience map
We brought together eight participants to lead workshops, six of whom were web designers and two others from the training teams. It was essential for me to involve them from this phase, as these teams would be responsible for deploying a potential solution. The idea was to map all the web designers' actions during the website creation process in order to define the associated thoughts, feelings, and opportunities.
This workshop allowed us to understand the scope of the actions of web designers, but also to identify the best ways to provide them with training.
Create
Create physical representations of possible solutions, with which the target user can interact and evaluate. This phase aims to concretize the ideas resulting from the ideation phase, often in the form of models and prototypes.
qqq
Action :
> Nobody
> Wireframe
> Prototype
Person
Web designers have limited time for training due to production pressures. It's difficult to dedicate a few hours of training to them, as it would interrupt production. Organizing multiple sessions with a small number of people was too time-consuming for training teams and disrupted the production process, creating interruptions in the creative phases.
We had to find a way to make training available so that web designers could self-train whenever they had time at the end of a project.
The solution had to be self-contained, time-saving, and fun to encourage web designers to take the time to learn.
Wireframe model
Thanks to the audits, I identified the most significant gaps and knew which topics to prioritize presenting to the teams. This allowed us to publish an initial version of the platform and add other topics gradually. With production pressure high, it was necessary to quickly deploy the solution to improve the product websites.
Content platform:
Integration
> Learn a subject
> Practice the topic while playing
Learning subject
> Choose the subject
Game integration
> Show the rules of the game
> Return to learning
Let's play
> Click on the wrong design
> Learn a design tip
Finish the game
> A quick reminder of the design topic
> Click to view the topic
> Play another game
Design Theme
> Quick Lesson
> Example with a production case
> Practical advice
> Printable format
Prototype
A prototype needed to be quickly designed on Adobe XD to validate the proof of concept with the production teams. We forwarded the link to the prototype on XD to the web designer so they could test the solution.
Glossary
> Choose a topic
Let's play!
> When the user clicks on a bad design practice, a message appears explaining why it is bad and how to improve the design.
> At the end of the game, the user has a summary of the rules he saw in the example
The final step of the customer journey is a summary page of the topics covered. Participants can save it to their computer or print it as a poster. It contains the main lesson, tips, and a use case.
