Webpage Redesign and Development
Year: 2024
Introduction
While working as a graduate assistant at PhD Hub at New York University, I redesigned one of the web pages, specifically for workshop events. The workshop offers different tracks, and PhD students can register for one or more tracks. Students are required to attend all the workshops within the tracks they choose.
My Contribution
User Research
UX Design
Web Development
Development
Figma
HTML
CSS
JavaScript
PHP
Original Webpage
⇨
⇩
My Design
Development Process
User Interview
First, I conducted simple user interviews with two of my friends, Jennifer and EJ. Jennifer is a 30-year-old female teacher, and EJ is a 31-year-old male engineer.
Takeaway
They may not be key target users for this webpage, but to complete this assignment, I had to quickly conduct a simple user interview with friends around me. When actually modifying the official webpage, we would conduct user interviews with key target users.
I asked them about their experience when browsing an event list webpage. Here are some feedback I gained:
Pictures catch users' eyes when they browse the webpage.
Users want a brief introduction they can see without additional clicks.
Takeaway
They may not be key target users for this webpage, but to complete this assignment, I had to quickly conduct a simple user interview with friends around me. When actually modifying the official webpage, we would conduct user interviews with key target users.
Identified Issues
Then, combined with my findings and users’ feedback, I identified four key issues with the original webpage:
Navigation Bar Issue
Desired Breadcrumb Navigation
Event Card Images
Event Card’s Brief Introduction
Secondary Research
I began with extensive secondary research on platforms like Behance, Dribbble, and NYU's other websites to explore various event information design methods. Key focus areas included:
Visual hierarchy
Clarity of information presentation
User-friendly navigation design
Color schemes and typography choices
Following the initial research, I entered an iterative design process. I created multiple design versions, continuously seeking feedback from users. This cyclical approach of designing, gathering feedback, and refining allowed me to progressively improve the design, ultimately leading to the final solution.
Design Iteration
Final Design
Takeaway
Through this process, I learned a valuable lesson about user-centered design. Initially, I assumed that bold visual elements like large banners or dark backgrounds would create a strong visual impact and make the website more appealing. However, user feedback revealed that what users truly need is a clear and simple interface that allows them to access information quickly and easily. This insight significantly influenced my final design decisions, prioritizing usability and clarity over purely aesthetic choices.
Development
To modify the webpage, I downloaded the source code from the website and attempted to modify the HTML, CSS, and JavaScript to meet my requirements.
To centralize event data management and reduce repetitive code in HTML, I created a PHP file to store all event data. This approach allowed for dynamic content generation in HTML, improving maintainability and making future updates more efficient.
Programming Languages
HTML/CSS/JavaScript/PHP
Efficient Event Card Generation
PHP used for dynamic content generation
Reduced repetitive code
Centralized event data management
Code Organization
Modular file structure for maintainability
Takeaway
While I initially thought modifying the existing code would be more efficient, the source code was very long and difficult to comprehend. I learned that code downloaded from browsers is usually an optimized production version, compressed and combined to improve loading speed. This made the modification process more complex than anticipated. Despite the difficulties, this experience provided valuable insights into the differences between development-ready source code and production code.
Key features
I implemented several key features to enhance the website's functionality and user experience:
Scroll fade-in animations
I implemented scroll fade-in animations to enhance user experience by gradually revealing content as users scroll, resulting in a smoother and more interactive browsing experience.
Responsive design
To ensure optimal user experience across various devices, I designed 3 distinct UI layouts corresponding to 3 main screen sizes (desktop, tablet, and mobile). This approach allows us to adjust the design at different breakpoints, accommodating a wide range of devices.
The mobile design proved to be the most challenging. If we had maintained the original event card layout, the text area would have been too small for comfortable reading on smaller screens. To address this, I redesigned the card layout for mobile devices:
Moved images to the top: While this may result in some image cropping, it preserves the central part of the image while freeing up more space for text.
Adjusted text formatting: Increased font size and line spacing to enhance readability on smaller screens.
This design adaptation, though requiring some compromise on the image display, significantly improves the user experience on mobile devices by allowing users to read event information comfortably.
Accessible Tab Navigation Improvements
Keyboard navigation is essential for users who cannot or prefer not to use a mouse. To enhance the accessibility of the original webpage, I implemented an improvement to make tab navigation more user-friendly and inclusive:
Visible Focus Indicator: I added a bold orange outline to highlight focused elements during tab navigation. This provides a clear, visible cue for users, allowing them to navigate more efficiently.
Key Benefits
Enhanced Usability: Improves navigation for keyboard-only users by making the focus state easily identifiable.
Assistive Technology Compatibility: Ensures better functionality with screen readers and voice recognition software.
Visual Feedback: Provides immediate, clear visual feedback during navigation, enhancing the user experience.
Inclusive Design: Promotes a more accessible and comfortable browsing experience for all users.
This improvement significantly boosts the overall accessibility and user experience of the site.