How to build an MVP for a complex online platform.

In three months my team build a working, front-end-ready MVP prototype for an international platform for students. Course browser, application forms, complimentary website – everything was ready for development.

Read time: 15 minutes.

Sensitive data and business solutions were removed from that case study article. This document has been created for UX portfolio purposes only.

Overview

Between December 2017 and March 2018 I’ve been hired as a Lead UX for Krakow based Polish-Australian startup called MeStudent.

Timeframe

2017 – 2018

Role

Lead UX

Deliverables

Prototype, Website, Documentation

Introduction

The idea behind MYS was noble and just. Sending young adventurous people from all around the world to Australian courses/colleges and universities. All done really easily via our online platform. To animate a community there was also a social network built around the core business.

That’s for the theory.

Unfortunately, due to complexity of the project and lots of law restrictions, MeStudent homepage, application platform, and social network needed improvements.

My goal

My goal for the next three months was to create a reasonable MVP prototype for all three pillars of the company – homepage, application platform and social network. Due to tight deadlines we excluded education-provider platform and focused on the client-side only.
Fortunately, I was assigned to lead MS’s small team of Junior Designers who were invaluably helpful during that three month rush. We didn’t focus on amazing visual design but strictly on business model, information architecture and working prototype for the MVP.

Challenges

The company was on the very beginning of it’s quest to greatness with many questions to answer, problems to solve and risks to take. 

The main reason for that was a very complicated education/immigration law in both Australia and Poland. A part of the process was screening, applying for an Australian visa, and then applying for a school. Merging all that in one short and friendly form was quite a challenge!

Team setup

Luckily, both of my Juniors were smart so I could divide work between the three of us. One of them was really efficient with Webflow as a prototyping tool. The second one was an engineer with a very good reason-driven and logical thinking which was extremely useful during the ideation process.

I tried to utilize their talents with a proper division of tasks. That is how we managed to push the whole project so far in such a short time.

Research

The main part of the research phase was to establish what data we needed to gather from users during application process, and how to approach Australian visa application for students from all around the world. We spent dozens of hours on Australian .gov pages and calling different offices in search for much needed answers.

The next step was to find a universal way for students to apply for schools (universities, summer courses, and much more). It’s worth mentioning that each school has a different application form, different procedures, requirements, and different channels of communication.

Fortunately, I was given an access to literally tons of papers, documents, and applications which allowed me and my team to shape the MVP solution for all these crazy requirements.

Competitive analysis

We didn’t have too many competitors, to be honest, as we were pioneering the field. But we managed to gather some that offered similar services, though served differently. We went through their infrastructure very thoroughly.
We found some good practices, great ideas and tried to improve their models to later be implemented in our system. Our research went deep enough to schedule phone demos so we could ask all kinds of questions to get to the very core of their modus operandi.

The outcome of those actions was a list of features which we wanted to add to our system or remove from it — mostly remove. Each design decision was followed with a quite strong argumentation.

Google Analytics​

We were lucky enough to have a skilled GA guy among MS employees. After few short chats we were provided with quite serious report on google analytics user data. We were able to pinpoint some really interesting facts about our users.

That’s why we decided to work on new homepage and platform simultaneously since they were both equally crucial to the well-being of the company.

Interviews

Definitely the most rewarding part of the research was talking to students from all over the world via Skype and other channels to see if they needed a service such as MS and how they wanted it served.

We discovered what drived them and what held them back. Those interviews gave us a great deal of knowledge on how to build our platform.

Research deliverables

Analysis Report, Personas, User Journeys​

Ideation

Site Map & User Flows​

We used the knowledge from the previous steps of our UX process and applied it to our product, keeping in touch with business restrains, thus creating the first site map for the application platform and social district.

We managed to distinguish two main groups of our users: the students and the education providers. Each had a different set of functionalities. Due to the lack of time, we decided to focus primarily on the students.
We also created separate districts within the student’s platform: Application and Social. The active users were driven by one of the two – community interactions or the will to apply for a course.
We set up proper user journeys for all core actions and behaviors.

We wanted to engage our users gradually. From a quick and easy signup to a demanding application form. We tried to remove any obstacles to make the whole MS environment stress-free.

My goal was to create as few screens as possible. To make it really brief to start an application process. To allow for a quick switch between social and application panels. No hesitations, very low learning curve.

I am not going to discuss the social platform as well as some of the features of the application process due to the sensitive data regulations.

Solutions & Information Architecture​

I am one of those minimalistic and rigorous designers when it comes to features and number of elements visible on the screen. I am always aiming towards absolute simplicity as the ultimate form of sophistication. I also have the highest regard for Jakob’s law which states:

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

The list is long but what follows are some examples of how I approached information architecture for this project.

Homepage

The Index page was designed to present MS’s business value, encourage to register, wake up imagination, answer most crucial questions, and connect with community. Sections were ordered to explain what is MS, how simple it works, why it’s better than competitors, why it’s for you, who is already in, who supports it, and so on. It wasn’t a design masterpiece but we were in rush and could afford more of an MVP version than fully polished page.

Mestudent Case Study Screenshot
The number of clicks and required actions to register and join community was decreased to a bare minimum.
We created a special section with an open letter to parents as they were the main funding source for their kids’ education abroad.

We chose a proper language style in between official language and youth slang to emphasize that MS was invented and ran by young passionate students from all around the world, just like our customers.

We bolded out most crucial features, benefits, and cool factors.

We put a strong pressure on social features of the homepage such as blog, stories, testimonials, and vlogs of how other students got to Australia with MS. We pushed to show real people, real faces and to allow contact with them.
To make our platform even more engaging, we created “Regional Brand Ambassadors”. These were our previous customers who now work for MS and help newbies apply for courses and education in Australia.
We decided to create an explainer video and place it on the first section of the homepage as this is a really visual and digestible medium for youngsters.

Platform

The navbar divided the whole platform into social section and application section. Of course, the social section is full of CTA buttons encouraging to apply for courses.

Smart search showed hints while typing in the field. It aggregated data from both social and application sections.

The alerts module worked also for both social and application. It informed you about the progress of your application as well as the discussions you had on social platform.

Sidebar was set to work as contextual menu. Its content differs depending on section and subpage you currently are browsing.
For students who might had any trouble browsing for their dream course, we created a course wizard. You could find your dream education just by answering few simple questions.
Due to high amount of data being displayed on the screen, we decided to primarily use card-based layout. However, we also added a grid view for students who prefer tabular interfaces.
The System Status was displayed throughout all of the user journeys. Users were informed about every event and situation on both social and application sections and could easily grasp what was going on at any given moment.
We reduced number of form fields to absolute minimum allowed by the Australian law, government procedures, and other application regulations and boundaries. To make it more digestible, we managed to divide it into logical chunks such as profile data, application details, enrollment form, and so on. The whole process was much smoother and it felt like a breeze.

Many tooltips and hints were added to parts of the application form where it could be unclear for the students to maximize the clarity of the process.

To easily keep track of your favourite courses you could create and manage your “Favourites List”.

Ideation deliverables

Wireframes

Design

Hi-fi prototype

After our wireframes had been initially accepted by the management, I was asked to work on more detailed clickable prototype. The obvious choice for that kind of project was a tool called Webflow which allows us to quickly and precisely create css classes, animations, and html markup that are all very useful in later stages of frontend development.

Our prototype was a low fidelity one, so both visual design and interactions were raw. But it was fairly close to a working MVP.

There is no need to go through all of the features, ideas, and solutions that I applied there. Just see it for yourself. Here is a link to that prototype: http://mestudent.webflow.io/.

You are more than welcome to click through it, no need to fill in the fields

Visual design

Never happened, sadly. That is where my cooperation with MeStudent ended.

Design deliverables

Hi-fi prototype

Bittersweet epilogue

Unfortunately, I didn’t get the opportunity to work on the final looks for that project. MeStudent had to move their headquarters to their investor’s home country – Australia. They shut down Polish branch as I write this article. I hope to see them doing well and looking good any day soon. Good luck to the new MS Australian team. Fingers crossed for your success!

Bittersweet epilogue

As a bonus – here is a daily skype review of one of the modules we built, presented by my team:

Thank you!

Newsletter

Want to see what’up with us?

Want to read more?

Here are more stories about the value of User Experience in the digital business.

Improving Conversion Rate for E-Commerce

Audit and CRO for quite a new shoe shop online. Really great opportunity to help improve E-commerce on their first steps in business.

How to design a page for people who design pages?

We consulted and designed a website for our sister company. It took us only one week to make it happen.

Get in touch

Hi, I’m Mat. I’m the listener type. Why don’t we talk about your product?