Our project begins with an in-depth meeting with the stakeholder in order to get an exhaustive and complete understanding of the problem I need to solve.
Initial research for LearnBox included the following:
I start this page with an extremely useful table called a User Centered Canvas. Send a copy to a client to fill it then fill it yourself. This table is my go to reference during the entire process because it is the perfect reference about what this project is all about. I have a clear understanding of user objectives and business objectives
Next up, user stories:
User Epics and their user stories
EPIC: As a user I want to learn new skills at my own pace
As a user I want to be presented many courses so that my options are not limited.
As a user I want courses that I can pause and restart whenever so that I am not pressured on finishing them right away.
As a user I want a clear structure of the available courses so that I will know where I am on the curriculum
As a full-time employee I want the courses to be split into short digestible lessons so that it will be easier to learn them at the end of the day or during a break at work.
As a full-time employee I want to be assured that what I am learning is valuable so that I use my limited time and energy usefully.
As a full-time employee I want to involve my employer in my learning process so that I know my job will benefit from the courses.
EPIC: As a user I want to know how to advance my career
As a user I want a counselor to help me so that I know I am not taking the wrong decisions.
As a user I want statistics from my the job market so I know that the skills I am learning are not becoming obsolete in the near future.
As a user I want to be part of a thriving community of like-minded people so that I know I am in good company and remain motivated.
Possible entry points:
Press or news item
User flows depending on how they get to website: [what users see / what they do]
Organic search-> [home/sign up] -> [list of course/ enroll to course] -> [pricing table/ chose a membership] -> checkout -> thank you!
Organic search-> [home/sign up] -> [search course/ enroll to course] -> [pricing table/ chose a membership] -> checkout -> thank you!
Direct URL/ long tail SEO -> [pricing table/ chose a membership] -> checkout -> thank you!
I start this process by taking a pen and paper, or by opening a Photoshop document. I have all the variables in mind and now I just have to start putting them on paper. Don’t worry about pixel perfect designs, just make sure that there is a beginning of a concept on that piece of paper. This is only the first step in a long ideation process so leave details behind at the moment and just doodle with the problem you need to solve in mind.
After doodling, try creating a sitemap. I include the doodle so I have a better intuition for the flow. That is the most important aspect of site-mapping, think in terms of flow not pages. How do I make navigating from page to page seamless.
After an initial concept it’s time to test these assumptions.
For this project I decided for both card sorting and tree testing.
If your project is a new website then I advice you use both. If you already have a website you could start with a tree testing.
Card sorting is all about discovery of how the users will sort and name the categories and information. What makes sense for them. This is how I did it for this project.
I wrote the components of the website on cards and sent it to users. I used a recruitment service where I sent this to 50 people who matched the traits of our target user. Here are the cards:
Now, let’s analyze the results.
When analyzing sorting tests there are two types of analysis: statistical and exploratory.
Exploratory analysis answers the “why” of the problem, whereas statistical is all about the numbers.
Let’s look over the results together and create our first taxonomy.
I will first take a look at the category section and try to standardize as much as possible. Basically I am looking for all identical categories or at least 80% agreement and merge them in order to make the data more efficient.
Then, I am going to explore the participant centric analysis to find out which sorting was the most popular. The PCA works as a voting system that shows which sorting was the most popular.
Some important findings:
All the Law courses were grouped under the same category and there was no major disagreement about how to group them.
Some business courses were lumped in together with “Involve your business”, which is a completely different section of the website that connects corporations with the course website. I will keep it as a navigation item to clearly differentiate them.
Some users put the guitar course in the art category while others created a music category. I will do that later in our first ideation of the site’s structure.
After taking into consideration the findings above and many others, I create the first ideation of our sitemap
Are we done testing? … not yet.
I want to test this even further before going into design and development. I will now set up a tree test to prevent any mistakes before starting to design the website.
After uploading the structure of the future website, I need to create tasks for our users. If they reach the part of the website where I intend them to, that means that I did my job right and I get to move on to the next step.
After I launch the test, here are the results:
We nailed it. There was no major surprise or difficulty for any of the 5 users tested. I now have the confidence to start designing and developing.
If there is one important thing to be learned in this whole process is that content is king. Therefore it should come first. Remember that if we design a website or an app without knowing exactly what is going to be there, we are decorating, not designing.
At this point I would talk to the client and create a content strategy. If the copy is not available, I could provide it for them. I will write a copy workflow in the near future, however in this case study let’s imagine that we already have the copy.
A design system is the best way to communicate design ideas. I am going going to create a page with :
I show it to the client to see if they like it. If they approve the choices, I built the first ideation of the website.
With our content ready all I have to do is to design a good layout, and apply the styles that have been already defined.
Don’t forget to design for wait times,completed times, errors and a custom 404.
Check the micro copy! Then, I am going to add some micro-interactions to enhance user delight. I only use them sparingly because each animation must have a function. It must serve a purpose, otherwise it can become a useless distraction.
The next step is taking this to an existing user for an usability test. Statistically, 5 users will point out 85% percent of potential issues so at this point I won’t need more than that.