Student work on the left. My redesign on the right.
Demonstrating UI/UX Design for Students
Here are some UI/UX examples from my work at Career Foundry that show how I demonstrate design thinking concepts and critique work within the parameters of a remote teacher-student relationship. By redesigning student screens, I can show core UI principles within the framework of their own concepts and ideas. This contextual technique helps students quickly grasp abstract design theories by making them relatable and familiar.
Sending a Message: Focus on the Primary Action
My student had too much going on with her messaging screen. I redesigned her screen to show her how she could remove much of what was on the page to improve clarity and highlight the primary function of the page. Reverting back to light mode also improved contrast and accessibility, reducing the cognitive load.
Key Concepts Demonstrated:
- Clarity
- Primary action
- Minimalism
- Reduction of cognitive load
- Direct manipulation
Student work on the left. My redesign on the right.
Compelling Onboarding: Strong Primary Action and Text Clarity
My student's design lacked clarity and had an incorrect visual hierarchy. I redesigned her tap target for the primary action, to be at the top of the visual hierarchy by increasing the size and changing the font and color. I increased the overall clarity with different font and color choices and removed non-functional design elements.
Key Concepts Demonstrated:
- Clarity
- Primary action
- Strong visual hierarchy
- Reduction of cognitive load
- Providing a natural next step
Student work on the left. My redesign on the right.
Aesthetics and Color Theory for Apps with Dual-Modality
My student asked for some UI pointers and was curious about how dark modes are implemented. I redesigned the screen within his color palette. I demonstrated that highlighting with color, rather than overusing it, can increase readability. I also wanted to show him how good design can be invisible using restraint and subtlety. Last, I wanted to show him that it's best to design a switch between light and dark mode with only two changes: background color and text color.
Key Concepts Demonstrated:
- Great Design is Invisible
- Clarity
- Reduction of Cognitive Load
- Color Theory
- Minimalism
Student work on the left. My redesign on the right.
Conserving Attention on a Busy Background
A student fell in love with this super cool but busy background and needed to create a more cohesive login screen. Here's my approach to redesigning the screen. I introduced a plain container behind the form to increase clarity give the design more flexibility should the background change. Reducing the number of colors on the screen and switching the social buttons to icons helped to conserve and focus attention. Separating the login and signup functionality maintained two staples of UI design; show only one primary action per screen and prevent user error.
Key Concepts Demonstrated:
- Clarity
- One Primary Action Per Screen
- Conserve Attention
- Prevent Error
- Flexibility
- Efficiency
Student work on the left. My redesign on the right.
Advanced Searching: Appearance Follows Behavior
A student wanted to create an advanced, two-part search, but her UI didn't demonstrate the intended functionality. I created a search flow to show her how to leverage best-practice, familiar UI to clarify the user path. This reorganization enforces the relationship between elements helps reduce the cognitive load and asks less of the user.
Key Concepts Demonstrated:
- Appearance Follows Behavior
- Reduction of Cognitive Load
- Clarity
- Familiarity
Student work on the left. My redesign on the right.
Social Pages: Meet User Expectations with Smart Organization and Familiar UI
A student wanted to create a location-based social network page for surfers but it was hard to tell the purpose of the page based on what he designed. I redesigned his page by using color strategically, leveraging familiar design patterns, removing inaccurate page headers, and adding new sorting and categories to the top.
Key Concepts Demonstrated:
- Familiarity
- Clarity
- Color Theory
- Reduction of Cognitive Load
- Primary Action