Quick View
The client came to us with pen-and-paper lesson plans of their soft-skills development course. They wanted to develop its UX features and make a mobile web-app prototype.
Problems & Challenges:
The client’s existing module was linear and did not translate well to digital space. The module lacked motivators for engagement. Core product values did not translate well in practise.
Our solution:
Our team used UX techniques to create the foundation for a ‘digital Skillpod.’ We designed a dynamic system that responded to users’ personal skills and needs, putting the client’s values at the core of the product. Using this UX work, we developed a mobile-first webapp prototype for the client to take forward for stakeholder reviews.
Module Review
When it was given to us, the Skillpod program came in the form of a heavy booklet of main chapter topics, section assessments, and a personality test. With the goal of adapting this classroom-oriented content to a digital space, our team got together to ideate on opportunities and situations in the digital system we would move on to create.
Our ideation session yielded six main areas of opportunity for a digital experience:
- Places
- Actors/Roles
- Learning Styles
- Skills/Actions
- Outcomes
- Emotions
We expanded each category into a deck of prompts and used them to run a UX workshop with the client and team. Skillpod’s key values were included as a central piece in the workshop, to ensure we captured the essence the product.
By the end of the workshop we had 18 scenarios, each telling the story of a potential user benefiting from a digital Skillpod in a unique and realistic situation. These gave us our primary and secondary users, physical and digital settings, and outcomes and opportunities.
Our team’s next step was to create personas from the outcome of the UX workshop, to better synthesize and visualize results.
Each persona included a brief scenario describing how it might relate to a soft-skills platform, pains and gains, and a real or digital setting. We identified two distinct groups of users: Learners and Mentors. Importantly, this step revealed how potential users’ location, learning style, needs, and pains & gains related to skillpod’s core values.
Flow & System Maps
Next, the team created user flow maps for the digital Skillpod system we had been exploring. Our findings from UX research were our main guidelines for key features and interactions. We used this opportunity to develop new ways for users to interact with the system and its modules.
A major component of Skillpod is 'knowing your learning style.' Our team took this opportunity to change Skillpod's linear lesson content into a dynamic, responsive one which would be different for each 'type' of learner.
Through multiple iterations, we ended up with three key user groups of a digital Skillpod. Our team created ways for each user group to interact within digital and physical space, to create a system for the educational app that affords plenty of opportunities for growth. This included systems for community engagement, physical and digital events, and employment qualification.
We congregated all this data into a single, overall system map.
Wireframing
At this point in the project, our client wanted us to condense the overall system into a prototype webapp that could be used at stakeholder meetings. Our team focused on the ‘learner’ user group for this.
In this stage, we put into practice the responsive systems we mapped in the previous stage. We put a lot of emphasis on pagination, personalization, and gamification of content. We accounted for time, setting, and users' experience levels.
Since this is a learning app, it's important for users to feel tangible improvement and personal growth each time they returned for a new session. To do this, our team implemented a goals system. First-time users pick personal goals, which influence module pathing. Returning users see their progress through their goals and can add their personal evaluation.
As Skillpod is a soft-skills development course centered around embracing your learning style, we felt that it was pertinent for the app itself to respond to, and present content in, its user's learning style. Once users completed the initial personality test, their learning style guides their experience throughout the rest of the app. We designed this to be fluid: as users completed chapters in the course, the results of their progress actively changes their learning style score, and thereby their in-app experience.
Prototype
Finally, our team delivered the finished webapp as a working Javascript prototype. As much of the final styling and UI design was done during the prototype stage, I helped with writing HTML and CSS.
