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?

It's 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's used by 100s 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, I revisited the project to improve it and test my skills.

• 2024 redesign highlights

a refined homepage with key information

Animated hero section

Screenshot of the testimonial section on the homepage.

Alumni testimonial section

Screenshot of the STC program information section on the homepage.

STC program summary

Screenshot of the application process section on the homepage.

Application process overview

a quick and easy application process

Selection of custom UI elements derived from Fluent UI.

FluentUI-derived custom elements

A reimagined application dashboard

Design styleguide with selected elements.

Problem

• 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:

Old homepage

Application introduction page after sign up

First application step after introduction

main problems

- lack of context

Little to no information is provided about the application or the program.

- UX clarity

The navigation through the application is confusing, progress is not indicated too.

- UI design

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

constraints

working alone

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

short on time

I worked on the redesign alone and in my free evenings during my first university semesters.

limited resources

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

the challenge

How might we create an attractive application website which would encourage potential candidates to apply and provide them with all the information they need in one place whilst improving on the user experience and visuals?

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 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 newly created elements

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.

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 next?

- gather feedback from users on my new design. Specifically, I would test the effectiveness of my design assumptions.
‍
- 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
‍
- discuss the design with developers to gain further technical feedback and see how the the development could be carried out.
‍
- learn and apply motion design skills and enhance the interactions on the website and elevate the experience even further.