A website that REALLY sells – design of an e-learning platform for Kursy Lean
After 5 sprints dedicated to research (you can read more about it here), the project was handed over to our designer.
We always organize work to allow time for presenting the research results to a designer – we usually reserve about half a sprint for this. We organize an internal kick-off meeting, make a careful analysis and discuss the goals for the next phase of the project.
This time was no different. Paweł, who was responsible for the graphic design, analyzed all documentation thoroughly. He started work with ready ideas and solutions. He was also aware of the way the portal users think, the challenges they face, and the needs they want to satisfy using our client’s offer.
In the case of this project, apart from the recommendations elaborated in the research phase, our designer relied on the previous website design and the data on user interaction with this website (obtained thanks to properly configured analytics in Google Analytics and heat maps in hotjar.com).
Ultimately, the analysis, along with the research findings, proved essential to achieving the results the client desired:
Sprint 5 – UX design – how to “WOW” a user
UX is everything that a user experiences when interacting with a portal or application. The design for Kursy Lean was to impress and “WOW” the users, which is why we focused on the following elements:
To ensure that all elements are polished and consistent, we always start with mock-ups (sometimes referred to as wireframes). They are the “sketches” of a target website used to develop the initial structure of the site, the content, and in more detailed mock-ups – also the user experience. In a workshop setting, the first drafts are often made on a piece of paper, but in the case of this project – due to its sophistication and previous research work – Paweł used Figma from the start.
There are two types of mock-ups:
- A Lo-fi mock-up is not very detailed. It is usually created in the initial phase of design and features the most basic and essential elements of a given screen.
- A hi-fi mock-up is characterized by a high level of detail. It is usually created based on the previously prepared lo-fi mock-up and is very close to the final version of a product.
In Kursy Lean project, we decided to go for a hybrid option. We commenced with very general wireframes prepared in professional software, Figma, which allowed for easy extension and modification of the design. The mock-ups were refined as the work progressed, in accordance with the agile approach. It should be emphasized that the client cooperated with us every step of the way. Without their involvement, it would not have been possible to realize such a successful project.
Since the individual elements of the interface required different focus, we wanted to devote one hundred percent of our energy and attention to whatever needed it most at a given stage. The pre-mapped challenges (arranged from most to least demanding) determined the sequence of activities during the UX design.
Example? Here’s one. Based on research, we knew how important it was to focus our attention on the path the user takes from entering the website to purchasing a course. Therefore, building an intuitive and transparent shopping flow was a top priority and this is what the design team focused on at the very beginning. Later, we expanded the design by incorporating details and additional elements.
To justify our approach, let us answer the question: “Why do we start with mock-ups instead of designing the final version right away?”
First of all, creating a mock-up takes much less time than preparing the final design of a product. A well-designed mock-up allows for much faster and dynamic work on the final design later on. Implementing changes on “more general” screens is simpler, faster, and therefore better suited to an agile workflow.
Additionally, in the mock-up phase, the project team (consisting of a designer and a person from the client’s side) can focus on designing the interaction between a user and the system. In the initial stages of a project, things like colors, fonts, and images are less important. Too much focus on purely visual matters can distort the bigger picture.
UX design is an iterative process based on constant communication with the client. This means that many design decisions need to be made together. A designer prepares several proposals, experiments, and looks for the best solution. A client verifies these recommendations based on their own experience and knowledge of their audience. Openness and mutual trust are of great importance at this stage. We were lucky to have both.
After the first two weeks, we had mock-ups and the idea on how to turn them into the final design so we proceeded to UI design, i.e. the interface, which was later handed over to the developers for implementation.
Sprints 6 and 7 – UI design – the final design of the portal
According to the rule adopted by Project: People, both the initial mock-ups and the final designs of portals or applications (that is UI) are realized by the same Product Designer. Broad competencies and awareness of different perspectives in designing a new digital product allow us to save time and improve quality. This time was no different.
Already at the stage of UX design, Paweł considered possible solutions he could apply in the final UI design. This made work on UI design very quick (considering how complicated the process was).
The stages in these two sprints were planned according to the commonly accepted standards and consisted of:
- homepage design,
- verification of the chosen direction,
- corrections to the design,
- creation of all remaining subpages,
- development of mobile versions (according to mobile-first approach).
“Holistic approach to the project” is what often appears in feedback we get from our clients. We’re proud of that, and we’re doing our best to ensure that this reputation sticks with Project: People well into the future. How do we do that? In KursyLean.pl project, apart from designing a new website,
- we made recommendations for the course covers and other images used on the website.
During the research with users, it turned out that the materials the company previously used to promote the courses raised doubts among potential recipients.
We suggested that the photos feature people performing the activities related to the course, or objects associated with the subject matter.
We also advised that the color scheme/color temperature of the graphic elements should be matched to the level of the course so that the user gets additional information on the level of proficiency.
Apart from the recommendations concerning the new courses, we prepared materials for the existing products.
- Preparing the project for implementation
Our previous experience with developers responsible for implementation helped us make a “dev-friendly” design. We made sure that all elements were described and ready to use. The same approach was applied to all issues related to the targeted behavior of the portal: the look of the menu, what happens after clicking a specific element, etc.
Due to the lack of dedicated internal resources, it was important for the client that they did not have to manage the implementation process.
Colors used – initially the client’s color scheme; later changed to more subdued colors. Justification: color psychology.
Sprint 8 – Style Guide – the key to visual consistency
Achieving visual consistency requires a lot of decisions and consequent implementation of those decisions. It may seem like a piece of cake, but in a world where new ideas pop up every minute, such a firm approach is harder than sticking to a diet.
A Style Guide can be a very useful tool. It is a set of guidelines that indicate how to use the elements of visual identity.
This is especially important for projects that are still alive. KursyLean.pl is undoubtedly evolving all the time – new courses are added to the platform, the company organizes actions promoting its digital products. It all requires new materials.
That’s why we spent the last sprint preparing a simple Style Guide, which included:
- color rules
- typography rules (font type and size, rules for bold or italics)
- rules for margins and white space in graphic materials
- rules for shadows and filleting
- good practices, the so-called “dos and don’ts”
- examples of materials that can be reused by the client
Although there was no need to create an elaborate document like in a multinational corporation, the client refers to these rules when creating new graphic materials that can be admired on their website or social media.
Summary – the e-learning platform is the best salesperson who never sleeps, never complains, and always brings its A-game.
It was undoubtedly an intensive time: 4 sprints full of challenges and a newly created platform, 4 weeks of lively communication with the client, hours of video conferences, gallons of coffee, and after a few months – the results that give us goosebumps.
Did all the effort pay off? It certainly did! What is the client’s opinion of the project?
Through collaborative discussions and communication at a very high level, we were able to come up with the right solutions. We feel that by doing so, our website has been aligned with both our audience and our business model.
Case study isn't enough?
Would you like to learn about the whole process and how we could carry it out in your organization?