MasterBlocks – A Solution to the Skills Gap Need (UX)

Home / MasterBlocks – A Solution to the Skills Gap Need (UX)

The following is a high-concept, large-scale project that my team of three pitched as part of the Innovation Challenge (a ‘Shark Tank’-like competition) at Wiley. We took home the “Highly Ambitious Award.” For the challenge I worked as team leader/project manager, UX and UI designer and also co-authored a 40-page business plan.

The project was our solution to solving the growing skills gap issue, taking into consideration the specific needs of users/students, universities/colleges and corporations.

View hi-fi prototype

The concept of MasterBlocks is to offer individual, stackable online Masters level courses from Wiley Education Services’ college and university partners. MasterBlocks’ tiered courses would help fill skill gaps (from both a user and corporate need); be an affordable way for students to experience online learning; and ultimately create the opportunity for learners to earn digital badges, certificates or potentially a full Master’s degree but with more flexibility than Wiley’s current program structure.

Heuristic Evaluation of Competitors

Based on the 10 Usability Heuristics for User Interface Design which was created by Jakob Nielsen of the Nielsen Norman Group a competitive analysis was performed. The heuristics are broad rules of thumb (not specific usability guidelines) which make up ten general principles for interaction design. I analyzed each of MasterBlocks’ top three potential competitors based on these heuristics.

Competitors Analyzed:
FutureLearn is a digital education platform founded in December 2012. The company is owned by The Open University in Milton Keynes, England. They have 121 partners from around the world including UK and international universities. They also are teamed up with institutions with huge archives of cultural and educational material, such as the British Council, the British Library, the British Museum, and the National Film and Television School.

Udacity is a for-profit educational organization founded by Sebastian Thrun, David Stavens, and Mike Sokolsky offering massive open online courses (MOOCs). Partners include—Google, AT&T, Facebook, Salesforce, Cloudera, etc. They offer Nanodegree programs and credentials targeting Web Developers, Data Analysts, Mobile Developers, etc.

Coursera is a venture-backed, education-focused technology company based in Mountain View, CA. They were founded by Stanford professors Andrew Ng and Daphne Koller. They have 149 university partners and offer 2,000+ online courses which offer a sharable electronic Course Certificate upon completion of each course.

Competitors Analysis Results:

Click to expand view. *Additional examples available.

Research Findings

People who have obtained their Bachelor’s Degree and want their Master’s degree have various reasons for not obtaining it. The purpose of this research is to identify the needs of those people in order to provide solutions via MasterBlocks.

Summary of Findings
The majority of people interviewed have their Bachelor’s degree and either already have thought about getting a Master’s or already have at least one. For those who hadn’t yet obtained one, the reasons were divided between time (20%) and cost (30%).

Looking toward solutions, we asked if individual Master’s level classes were offered if they would be interested: 85% were either interested or might be interested.

Respondents wanted to get their Master’s degree to either (a) enhance their skillset and therefore marketability or (b) transition between two different fields.

Half of the respondents felt as if there were at least some special skills needed for their current positions and hoped to obtain them with a Master’s if they were to pursue one.

If the option to take individual classes were offered, respondents said they would determine credibility of a course by looking at items such as:

  • • The university/college offering course
  • • The reputation of the institution
  • • How the school/program/class is viewed within their industry
  • • Ranking of degree/University/college that course is a part of
  • • Accreditation
  • • What others are saying about the course
  • • Frequency of course
  • • The instructor
  • • That there’s a brick & mortar campus for the university/college
  • • Length course has been offered online
  • • Website design quality


Finally, when respondents were asked to rank what would be important and of value to them when taking an individual online graduate degree level course their responses were broken down as follows:


User personas help us to understand who we are designing for and also to align our strategic goals to specific user groups. Based on my research and interviews of potential MasterBlocks’ users, I created the following two personas: the individual user (represented as Cassandra) and the corporate user (represented as John).

Cassandra Lewis
35, Digital Strategist, Boston, married
“I’m always moving forward, but also appreciate my down-time.”
I love my career, but am always open to new opportunities so I’m always keeping my eyes and ears open for ways to improve myself and my skillset.
It’s important for me to be knowledgeable at my job.
I want to make sure I’m marketable for future opportunities.
I ’m not in a leadership position currently, but I do see that as a potential path so I want to start to develop those skills.
I give my job my all when I’m there, but it’s very important to me to have awork-life balance.
I always want to be on top of trends and don’t like to come off as not being “aware” of what’s going on in my industry.
I’m comfortable financially, but obviously having more financial security is very important, so I don’t want to spend money on something that won’t help me in the long run or isn’t worth it.



Weekly time spent



John Yi
44, Director Product Management, Chicago, married
“My time is important, so when doing research, don’t make me waste it.”
I want to be seen as a confident leader with the smartest, most capable team.
I watch the bottom line, but am willing to pay for quality.
My team is hard-working, so I want the best for them.
I want one-stop shopping to research and purchase courses for my team.
Be succinct! Give me the low-down on the courses for my team so I can easily provide a report to my team and my superiors.
I don’t appreciate my time wasted, so don’t make me clamber around a site to find the information I’m looking for. Don’t make me dig through multiple pages for answers.
I can’t stand when sites are vague. I understand giving a birds-eye view of what the course covers, but I also want the nitty-gritty details so I can make sure it’s the RIGHT course.



Weekly time spent



Empathy Maps

To further understand the user and their behaviors within their environment the following empathy maps have been developed. These helped to understand the customer segment, elaborate on user personas, capture user behaviors, and build out user stories.

Click to expand view.

User Stories

User stories will help all MasterBlocks team members to easily focus their vision on the needs of the user from the onset. They are “living stories” that can be updated and modified as the project evolves.

A sample of the user stories for the individual user:

As a user I want to see pricing information on the website and not have to call someone to get that information so that I can know if I can afford each course.
As a user I want to know what sort of credentials or certificate I get upon course completion so that I can have something to share with my current or future employer.
As a user I want to learn more about the university/college teaching the course so that I can see if they are a credible institution.
As a user I want to know if the university/college has a brick and mortar campus so that I can determine see that they are not just “fly-by-night” online school.
As a user I want to easily contact someone to find out pricepoints of corporate options so that I can pass on that information internally.
As a user I want to have easily accessible and great customer service so that I don’t have to worry.
As a user I want information on how to promote the corporate course offerings internally to staff so that I don’t have to figure it out on my own.
As a user I want to know that the courses we are offering our staff are from quality institutions with brick & mortar campuses so that I can I feel comfortable promoting their courses.

Lean Canvas Model

The Lean Canvas model offers a bird’s eye view of the problems consumers face, a competitive overview, key metrics to strive toward, as well as actionable items to provide user-driven solutions with each Minimum Viable Product (MVP) developed by MasterBlocks.

Click to expand view.

Minimum Viable Product (MVP) Features

With an MVP approach to the introduction and development of the new MasterBlocks website, we open up the ability to learn from users in an iterative manner from the start. This approach helps to deliver a product and website that is exactly what users need and therefore creates a greater chance for success. The following is a list of key features that will help introduce MasterBlocks to early adopters and create the opportunity to receive quality feedback.

Individual – MVP #1: Landing Page with Video
The MasterBlocks landing page (featuring an explanatory video) will succinctly communicate (1) the different offerings, (2) the time required to take each course, and (3) list the courses available with information on what universities/colleges MasterBlocks is partnered with. The language used on the landing page will be based upon the interviews, surveys and product development.

Individual – MVP #2: Banner Ads on LinkedIn
During interviews it was discovered that one of the most important aspects to taking individual graduate level classes would be to receive either a certificate or badge for their accomplishment that would be recognized by current and future employers.

MasterBlocks will advertise on LinkedIn using banner ads with a campaign focused on the ability to share their digital badges easily on LinkedIn as well as the opportunity to take Level 3 courses which can build toward receiving a certificate or be applied as college credit toward a master’s degree.

Example banner copy:

Pump up your profile.
Easily promote your new skillset by taking classes online then click to share on LinkedIn.
Resume need more attention?
A Credly badge will help employers find you.
Build your future.
MasterBlocks Level 3 courses can be used to build your Master’s Degree.

Corporate – MVP #1: Corporate Special Rate

Companies are looking to (1) offer online courses to improve skillsets of their employees and add to benefits packages at a low cost and (2) offer affordable classes to their employees from (3) recgonized colleges and universities.

MasterBlocks will develop a B2B landing page (featuring an explanatory video) which will detail (1) how to promote taking online classes to employees, (2) list the schools that MasterBlocks has partnered with and also (3) provide a friction-less way to get more information on the pricing structure of corporate packages*.

*While listing costs on the site would be preferable to users, sharing of this information is dependent upon relationships and agreements with the individual schools.

Card Sort

To determine the future MasterBlocks users’ natural tendencies about where to look for information on the MasterBlocks website, a card sort was performed with both “individual” and “corporate” users. Previously determined topics were organized by users who then were given the opportunity to label them as they best determined.

An online card sort was performed by seven potential “individual” users. Those results were compiled into a dendogram, a similiarity matrix and a participant-centric analysis. Similarities were most notable in “courses” labeled categories. There were also similarities in the online learning category. One category that was surprising and helpful, was “How to Decide” which would clearly help to quell any user fears about selecting a course.

The online card sort was also performed by five potential “corporate” users with corporate-focused topics. The results were also compiled into a dendogram, a similiarity matrix and a participant-centric analysis. Most of the corporate-focused topics were grouped into one group, so that clearly meant that the users were on the same page. I then compared the other groupings with how the individual users categorized topics to see if there were any glaring differences. Most were similiar, but when decisions had to be made as far as the information architecture, I relied more on the individual users as they will be the primary consumer for selecting individual courses.

User Flows

To create the best possible user experience, user flows were created based on what the user personas would want to accomplish. The following are two possible user flows, first for a new individual user and second for a corporate user researching the corporate program.

Click to expand view.


The card sort information was compiled and reviewed and from that the information architecture was determined to create the following sitemap:


Based on the research outcomes, wireframes were built and tested as prototypes by potential users of MasterBlocks.

Desktop Home Page
Desktop Course Detail Page
Desktop Top Rated Courses Page
Desktop Success Stories Page
Desktop Landing Page
Desktop Corporate Landing Page
Click to expand view.

Brand Guide

To create a consistent look and feel for the MasterBlocks website, landing pages and all other assets, a brand guide has been developed working off of the Wiley Education Services brand guide, but with some modifications to give MasterBlocks it’s own, yet still related, identity.

Color Palette
The MasterBlocks color palette utilizes the Wiley Education Services brand colors. There are three modern neutrals used as the primary color palette, alongside a series of bold, bright colors as the secondary color palette.

MasterBlocks utilizes the same fonts as Wiley to keep a baseline consistency between both brands.

Call-to-Action Buttons
Iconography is simple and modern.

User Testing of Prototypes

One of the best ways to improve design is by watching real people, ideally your users or potential users, interact with your interface (websites, mobile devices, prototypes).

To study the behavior of users by watching how they interact with both the landing page and website and also by hearing what their expectaions of how they should work is incredibly helpful for informing how they should be designed.

The following tasks were supplied to four users:

1. If your manager suggested taking a business ethics course, how would you go about completing that task?

1. Same scenario as on the landing page… if you were interested in taking a business ethics course and cared about ratings and were ready to sign up immediately, how would you go about that task?

2. If you wanted to learn more about student experiences, where would
you go?

Users were also asked to give first impressions as to what the purpose of both the landing page and website seemed to be.

Four users tested landing page and website and fit the profile of the “Cassandra Lewis” persona. Ranging in age from 26-35, male and female. They have backgrounds in marketing, organizational leadership, and design. The testers all live in an urban environment and have their Bachelor’s degree. They all are medium to heavy Internet users.

All four users had no difficulty in performing any of the tasks. There was some mild confusion as to the purpose of the landing page and website in regards to whether all courses offered by MasterBlocks were free and whether only free courses could be applied toward a certificate or degree.

Users were looking for individual course information on the landing page, and offered up that it would be required before they felt comfortable signing up for any course.

Two users said they required more information on the course detail page including a defined breakdown of the curriculum before they would sign up.

There was also commentary made about the ratings of the courses. Some users thought 3 out of 4 stars wasn’t strong enough and wanted more details about what the specific user comments were.

On the Student Stories pages, all users were scanning the blurbs about each story looking for specific keywords about what courses the students took and what college/university they took the course from. All wanted some sort of filtering mechanism on both that page as well as the Top Rated Courses pages.

Based on user testing results the items that are planned to be updated in the concepts/design are:

1. Clarify the purpose and intent of MasterBlocks on both the landing page and website.

2. Add a way to get details about each individual course on the landing page.

3. Add curriculum details to course detail page.

4. Move up information about accreditation of school on course detail page.

5. Add filtering tools to both Student Stories and Top Rated Courses pages.

6. Clarify and simplify user-ratings of courses.

7. When adding functionality to Student Stories page, keep users on page.

Landing Page and Website

After the wireframes were tested, modifications were made and concepts were designed in preparation for development.

View hi-fi website prototype

Website Home Page
Website Course Filter Page

Tools Used