Dark Mode Design for University Admissions
My Role: Solo designer
Timeline: Jun 2023 - Aug 2023
Deliverables: UI
Tools: Sketch, Jira, Confluence
Team: Worked within a design team and discussed with stakeholders
ITS enhances higher education and research in Sweden by developing, managing, and operating IT systems for universities and colleges. For this project, I created a darkmode version of their University Admissions website.
01
Problem
ITS develops and manages IT systems that support higher education and research in Sweden. For this project, I was tasked with designing a dark mode version of the University Admissions website.
The challenge was to translate the existing light mode design into dark mode while:
Meeting WCAG accessibility standards
Maintaining a clear and usable experience
Staying consistent with the brand identity
02
Research
I explored best practices for dark mode design, focusing on how color, contrast, and hierarchy affect usability.
Key Insights
Color use: Dark mode works best with muted tones and subtle color accents. I avoided translating every color directly and instead adjusted the brand’s blue to a softer, lighter tone that passed WCAG contrast requirements.
Opacity for hierarchy: To reduce eyestrain, text opacity is often adjusted:
87% for high-emphasis text
60% for medium emphasis
38% for disabled text
I used these as a baseline, refining them to balance accessibility with brand clarity.
03
Concept Development
I iterated on several versions, experimenting with shades of black, gray, and brand accents.
The final concept featured:
A calmer dark palette with subtle blue highlights
Clear visual hierarchy supported by contrast and opacity
A design that felt softer and less straining on the eyes while still consistent with the University Admissions brand
04
Outcome & Takeaways
The dark mode concept is prepared for further usability testing and validation before implementation. The design also supports key user flows, such as:
Marking courses of interest
Adding/removing courses from the planner
Managing and prioritizing selections in “My Selection”
What I Learned
Clear titles make complex tools easier to use — vague ones increase cognitive load
Overloading visual elements with too much functionality can confuse users
Simplifying features (like the course timeline) improved usability and clarity
Aligning new design patterns with the existing system builds user familiarity and trust
This project sharpened my skills in balancing accessibility, brand identity, and user comfort when designing for dark mode.
