Tools Used

Figma, InVision

Problem

People want to learn new skills, but struggle to find the motivation to master new skills.

I have always struggled with having a want to learn and do new things, but not being able to get past the initial plateau of proficiency at the new skills I tried to learn. So when tasked with coming up with a digital solution for some problem we might try to solve, I decided to focus in on that struggle to learn. Specifically the drive and motivation to learn new skills and stick with them to become proficient.

Secondary Research

The lack of motivation keeps people from a sense of fulfillment

After figuring out the problem I wanted to tackle I did some secondary research to make sure that this was even a problem for people.

User Research

Interviewees have a desire to learn, but are unmotivated by external factors and plateauing improvements

To get further insights on how the problem of learning and motivation affected potential users of our app, I conducted interviews and an online questionnaire with the target demographic of young adult millenials who have tried to learn new skills. In total 6 young adults age 25-28 participated to answer the questions below to find trends and reasons about how they learned new skills, and problems they faced while learning. I then categorized their responses and then synthesized them into key insights.

Interview Response Analysis

Key Insights

Participants all have a desire to learn

1. Participants all have a desire to learn

2. Participants struggle with keeping up with their learning

3. Participants struggle with the ‘plateau’ and not seeing progress

4. Participants motivation to learn wax and wanes

5. Participants mostly just search for information and tutorials via Google and YouTube

6. Most participants do not currently use any digital assistants to pursue learning (not including Google or YouTube)

How Might We Question

“How might we motivate individuals to pursue and continue their own self learning so that they reach their learning goals?”

Based on the reseach findings I developed the how might we (HMW) question of this particular problem space to more specifically focus on the problem of continuing learning as that seemed to be a common problem among interviewees.

 Design Task Flow

Design Blocks, and Deadlines

Now that I had a HMW question and a persona, all that was left was to come up with ideas for an app interface. To start I looked at other similar learning applications for inspiration and to see what type of baseline features these apps had. I then designed a task flow that involved the user starting with a login screen, going from the home to a search screen, and looking up ‘Guitar.’ From there they would navigate to the Skill page, pick a difficulty level and sign up for a course. But while sketching and making grey-scale wireframes I hit a design roadblock, and the upcoming deadline for this portion made it even harder. I also realized my initial taskflow did nothing to address the main concerns of the insights I gathered from my interviews or pain points of the persona. That being making practice more enjoyable and have incentives to keep learning. This lead to 2 more sets of sketches and task flow designs till I came up with a simpler flow, that addressed incentives by including a points feature.

Task flows

UI Inspiration Board

No need to reinvent the wheel

I created a UI inspiration board by looking at existing learning apps and learning app designs, such as linkedin learning, to see what was already out there and what I could put my own twist on design-wise.

Sketches

The ideation phase

Made a number of skecthes using the UI inspiration board above for ideas. For each time I changed the user flow.

Solution sketch

The final sketch of the flow based on the final task flow that I settled on.

Grayscale Wireframe

Design, Test, Improve, Repeat

Version 1.0

With the solution sketch, I designed the first grayscale wireframe as a nearly 1 to 1 copy of the sketch. I then had users test the prototype to see what they had to say about it. The first round of testing went well, with everyone able to complete the task of searching for “Guitar” and then navigating through the skill page to ‘watch’ the first lesson. This showed that the functionality of the app at its core was clear and easy to use. Users noted as such saying it was simple and clear, and that the buttons were also clear on their functionality. Some critics were that some designs like the switch between lessons and practice lists could be made more clear, and that the navigation bar on the bottom was too large.

Version 1.1

As with version 1.0, I tested version 1.1 with the same task flow, but with a new set of user testers. Once again everyone was able to complete the tasks. And all the same positive points were pointed out. Some criticisms of this round included the strange amount of white space left from altering the size of the navigation bar and reducing a row from the category section on the home page. As well as a spelling error (recommended) only one tester caught. Some felt the text of the category section was too small, and that the category icons themselves were too small as well. It was also noted that having some way to see progression of the lessons would be nice.

Version 1.2

This last grayscale prototype is the culmination of the feedback from the tests done on both the previous versions.

Branding

How to convey learning and motivation

For the brand I wanted to focus on learning and motivation. For this reason I started by making a ‘More A than B list’ to better define how we wanted our brand to be like.

With this list in mind, I wanted out brand to be embody emotions related to learning, but also of the drive to discover and motivate. So I collected images that based on the idea of: Calm, Inspired, Curiosity, Determined, Modern, and Sharp. And used this to get our brand colours or Orange and Blues.

Then I came up with a list of potential names before ultimately deciding to go with “Spec up” as the name for the app. This is an ‘informal verb’ meaning “to enhance the constituents, appearance, performance, etc of (a product or property).” ‘Specs,’ is also commonly used as casual lingo in video games to refer to the stats and skills of characters. I felt this properly fit our image of improving or “enhancing” our users by teaching them new skills, while also not having a more conventional generic name like “skill up.”

I started with a couple rough sketches of potential word marks. I quickly knew I would want a sleeker san-serif font. From there I began testing out random fonts until I came across the Sansation font. I specifically liked the design of the capital “P” but didn’t want to have a middle letter capitalized, so I morphed and played around with the placement until I was satisfied.

Wordmark colour test

Final wordmark design

I then created some potential app icons based on the idea of ‘upgrading’ before settling on the design on the right based on peer feedback.

Made in Figma

The UI Library

 For a full breakdown of all the UI library follow this link to the figma file

Key learnings + next steps

What I learned from my experience

For my first big solo UX project I am quite proud of what I could accomplish. I learned a lot of the overall UX process while attending lectures and working on multiple small assignments at BrainStation. I now have a deeper understanding of the type of work that goes into UX design, from the research, to ideation, to testing, and finally a design. Some of the key things I learned are:

1. Getting feedback from peers is invaluable when trying to decide between designs. The feedback I got from my peers on my work was invaluable, and gave me new perspectives and insights I would have never noticed on my own.

2. User Testing often brings to light details that you overlook as a designer. Similar to the previous point, sometimes you are so focused on the design of something you can miss simple things the user might want or need. This is what makes user testing so important in UX, especially as it is our job to design for the users and not for ourselves. User Centered design is so very important.

3. Getting too caught up in features can leave you wandering in design limbo. While having a ton of features is nice, trying to jam everything in is a nightmare for design. And can leave you unsure of how to fit it all in. In these cases its always great to remember K.I.S.S. Keep It Simple Stupid.

4. The UX design process is continuous. There is always more to iterate on, and the UX process doesn’t end once the ‘final’ design is sent to be made by the devs (or manufactured). We continue to iterate the design based on the users feedback and their ever evolving needs and wants. People aren’t static, and as they change so should the designs change to better suit the users. This is the core of User Centered design.

If you have questions related to my work, or just wish to chat do email me at bennettv13@gmail.com

Thanks for reading my case study (or at least scrolling to the bottom)!