History of UI/UX Timeline
UI/UX Designer, Illustrator
Tools used: Figma, Adobe Illustrator
Assignment: I was assigned the article An Abridged History of UI and was challenged to convert its content into an interactive webpage. The goal of this project was to present the history of user interface design in a way that is engaging and easily understandable for individuals of a certain user persona of our choice, especially those with little to no design knowledge.
Thought Process: My goal was to present the evolution of UI/UX design in an engaging and dynamic way, moving beyond the passive experience of reading an article. Recognizing that historical content can sometimes be less captivating—particularly for those unfamiliar with the subject—I developed an interactive, clickable timeline. This feature allows users to explore key milestones in UI/UX history across both desktop and mobile platforms, making the learning experience more immersive and accessible.
A look into the mobile application:
Each page features a minimalist illustration in monochrome tones accompanied by a concise informational blurb to engage users without overwhelming them with text. The design emphasizes simplicity and visual appeal, encouraging users to explore further. Additionally, a home button is positioned at the top of each page, allowing users to easily navigate back to the starting point.
User Persona
A user persona is a fictional representation of a target user based on research and real-world insights. It helps designers, developers, and marketers understand their audience’s needs, goals, behaviors, and pain points
The persona I created represents an audience that values both education and design. The randomized name I chose for this user is “Charlotte Banks,” a high school art teacher passionate about incorporating graphic design into her curriculum. She needs an engaging, well-structured, and visually appealing resource to make UI/UX history accessible to her students. Her creative mindset, busy schedule, and need for clear, interactive learning tools make her an ideal user to consider when designing an intuitive and educational experience in Figma.
Personality Traits:
Highly creative and organized
Busy but finds time for personal interests
A strong team player with a mix of independence
Goals & Motivations:
Wants to integrate graphic design into her teaching
Aims to win “Teacher of the Year” and eventually teach college students
Motivated by creative expression and a sense of achievement
Styleguide
While designing the user interface, I developed a purposeful style guide centered around the user's preferences. Every font and color was thoughtfully selected to ensure simplicity, minimalism, and visual cohesion on my site! This guide was used even during the initial draft.
Initial Draft
The initial iteration of this project featured a significantly different layout. Rather than a page-by-page experience, the content was presented as a continuous vertical scroll. Additionally, the typefaces used were smaller and less legible, which impacted readability.
In the second iteration, I focused on enhancing usability while maintaining design consistency by preserving the original color palette and illustrations. Key improvements included the implementation of a more legible and appropriately sized typeface. The descriptions for each era were also refined and condensed to better engage the intended user persona. Furthermore, additional animations were incorporated to enhance interactivity, and navigation was restructured to a left-and-right arrow system, replacing the previous scrolling format.
