soapbox platform.

During my study I had to do internship for a period of 5 months, it was hard to find internship during lockdown but after half a year of searching I succeeded to find one. there was a vacancy open for a UI/UX designer intern at Soapbox which I applied for, luckily I got hired which was right on time because a few days after the new school year stared. I was hired and my main job was to design an advanced platform for the which would be one of the biggest projects of the company at the time.

Tools used Illustrator Invision Photoshop Sketch

Client
Soapbox

Year
2020-2021

Important during the process:

  • The side for participants and for creators/moderators must be separate

  • Both younger and older users must be able to work with the platform

  • Because of international students and companies the website must be in english

  • Design according to the visual identity of the company

  • Work mainly remotely with colleagues (due to covid)

The website was supposed to be a platform where students, companies and schools could post explanations about an issue they want a solution for, these parties must work hand in hand. The first step was to understand what the platform is about, what is the core and the expected outcome. The plans to create this platform were already there but nothing was visualised yet, I was the first one who would start with this. Once I was informed I created a preliminary wireflow so I had a good idea of which pages were all included. As I expected during the process more pages got added, in the end I had a prototype that contain over 50 pages.

When I got informed and everything was clear I carefully started to design a first version of the homepage, I showed this to my supervisor who in his turn shared it with the founders of the company and the two gentlemen from IT who would work on it at a later stage. The feedback was positive and they asked if I wanted to design the other pages as well, which I did and on top of that I made a document. This document must help others and especially the developers to understand what I designed and what each thing on every page means or does, I also made a clickable prototype out of the pages I had at the time so it's clear how they are a connected. I did this because my supervisor and I had to present this to all colleagues of the company, eventually I also had to hand over my work to IT and in order for them to understand this would be helpful. 

A few pages of the documentation that explain the working of each page

*Click on the images to get a better view

The company was very satisfied with the work I delivered so far and kept on going like this. After the first presentation I received useful feedback and many compliments, I started to process the feedback right after . Apart from the feedback I received, a part still had to be designed, the students, schools and companies can participate and/or create challenges. As the creator of a challenge you have access to certain features that a participant does not have, this must be designed. It is important that it is user-friendly and everyone can understand this.

A student in most cases will be a bit younger and will be very comfortable with websites and apps designed these days, but middle-aged teachers and employees from companies may not, for this reason it should be a simple system. It must be designed in a very forward way so people from all sorts of age ranges can find their way trough the platform without any problem. Whilst working on the platform the company presented and started working with the new visual identity, I had to adjust my design which slowed me down a bit.

Result

This is the dashboard that creators and moderators will see, from here they can do all sorts of things to the detailpage of a challenge. For example the creators/moderators are able to change texts, allow participants, view submissions from assessments and so on. 

Within the dashboard there are three different plans, each with different features, these are useful for the experience of the challenges. Creators (which are companies most likely) can decide wether they want to purchase a plan, it will make hosting challenges easier. In the example you can see that extra features from other plans are inactive but the user can get info on what the extra features exactly are.

At the very end the company was very happy with the work I delivered, It was a different experience because for the majority of the internship I worked from home due to covid. Luckily with all tools we have access to these days it's possible to still communicate by doing video calls. The development department was happy because I have knowledge of HTML/CSS and whenever we had a call I was able to discuss about things such as H1, H2, H3, I gave them font sizes in EM rather than PX and more. One of the developers even insisted in having a call with the head of design and me one week after I finished internship. He felt like form now on this is the way to pass on work from design to development department. My teacher from school was very happy with my way of working, behaviour and improvement during this period and I scored 9 point out of 10 for this internship.