Personal project Portfolio
Date: December 2017 - April 2018
Platform: desktop, tablet, mobile

Challenge:

Build a website that provides learners seamless access to science courses.

My contribution:

  • Defining the problem
  • Conducting research
  • Building personas
  • Creating stories and scenarios
  • Creating user journey map
  • Low-fidelity wireframes
  • High-fidelity prototypes
  • Usability testing
  • Setting business model

Project award (2019)

As the leader of e-nauki.pl project, I contributed to the fact that the website reached the finals of the "Startupper of the year by Total" contest. By the choice of the jury, e-nauki.pl was among the best projects offering a practical solution to problems related to public health, safety, education, accessibility or other ailments affecting local communities.

The photo of the Total Challenge jury
Photo 1. Press release about the finalists of Startupper of the year 2018-2019 by Total Challenge. Credit: Total Polska

Introduction

Origin of the website

I can't even imagine life without learning. In 2016 I launched a website called e-logika with my video courses about logic. I noticed that Polish students love to learn online. Therefore I've decided to build from scratch a new site dedicated to online learning called e-nauki.

What is the website about?

E-nauki.pl website is an online platform that offers many video courses in mathematics, psychology, economy, philosophy, philology, management, logistics, and other scientific disciplines created by academic researchers and professionals in a certain field.

The scheme that shows the origins of the e-nauki website
Figure 1. The scheme that shows the origins of the "e-nauki" website

Defining the problem

Context

Online learning has been quite popular in recent years. There are a couple of websites that provide online courses on the Polish market. Platforms like Eduweb or Strefa Kursow are dedicated mainly to people from the IT industry. Beyond some exceptions like eTutor offering language courses, there are no websites that provide science courses for Polish learners. Udemy has been on the Polish market for several years. They offer various courses, including scientific ones, but mainly in the English language.

Problem to solve

There are no online learning websites that provide high-quality science courses for Polish-speaking learners. Therefore they don't have an opportunity to learn online from academic researchers and other professionals in specific fields.

Goals of the website

Provide a well-crafted website aimed at good visual appealing and functionality for the learners.

Who are the users of the site?

Polish-speaking users who want to get or improve their knowledge in a particular scientific discipline, mainly: high school students, university students, and adult learners.

Conducting research

Interviews (Photo 2)

After setting goals and objectives, I conducted interviews among five volunteers who were selected based on predefined personas. The qualitative research method is crucial to understand why the users behave in a certain way and also gives input data for both the analysis and the design stage.

Surveys (Photo 3)

I also conducted survey research among 50 students of the University of Gdansk in order to gather quantitative data about emotions that people have during learning. Knowledge about it has an impact on many project decisions like appropriate colors or the right font.

Insights

Based on interviews (Figure 2)

I was able to categorize the interview feedback into three different themes with some insights:

  • Accessibility - small devices cause problems with interactions with the site;
  • UI Design - too complicated layout discourages users from browsing the site;
  • Communication - when in doubt they don’t have fast support and don’t know how to accomplish their tasks.

Based on surveys (Figure 3)

The most common four emotions among 50 survey participants are as follows:

  • Apprehension (26%)
  • Boredom (22%)
  • Annoyance (16%)
  • Vigilance (14%)
  • Other emotions (22%)

Creating personas

Representation of key audience

I created personas based on observations and research to synthesize information about the users. It allowed me to indicate their goals and pain points, which are crucial to set the proper functionalities of the site in the next step.

The first persona
Figure 4. The first persona
The second persona
Figure 5. The second persona
The third persona
Figure 6. The third persona

Creating stories

What personas want to tell me?

I wrote user stories to point at what a certain user persona needs and why. Based on these short and descriptive sentences told from the perspective of the user, I was able to indicate the core features of the site.

The user stories and the design implications
Figure 7. The user stories and the design implications

Creating scenarios

The sequence of actions and events

Scenarios are a great way to show interactions between users and a system in their specific context. They take user stories to a higher level by adding to the context and users' behaviors. I created two scenarios that present, in my opinion, the most common interactions between an app and users.

The first scenario that shows the course purchase process
Figure 8. The first scenario that shows the course purchase process
The second scenario that shows asking a question to the author of the course
Figure 9. The second scenario that shows asking a question to the author of the course

Creating Journey Map

The holistic view of the user experience

I created a journey map to show the main user phases towards buying a product on the site. Thanks to journey mapping, I was able to indicate users' thoughts, emotions, and problems during each stage of the process.

The user journey map
Figure 10. The user journey map. The red dots indicate the main identified
user problems that can occur during the journey

Creating a sitemap

The first step of the design process

After the analysis, I wanted to ensure that content is in places that users would expect to find it. Therefore I created a sitemap, which is a hierarchical diagram showing the structure of the site.

The sitemap
Figure 11. The sitemap that shows the information organization

Low-fidelity wireframes

Don’t make me think too much

It's crucial to ensure that site visitors would be involved in the content and would make some actions. After a lot of consideration, I decided to choose Version 2 (Fig. 13) of the first section on the main page for a couple of reasons. Users tend to spend much more time on the left half of the page versus on the right half.

In version 2, they can see immediately the name of the featured course at the top and some new courses below. They can understand what the site is about without reading and thinking too much. Additionally, when we limited CTA to one, they have fewer ways to act, and the probability that they click it is bigger.

The first version of the landing page
Figure 12. The first version of the landing page
The second version of the landing page
Figure 13. The second version of the landing page

Reduce the user journey steps

Thanks to Scenario 1 and User Journey Map I am aware that the process of buying the product is relatively tricky, and there are many points when the user might lose interaction with the site. Therefore I decided to reduce the number of steps to five. In this concept, registration is integrated with the buying process. The main steps to buy a product are as follows:

  1. Go to the site with all courses,
  2. Select the rights course,
  3. Click the button "Buy it now,"
  4. Confirm the choice in the shopping cart,
  5. Fill the form, and click the "Pay" button.

(Notice that users don’t need to confirm registration by email, and they don't lose interaction with the site)

The wireframes that show the product purchase process
Figure 14. The Wireframes show the product purchase process that implements the first scenario with Kamila

High-fidelity prototype

Representation of key audience

It was challenging to provide a high-fidelity prototype based on key visual and tailored to users' needs and expectations. I created all visual assets except some course thumbnails, which were carefully selected and bought at Envato. Based on the prototype, the front-end web developer deployed the project to HTML, CSS, and JavaScript.

The desktop version of the homepage
Figure 15. The desktop version of the homepage
The mobile version of the homepage
Figure 16. The mobile version of the homepage
The desktop version of the course page
Figure 17. The desktop version of the course page
The mobile version of the course page
Figure 18. The mobile version of the course page

Usability testing

We want to know that it works

Only usability tests are the way to check that you made appropriate decisions during the UX design process. Therefore I conducted usability tests among five voluntary participants who I asked to perform five tasks on the high-fidelity prototype in InVision.

Insights after tests

In general, the prototype works well but should work better. Some users had sorting issues. The core of the problem is due to the fact that not everyone knows the taxonomy of scientific disciplines. Another problem (ability to see a free lesson) was related to the design and has been corrected.

The tasks to perform during the usability tests
Figure 19. The tasks to perform during the usability tests

Project outcome

My assessment of the project

Sometimes you must be both a designer and a creative director at the same time. As a UX designer, I can say that I did my best leveraging my set of various skills from UX research to visual design. As a creative director, I am aware that the layout could be more detailed and sophisticated. However, the most important thing is that users like the site and use it every day (Figure 21). Therefore I am happy that I achieved my main goal. I delivered a website that helps people to learn.

Achievements and metrics (Figure 21)

  • Finalist of the Startupper of the year 2018-2019 by Total Polska
  • Over 9700 views in the first 2 months
  • Social sharing validates user engagement, content quality, and credibility

General insights

Overwhelming waterfall methodology

The project was built based on the waterfall model, which caused many problems during the implementation stage. Having many pages of documentation and all visual assets, we weren't able to make some changes because they were forcing other significant changes. Being aware of the constraints of the waterfall model, I realized that my process of work should be as agile as possible. That is why I started to focus on Lean UX and Agile methodology.

Better know something than nothing

It sounds like an obvious statement from the motivation guru's book. However, in this context, it makes sense. Although I learned basics HTML and CSS a couple of years ago, I never expected that some knowledge about JavaScript and preprocessors like SASS could be so valuable for UX designers. Thanks to that, you can build a more consistent layout based on components and find the right solution without uncertainty that it is impossible to implement. Because of that, I started to learn much more about both front-end and back-end technology.

The photo of the waterfall
Figure 22. The waterfall model isn't the right approach to complex digital products and services. Credit: Ian Armstrong.

I want to say - Thank you!

There are many people without whom the project wouldn't have been created. First of all, I would like to say thank you to the first course authors who trusted me as a man without a big team, but with a clear vision:

  • Agata Bijak
  • Monika Frankowska
  • Karolina Jekielek
  • Malgorzata Komisarska, Ph.D.
  • Katarzyna Muszynska
  • Joanna Oleskow-Szlapka, Ph.D.
  • Arkadiusz Wlodarczyk
  • Natalia Rusin-Zielinska

The research couldn't have been possible without voluntaries, whom I also want to say thank you. Last but not least, the people thanks to whom the logo was created, and all high-fidelity prototypes have been implemented to code:

  • Jakub Rybczynski - Graphic Designer (creator of the logo)
  • Pawel Wrobel - Full-Stack Web Developer