Student Trainee Center Application

timeline

May - Aug 2022
(live version)
 
Oct - Feb 2024
(personal redesign)

team (2022)

Dominik Procházka (me)
Lucie Pudilová
Luboš Jánský
Matyáš Koc
Michal Vaniš
Jakub Šváb

UX/UI designer
UX/UI designer
backend, project co-lead
backend, project co-lead
frontend
frontend

context

what is the student trainee center?

The STC is a 2-year development program run by students for students, affiliated with the educational department of Microsoft in the Czech Republic.

what is the purpose of this website?

It is used by hundreds of candidates each year as the first step of the application process. How pleasent to use it is ultimately affects the number of applicants.

what was my role in this?

I was an STC member between 2021-2023, I worked on this project as a designer in a team with other members in 2022. In 2023, now a design student, I decided to revisit the project and test my skills.

overview

a website built to inspire

Proudly representing the STC brand, the new application website gives the visitor all the motivation and key knowledge they might need to start their new journey towards personal growth.

Screenshot of the new application website homepage, showcasing newly added sections about the program and the application process.

a revised application process

The candidate completes three steps in the application. They are presented in a compact form and have a new progress navigation.

I remade all the input windows to better adhere to proper visual hieararchy and also rethought how progress is presented through the use of a multi-step bar that changes color based on step status.

before and after

custom UI elements

I created new components for the website. I built them on the basis of Fluent UI with some added twists.

Design styleguide with selected elements.

Problem

once upon a time, what was wrong with the old website?

Imagine this. A boy called David is in his first year of high school. A couple of older schoolmates come into his class to share information about an intriguing opportunity. The STC, a program that welcomes all who want to grow and see others grow with them. He thinks "wow this could be great!." He comes home, checks their social media and starts seriously considering applying.

However, he puts it off for a while until the deadline becomes dangerously close, so he finally overcomes his fears and doubts and opens up the website:

off to a boring (and confusing) start

Being honest, the former design was bland (The emoji was a bit creepy too). Also, how would I know what I was signing up for?

the good, the bad...

If I was already convinced enough to apply, I could have found more after signing up, not entirely ideal.

...and the ugly.

What is going on with the navigation now? Clearly, the interface needed some work.

main problems

lack of context

Little to no information is provided about the process and the program.

UX clarity

No marking of required fields and a confusing navigation.

UI design

The spacing, the layout, the hierarchy, the color palette all deserved a new coat.

constraints

working alone

Unlike in the first design, I could not discuss the project with devs or other designers.

limited time

I worked on the redesign alone and in my free time simultaneously with university coursework.

limited resources

I didn't have access to the STC network including the data gathered from the old application.

the challenge

How might we grab the potential candidate's attention and showcase our program through a memorable application website that will represent the brand not only through styling but also a pleasent experience?

why brand consistency matters

based on gathered feedback, a well-designed custom website increases trust in the brand

brand consistency across platforms can increase a companies revenue (candidate number) by 23% - Forbes

81% of consumers say trust in a brand is a deal-breaker or a deciding factor in their purchase decisions (application completion rate) - Edelman’s Trust Barometer

market research

what do the others do?

I went on to explore similar solutions such as onboarding processes on websites and apps, sign up processes, job application websites or even university application websites to see what and how is presented.

A selection of screenshots from websites I explored as part of the market research.

Screenshots from a selection of websites I explored. Credit: Google, AirBNB, Bumble, Microsoft, Duolingo

takeaways from other solutions

progress bar + navigation

Gives the user context and control and as such also a peace of mind leading to a more pleasent experience. Credit: Google, Microsoft

Screenshots from other application website solutions with highlighted progress bars.

giving the user additional context

Both Google's Apprenticeship and Microsoft's Learn Student Ambassadors programs' websites give the user both information about their respective programs but also a direct link to apply. Credit: Google, Microsoft

Screenshots from Google and Microsoft's websites showing their educational programs for students.

visual design

fluent ui "stc-fied"

I designed a customized version of Microsoft's Fluent UI design system. New UI elements, an STC-esque color palette, and playful 3D models made with Spline...

New application website styleguide including input windows, buttons, colors, 3D illustrations and navigation.

A selection of components used in the new design

problem solving

taking it step by step

The whole process is quite straightforward. The user goes through three steps after which they get to a dashboard with options to edit, delete, or log out of the application. However, some parts required more thought and consideration...

Application website information architecture.

Application website user flow

decision 1: how do we present the application steps?

I started by dividing the steps into substeps which I thought would make the process more digestable, however in favor of easy navigation and revisions, I decided to go with a compact option.

compact

+ all inputs in one glance
+ quick editing

granular

+ more digestable
- takes a lot of clicks

decision 2: how do we structure the application step summary?

Some users have given feedback about not being able to see what is missing when completing the application on the live version. I decided to add the option to end the steps by providing an editable summary.

simple

+ minimal number of clicks
+ quick editing in the summary

modular

+ more compact, less clutter
- takes the user to another page

decision 3: how do we welcome the user in the first place?

The hero section is almost like the cover of a book. You should not judge the website by its hero section but most of us do it anyway.

"stairs to success"

The final solution presents the website and the program itself with a clear metaphore which is emphasized by motivational title.

selection of other iterations

final result

how did it turn out?

before and after

Screenshot of the essay application step.

Screenshot of the dashboard the user sees after going through all the application steps.

reflection

so, what of it?

Even though I worked on this project for the second time, I really enjoyed it. I wish however I had the chance to bring the design to life, see it being used and gather feedback from users have some real data to work with to further iterate on the design.

learnings

- designing and managing a visual styleguide
‍
- proper application of visual hierarchy

- consistent spacing and sizing of elements

- using and managing components and autolayout

what would I do next?

- I would gather feedback from users on my new design. Specifically, I would test the effectiveness of my design assumptions.
‍
- I would work with the STC on how we could develop a complete cohesive visual language across all of the program's communication and how we could systematically change the candidate to member pipeline
‍
- I would discuss the design with developers to gain further technical feedback and see how the the development could be carried out.
‍
- I would learn and apply motion design skills and enhance the interactions on the website and elevate the experience even further.