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 the UX training for the production team
Activities : User research, persona, experience map, wireframe, prototyping, user test, training content and support, team evaluation
Result : One week training, weekly meetings and a training plateform
qqq
Solocal is a company specialized in advertising, communication and digital marketing for local businesses. One of its offers is the creation of websites. The company has a website production team. Most of them have learned the job on their own and have no knowledge of interface design. And once in the job with the pressure of production, they do not have time to learn these concepts.
Discovery
The discovery phase allow us to understand the needs of users, but also their motivations, attitudes, feelings and previous experiences. It corresponds to a phase of empathy that serves to gather information, understand the users and give meaning.
qqq
Action :
> Interview
> Audit
> Meet the team !
Interview
I had the opportunity to exchange with most of the webdesigners. The idea was to evaluate the different profiles and their needs. Which allowed me to assess their understanding of user experience, utilisability, accessibility and graphique design. I was also able to interview their managers in order to better understand the issues related to production.
Audit
I have adapted the heuristics of Jakob Nielsen and Colombo and Pasch, the common laws of UX and accessibility criteria to fit the products that the web designers are designing for our clients. I have condensed them into a grid of about fifty criterias to evaluate websites. I conducted audits on the sites produced over the past few months, which allowed me to assess from real-life implementations how they put their knowledge into practice.
The evaluated criteria allow to give a quality score in terms of design. Only 20% of the sites were close to expectations in terms of design. The score was not at the level of the expectations of the company which wishes to develop good practices on the web and to apply the principle of user experience.
Ideate
Confronting the theory with the real world makes possible to reveal usage trends, design errors, and unidentified resources right from the start of a project.
qqq
Action :
> Ice Breaker
> Experience Map
Experience Map
We gathered eights participants to conduct a workshops, six of them where web designers and the other two are part of the training teams. It was very important for me to involve them in this phase, because these are the teams that would be in charge of deploying a possible solution. The idea was to map all the webdesigners 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 bring them training.
Create
Create physical representations of possible solutions that can be interacted with and evaluated by the target user. This phase seeks to transform the ideas produced during the ideation phase into a tangible form, often mock-ups and prototypes.
qqq
Action :
> Persona
> Wireframe
> Prototype
Persona
Web designers have little time for training due to the pressure of production. It’s difficult to take a few hours off the web designer’s schedule for training, because it would stop the production. Organizing several sessions with a small number of people was too time-consuming for the training teams and disrupted the production process because it created breaks in the creation phases.
We had to find a way to make the training available so that web designers could train independently whenever they had time at the end of a project.
The solution had to be self-supporting, take little time and be fun to encourage web designers to take the time to train.
Wireframe
From the audits, I had identified the biggest gaps and knew which topics to present to the teams first. This allowed us to release a first version of the platform and to add the other topics as we went along. The production pressure being important, it was necessary to quickly deploy the solution to have an improvement of the produced websites.
Plateforme content :
Onboarding
> Learn a topic
> Practice the topic by playing
Learning Topic
> Choosing the topic
Game onboarding
> Show the rules of the game
> Go back to learning
Lets play
> Click on the bad design
> Learn a design advice
End the game
> Quick reminder of the design topic
> Click to see the topic
> Play another game
Design Topic
> Quick lesson
> Example with a case from the production
> Practical advice
> Printable format
Prototype
A prototype had to be designed quickly on Adobe XD in order to validate the proof of concept with the production teams. We gave the link to the prototype on XD to the web designer so they could test the solution.
Glossary
> Choose a topic
Lets play !
> When the user click on a bad design practice a message appear and explain why this is not good and how to improve the design
> At the end of the game the user have a recap of the rules he saw on the example
The last step in the customer journey is a summary page of the topics discussed. They can save it on their computer or print it as a poster. It contains the main lesson, tips and a use case.
Related Projects
