I was approached by a client to design a service that will help the local population of Azerbaijan study in their native language. The project would include UX research, the design of the company’s brand identity, and the first iteration of the whole digital experience.
DESIGN PROCESS JOURNALThis case study has also been published to Bootcamp publication on Medium. Bootcamp is a part of the UX Collective, the largest Design publication on Medium and they are mainly focused on giving visibility to the best case studies.
READ ON BOOTCAMPInitial Consultation and Survey: Started with a Lean Canvas activity to understand the client's idea and vision. Surveys were conducted to collect both quantitative and qualitative data on user pain points.
Market Analysis: Evaluated competitors based on multiple criteria such as usability, aesthetics, and course experience.
Addressing Pain Points: Used "How Might We" questions to address user challenges, focusing on long-term learning, course value, and community building.
User Personas: Developed user personas, with a focus on those facing language barriers and motivation challenges.
User Journey Mapping: Mapped out user journeys to empathize with users and their experiences on the platform.
User Stories and Prioritization: Created user stories addressing pain points, then grouped and prioritized them for MVP development.
Design Flows and Information Architecture: Developed user flows for key scenarios, and constructed the information architecture for the platform.
Testing: Conducted testing sessions with low-fidelity prototypes, gathering feedback on various platform features.
Design System: Adopted the Atomic Design methodology to create a consistent and flexible design system.
Final Decisions: Opted for original photos over stock images and illustrations based on user feedback.
MVP and Beyond: Although the initial focus was on the MVP, plans were made for future releases, integrating more features based on user feedback.
With the global pandemic and digital shift in online education, a great number of people are looking towards online courses and online education. However, international offerings create a language barrier for some Azerbaijanis who are not advanced enough to take courses in English. Similar course platforms available in the Azerbaijani language have overwhelming user experience and function as a marketplace for courses that don’t offer a clear learning path. This results in many potential users dropping out because of these roadblocks that they face even before they begin their journey.
Maarifli is an online education platform that allows for an easier starting process with guided study paths in various fields in the Azerbaijani language
Considering the scope of this project I decided not to create a separate step for testing. Instead, testing and feedback collection were going to be done almost after each step in a more agile manner. Of course, we planned to have more distinct wireframe testing and hi-fi prototype testing towards the end of the project. I used Design Thinking Framework as a starting point and remixed it a bit. In the end, I divided my design process into 4 major steps.
During our first meeting with the client, we took the opportunity to learn where the idea had come from and dissect the project brief. We discussed other similar services on the market and ran a Lean Canvas activity. Later I surveyed potential users to gather quantitative data on user demographics and prioritize information based on value and relevance. This survey also included open-ended questions to get more qualitative data on user pain points with current solutions.
This showed us that the time is now and losing any time during 2020–2021 might be critical for the business. At this stage, it was clear that we should enter the market with an MVP before it gets too saturated.
I began exploring competitors to familiarize myself with their offerings. I evaluated several features that were considered essential from user surveys and identified which ones Maarifli could capitalize on to gain an advantage over other platforms. I evaluated the competitors by focusing on these criteria:
• Usability for Azerbaijani speaker;
• Consistency and standards;
• Aesthetics and minimal design;
• Payment process;
• Sign up process;
• Course experience and futures;
• Accessibility features.
Based on the survey and research, I identified causes for frustration. Then I used affinity mapping to group the pain points into similar categories on a whiteboard.
This stage brought a different perspective to our thinking and ideation. It was really important to ask meaningful questions at this stage since empty How Might We can route design onto meaningless paths.
How might we...
• Shift focus from one time learning to life long learning?
• Make every course feel special and exclusive?
• Involve instructors to support users throughout the course?
• Help users land a job after taking a course from us?
• Make our certificates valuable for employers?
• Unite all the alumnae and create an experience of belonging?
• Help people create professional connections for the future?
• Maintain motivation through long-term courses?
• Guide users to find their career/learning path?
• Make e-learning social and connected?
• Create an environment where users will motivate each other?
• Follow-up users after finishing our course to make them feel part of our service?
If I had an hour to solve a problem and my life depended on the solution, I would spend the first fifty-five minutes determining the proper question to ask, for once I know the proper question, I could solve the problem in less than five minutes.
Albert Einstein
Aysel is representing the majority of the target audience, which pain points are related to the language barrier, lack of motivation, and pricing. Maryam is representing more specific users who look for courses that cover fields that are connected to the local language or region.
The user journey illustrates a typical trip of taking a new course for Aysel. I created the map to empathize with Aysel and to thoroughly showcase her emotions, thoughts, and actions during this journey.
Creating user stories during these workshops helped us to address all the pain points users have and understand the end-user perspective better. After writing down all the user stories we grouped them into 5 epics: Course, Course Info, Account, Payment, Communication.
The main goal for doing this was to identify where we should start and what will be the first MVP release for Maarifli. We managed to include all the “low hanging fruits” from our matrix and include some nice-to-haves as well. All the other user stories were allocated for future releases.
I considered everything I learned and identified so far and created multiple flows for our main scenarios. I also noted some possible edge cases to address in the upcoming iterations.
After creating initial flows I mapped the information architecture of the platform to gain a better understanding of what will go where and move towards the site map. I used the user flows and information architecture to build a sitemap for the product with views for an administrator and a standard user.
Before moving onto high-fidelity wireframes, I wanted to test some interesting ideas on this level since it would be much easier to iterate at this stage. I would constantly check-in and test the sketches with stakeholders and potential users.
We were considering having the “Learning Path” introduced right on the landing area and have it as an interactive field. However, that would work only in the case of a specific number of fields. That approach would block future scalability of the platform and would show only a limited part of the service. Even if we would manage to solve the business constraints, users were also very confused about this interaction.
I tried to use reusable components as much as I could keeping the scaling and future design system in mind. Besides, the simplicity of wireframes allowed me to quickly test ideas without thinking about UI and details. I created a few variants for the same pages considering the ideas we had from previous steps and the ones that made the past sketching stage.
We got an opportunity to grab real feedback from 12 people and tasks for them to execute while exploring our system, all while they verbally communicated what they were doing, thinking and feeling.
Each user was asked to follow these following tasks:
• Create an account
• Find course content
• Purchase a course
• Visit field page and then purchase a course form that field
• Go to the dashboard and view the course
• Contact the support
• View payment history
• Download files uploaded by instructor
• View notifications
1. On one of our iterations, we added a “Try for free” button that was on the top of the home page and was taking users to the free courses, and later they could have visited Course Info for that particular course. Turns out almost all the users expected to be taken to the Registration Page when clicking Try for free.
2. Users stated that they would like to see all the offered fields right away.
3. Users wanted to see the prices of the courses on the Course Cards in the Course Catalogue.
4. Some of the complaints were that free courses are buried in the course catalog. Users stated that seeing them on the home page would make them more likely to sign up and start from the free ones.
5. Other users stated that a more clear and simple notification system would be more appealing.
6. I was frequently asked what kind of payment can be used. I figured that might be a pain point and the payment options should be highlighted prior to the Payment Page on the Check Out.
7. Search for payments and files was something that was pointed out by many users.
8. In one of our early wireframes, we had this crazy idea of having a virtual assistant that would follow you throughout the home page and will give you some tips and inspirational quotes. Most of the users thought that this future was redundant especially while having a floating chat on the page.
9. The Course Info Page was packed with information but wasn’t inspiring. It was overwhelming for most of the users and some of them even stated that things looked way more complicated than they should be.
10. Users were interested to see what they will get after the course. Certificates, follow-up courses, what type of job they might have after finishing the course.
11. Flow to contact the instructor is confusing and requires extra effort.
The reason I decided to go with Atomic Design for the design system was that the site would have lots of cards, forms, and buttons that are going to be the same throughout the platform and they also should be really good in resizing. It took a while since each element required lots of attention. Even though it was time-consuming, it helped me to understand the relatively new Figma Variants feature much better.
Since this study focuses more on the UX side of the product, you can read more about branding and naming process for this project here.
Initially, we were thinking of using a wide grid that would make the content look very clean, center-aligned, and would leave some space around it. However, when applying the same grid to more specific pages like Course Page and Course Player we faced a critical issue. We couldn’t fit all the needed content horizontally and we noticed a lot of wasted space that can be used by important components as Course Player. We considered trying different grids but none of them worked for both scenarios the way we wanted.
Our solution was to use 2 different grid systems for 2 different types of pages. We divided pages into 2 groups and made sure that both grid systems work solidly together and resize accordingly.
With already created design language and components building the final look of the product was like putting lego blocks together. However, there were still few decisions to be made at this stage.
We tested stock photos, stock illustrations, and as an alternative, we tried to mix them together. The user’s feedback was that they prefer actual photos to illustrations. On top of that, they mentioned that the stock photos look fake. Considering this we made a decision to use only original photos throughout the product even in the initial stages.
Since Maarifli is a new product we wanted to cover all that they offer on the Homepage but still present it in a simple and clean way. We created a narrative where the user would get to know Maarifli’s mission, vision, products and would get something for free.
One of the key pages here was the Field Info Page that covered all the field-related information. On this page, we wanted to help the potential users to choose the course. The key points that were included in this part were:
• What is this field?
• What subfields does it have?
• What are the jobs in this field?
• How much would I get paid?
Personal Dashboard or Personal Cabinet is an all-in-one space that we created for the learners. We designed a calendar for future live courses and created different statuses with notifications so that the users would always be on track.
We went back and forth during this phase and tested each part with the users. Initially, we were planning to have the forum or course-specific Q&A area on a separate page. However, after many iterations and tests with the users, we decided to put it in the same area as the course player and put it under a tab.
Even though we tested the product each step of the way, we understand that the real usage data and the feedback from actual users would uncover many more user stories, bugs, and fixes that we will have to address. We are planning to work closely with users and also track the data using Hotjar to understand what might be improved. We also have many user stories that didn’t make it to the very first MVP release. We plan to review those and the new ones that we will get after the real-life testing of the product. We will have to evaluate them again after the new inputs from the users since the matrix of value and effort might shift and it depends solely on the users. At the same time, we have a future release roadmap that includes more specific user stories related to real-time live courses and live webinars that we plan to add in the near future.
Don’t underestimate the secondary research. This project showed me that even if you are creating a local project it is very useful to understand the global market and tendencies. Try to evaluate similar groups and see what the data shows. Most of the time users would only think in scope of what they see in the local or widespread global market. Usually, that is what they will tell during the interviews or surveys. However, there are a lot of trends that are maybe just starting to take off somewhere which you can introduce to your users and test with them.
This was the first time I applied the testing to each step of the project. This was a very important step I had to take considering the scope of the project. It wasn’t highly organized testing which I would usually do by dedicating a separate time in a project and go very deep in that. I was a mix of Agile testing with some Guerilla testing here and there. At the end of the day, it was a really great experience and I think it saved us a lot of time and allowed us to react quickly and apply changes right away.
It is really important to work as a team. Even if it is a small team like the one that worked on this project and I was the only UX designer. It is really important to get technical feedback from the developers and overall ideation is much more productive when you have the whole team involved.
Designing an entire product like this one for a variety of potential users can be overwhelming, as the number of problems is much higher than when you work on a specific task. However, prioritizing is the key factor here. We spent a lot of time defining our MVP and prioritizing user stories. It is crucial to understand the user needs and constantly talk to them when you are not sure to get it right.
I am incredibly proud of the work we have done here. Thanks for taking the time to see the thought process!
Despite the project not progressing beyond the closed beta due to the decision of the co-founders, I am immensely proud and grateful for the opportunity to be a part of this team. It was an invaluable learning experience for me.
