Goal Alignment

My IxD process began with defining user personas and mapping out user journeys. I chose this approach because it placed human experience at the center of my design thinking from the start. By sketching personas representing my target audience—from tech recruiters to fellow designers—I created relatable benchmarks that guided my subsequent design decisions.

Information Structure - Content Mapping

For journey mapping, I adapted the standard UX journey map by incorporating emotional touchpoints, helping me identify moments where users might experience confusion or frustration. This emotional dimension proved invaluable for understanding potential pain points that a purely logical approach might have missed.

User Flow - Screens, Behaviour, and Decisions

Rather than depicting only idealized journeys, I included alternative paths and potential points of confusion based on feedback from classmates who reviewed early prototypes. This honest approach helped me identify and address navigation weaknesses before finalizing the design.

Selected Interface Elements

• Persona Development: Rather than relying solely on assumptions, I based my personas on conversations with classmates, professors, and industry contacts, incorporating their perspectives into detailed persona profiles with specific goals and technical knowledge levels.
• Wireframing Approach: I started with pen and paper sketches before moving to digital tools, allowing for quick exploration of multiple layout possibilities without getting caught in the details too early.
• Iterative Refinement: I shared early concepts with peers and incorporated their feedback before committing to final designs. This collaborative approach helped identify navigation issues early on.

Design Timeline Evolution: What began as a sequential plan quickly evolved into a more flexible approach as I realized certain sections needed to be developed in parallel. This adaptation allowed me to incorporate new insights as they emerged throughout the project.

My wireframing process evolved through several phases, each offering distinct benefits. I discovered that starting with quick sketches before moving to digital tools gave me more creative freedom at the crucial early stage.

For initial concepts, I filled several pages of my sketchbook with rough layouts, exploring different possibilities without the constraints that digital tools sometimes impose. This analog approach sparked ideas I might not have considered if I'd jumped straight into digital wireframing.

Typography and Colours

My typography choices evolved through experimentation with different font combinations until I found a balance between distinctive character and practical readability:

Colour Palette Development

My color palette emerged from extensive exploration, considering both aesthetic appeal and practical considerations like accessibility and emotional tone:

• Electric Blue (#536DFE): Serves as the primary action color, creating energy and focus while maintaining sufficient contrast against both light and dark backgrounds.
• Neon Cyan (#00E5FF): Complements the primary blue as a secondary accent for hover states and progress indicators.
• Metallic Grey (#ECEFF1) and Dark Charcoal (#37474F): Provide a sophisticated backdrop that allows the accent colors to shine while remaining comfortable for extended reading.

The Style Process

My approach to style development started with understanding content needs rather than imposing a predetermined aesthetic. I began by organizing content and identifying key user tasks, then explored visual treatments that would support these functional requirements.

I created several mood boards representing different potential directions before settling on the final approach. This exploration helped me identify which visual elements resonated most strongly with the professional yet forward-thinking impression I wanted to create.

User Interface (UI) Component Approach

Rather than designing each page as a standalone entity, I developed a system of reusable components that appear consistently throughout the site. This approach not only saved time during development but created a more coherent experience for visitors as they move between different sections.

For interactive elements, I established consistent patterns for different states (default, hover, focus, active). This predictability helps users quickly understand how to interact with the site, reducing the learning curve typically associated with unfamiliar interfaces.

User Experience (UX) Strategy

My UX approach focused on reducing cognitive load through predictable patterns and clear visual cues. Rather than forcing users to remember how to navigate the site, I implemented consistent indicators that help them understand their current location and available paths forward.

When fellow students reviewed early prototypes, some mentioned feeling uncertain about where they were in the site structure. In response, I enhanced location indicators and navigation cues, which noticeably improved their confidence when exploring different sections.

Navigation & User Control

The navigation system balances comprehensive access with simplicity through thoughtful organization. Primary navigation remains consistent throughout the experience, while contextual links within content sections help users discover related information naturally.

For mobile experiences, I adapted the navigation to work within tighter space constraints while preserving access to all sections. This required more than simply collapsing the desktop menu—I reconsidered the hierarchy and interaction patterns to ensure the mobile experience remained intuitive.

Design Rationale

After sketching several navigation concepts, I settled on a persistent top navigation bar that remains visible throughout the site. When I showed prototypes to classmates, they consistently found this approach more intuitive than hidden navigation options, particularly when exploring the site for the first time.

Accessibility informed my design decisions from the beginning rather than being addressed as an afterthought. This integrated approach helped create an experience that works well for all users, regardless of their abilities or how they access the site.

• Semantic HTML Structure: I built the site using proper semantic elements like <header>, <nav>, <main>, and <section> rather than generic <div> containers. This creates a meaningful document structure that benefits screen reader users while also improving SEO and maintainability.
• Thoughtful Alt Text: For images, I wrote alt descriptions that convey not just what's shown but why it matters in context. For instance, wireframe images include descriptions of key layout features rather than simply stating "wireframe image."
• Color Contrast Implementation: I checked color combinations using contrast tools to ensure text remains readable across different backgrounds. In some cases, I adjusted my initial color choices to improve readability while maintaining the overall aesthetic direction.
• Responsive Design Approach: My responsive strategy focuses on content relationships rather than specific device dimensions. This content-first approach ensures the site works well on devices I haven't specifically tested.
• Manual Accessibility Checks: Beyond automated validators, I tested the site using keyboard navigation and browser accessibility tools. This hands-on approach revealed practical issues that technical checks might miss, such as logical tab order and intuitive focus indicators.

I also implemented keyboard navigation patterns that go beyond basic tab functionality, ensuring that all interactive elements can be accessed and activated without a mouse. These considerations benefit not only users with disabilities but also power users who prefer keyboard shortcuts.