Arrow icon.
Arrow icon.
Arrow icon.
| student trainee center application website
I was one of two designers of an application website for a student-led organization in 2022, which is now used by 100s of users each cohort. In 2024 I made the following redesign.
web app
STC application website mockup.
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
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.
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.
UI elements.
UI panels.Color palette.Application step navigation.
3D models.Buttons.
Design styleguide with selected elements.
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?
Old UI screenshot.
Old UI screenshot.
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.
Old UI screenshot.
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.
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.
Screenshot of the compact version of the step process.
+ all inputs in one glance
+ quick editing
+ 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.
+ minimal number of clicks
+ quick editing in the summary
Screenshot of the modular version of the step summary.
+ 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"
Homepage hero section screenshot.
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
Old UI screenshot.Homepage hero section screenshot.
Old UI screenshot.
Old UI screenshot.Screenshot of the essay application step.
Screenshot of the old dashboard page.Screenshot of the dashboard the user sees after going through all the application steps.
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.

- 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.