Arrow icon.
Arrow icon.
Arrow icon.
student trainee center application website
In 2022, I was one of two designers of an application website now used by 100s of users each cohort of a two-year youth development program. In 2024 I made the following redesign to test my skills.
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?
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
Screenshot of the dashboard page.
A reimagined application dashboard
UI panels.Color palette.Application step navigation.
3D models.Buttons.
Design styleguide with selected elements.
• 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 UI screenshot.
Old homepage
Old UI screenshot.
Application introduction page after sign up
Old UI screenshot.
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.
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.
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 page.
• 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 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.