Skillpod

UX Design

My Role

In design school, I worked as a UX Designer for the GBC Office of Research & Innovation. We were a small group of students and faculty hired to create product prototypes for businesses.
‍
We were contracted by Skillpod—a soft skills coaching business—to create a mobile app.

The Task

Skillpod was only offered through physical workshops, our goal was to make it a digital product.
‍
"How might we share content in a way that encourages engagement and completion of the Skillpod program?"

Customer Impact:
Increase soft skill knowledge quickly and conveniently.
‍
‍Business Impact:
Increase engagement of the Skillpod program.

My Role

Tools Used

Duration

Deliverables

Team Size

UX/UI Designer

Illustrator
Adobe XD
After Effects

9 months

Working prototype

Grouping categories and places into scenarios with the client

A client workshop with cards arrayed on tables.

Step 1. Client workshop

For the workshop, we printed cards with emotions, places, identities, and learning styles on them. With the clients, I grouped cards together from each category to create a likely scenario a Skillpod user could find themselves in.

Why?

To understand the needs of the client.
To understand their users and why Skillpod benefits them.

Outcome

The workshop findings led to the creation of scenario-based personas.

A persona created from workshop findings.

Skillpod Persona

Step 2. Whiteboard sessions & sketches

I did white-boarding sessions with my team and then began individually sketching solutions.
‍

Why?

To understand how the product might be used to solve some of the pain points discovered in the personas.

Insights

The Skillpod program discusses several types of learning styles: visual, verbal, etc. But there is only one medium for the users to learn (reading).
It may be hard for some users to digest a lot of written content.

Outcomes

1. I began to envision the Skillpod app being able to cater to particular learning styles through mediums like video and audio; instead of the linear pathway of reading all the material.

2. We decided to break up the content into smaller chunks so less time and attention would be required to complete Skillpod content.

A whiteboard with the Skillpod useeflow and sticky notes.

Whiteboarding with the team

Step 3. User flows & wireframing

Once we had a clear and thorough understanding of the product, the I began making user flows of Skillpod.

Then, using the user flows as guides, I started creating wireframes using Adobe XD (RIP).

Outcomes:

Final user flow. Click to enlarge.

Some of my wireframe sketches. Click to enlarge.

We kept the styling light and playful by using brighter colours and rounded edges.

The team also introduced a badge system to encourage content completion.

Low fidelity Skillpod wireframes with annotations.

Conclusion

We began developing a prototype of Skillpod. We started with the HTML and CSS and then built-in functionality using React.

Unfortunately, the app never made it to market, but our MVP allowed our client to acquire further funding for Skillpod.