Explore Prototype
Learn More
Project Overview
Role: UX/UI Designer
Tools: Figma, Framer, Miro
Duration: 65 hours
Focus: Academic engagement, accessibility, and usability
Problem Space
The professor’s existing website was packed with content but lacked clear organization and visual consistency. As a result, visitors found it tough to navigate. Important publications were buried under long text, and there was no quick way to see what the professor was currently researching or how to get in touch. Ultimately, the site wasn’t reflecting the professor’s expertise or personality in a way that felt inviting or easy to explore.
Key issues
Cluttered layout burying key information like publications and contact details
Limited visual identity that didn’t showcase the professor’s unique expertise or personality
Lack of clear user pathways for different visitors (students, colleagues, etc.)
Opportunity Space
The professor’s previous website lacked clear navigation, a mobile-friendly design, and an engaging interface to reflect their professional identity. Users, including students and collaborators, often struggled to find publications, contact information, and recent academic updates.
Key Insights
Navigation Issues: Users struggled to locate publications or contact information.
Mobile Optimization: The site was not optimized for mobile, leading to a poor user experience.
User Expectations: Users valued a balance between professionalism and personal identity.
Our goal was to create a website that ensures effortless navigation, reflects the professor’s unique academic identity, and engages users across devices.
Discover
To understand the needs of the target users—students, academics, and collaborators—I conducted user interviews, competitive analysis, and affinity mapping. This research revealed key pain points, such as navigation challenges, mobile usability issues, and the need for a balance between professionalism and personality.
User Interviews
Conducted 5 interviews with students, academics, and researchers to uncover user goals and frustrations.
Competitive Analysis
Analyzed 4 academic websites to identify common features, strengths, and weaknesses.
Affinity Mapping
Synthesized interview data to identify patterns and categorize user needs.
Research Insights
Navigation Challenges: Users struggled to locate publications and contact information.
Mobile Optimization Issues: The previous site’s mobile experience was poor, with formatting errors and unresponsive menus.
User Preferences: Users valued personal touches and clear access to publications and projects.
Define
Project Goals
Business Goals
Increase user engagement with the website.
Improve academic visibility and accessibility.
User Goals
Ensure quick access to publications and contact information.
Provide a mobile-friendly, intuitive navigation experience.
Common Goals
Highlight the professor’s academic achievements and unique identity.
How Might We (HMW) Statements
Browse dozens of professionally designed templates. Click, duplicate, customize.
Develop
Sketches and Wireframes
I began the design process by sketching rough layouts to visualize the information architecture and key features. These evolved into low-fidelity wireframes, which focused on usability, navigation, and content prioritization.
Usability Testing
To validate the high-fidelity designs, I conducted usability tests with five participants representing the target audience, including students, academics, and researchers. The tests focused on two key tasks: locating a specific publication and submitting a contact form. Both desktop and mobile versions were tested to ensure responsiveness and accessibility.
Key Findings
Task Efficiency: Participants completed tasks in under 20 seconds on average.
Ease of Navigation: Users found the navigation intuitive and easy to use.
Publication Organization: Users appreciated the improved filtering system.
Contact Form Feedback: Participants noted the seamless design and functionality.
Mobile Optimization: Users praised the responsive design but suggested minor adjustments for spacing.
Deliver
High-Fidelity Prototypes
The high-fidelity prototypes incorporated the professor’s branding elements, such as a modern typography style and an accessible color palette. These designs addressed user pain points by offering streamlined navigation, a responsive layout, and an intuitive interface.
Design Rationale
The design focused on making the website feel approachable while maintaining a professional tone. We prioritized clear sections for publications, projects, and contact, ensuring users could find what they needed with minimal effort.
Navigation
Simplified menus for easier access to publications and contact information.
Visual Hierarchy
Emphasized key user goals with a clear layout.
Accessibility
Mobile optimization and adherence to WCAG guidelines.
Branding
Reflected the professor’s academic identity with a professional yet personal design.