Problem and Hypothesis
As I started grad school at the University of Michigan and needed a part-time job, I applied for a research assistant position with The Housing Solutions for Health Equity (HSHE) initiative. It's led by Michigan Public Health researchers and focuses on promoting health equity in housing systems and policy. The role required strong communication skills, especially in visual design. When the hiring managers asked for design samples, I went beyond my portfolio and redesigned their website's homepage for the job application.
I thought the result was compelling and was well-received by the managers. I decided to redesign their entire website in my free time. I felt such an important initiative deserved a better-structured and more visually appealing website.
My Role
I pursued this project on my own as a User Interface Designer.
Design Process
First Steps
For the actual job application, I conducted a high-level inspection to understand the sitemap and content structure. The website serves as an informative space for the initiative, communicating research, relevant events, and blog-oriented content. Managers, and based on my understanding of communication needs in research projects, often require a robust website with a compelling proposition for effective networking and fundraising. While the current website demonstrated a reasonable level of usability on both desktop and mobile devices, I found it lacking in visual appeal and proper content highlighting.
Housing Solutions for Health Equity (HSHE) Website as of 2023. https://www.urbanh3.com/
Heuristic Analysis
After redesigning the homepage to align with the University of Michigan brand guidelines, I received a job offer. I did not accept, but that is a story for another day. Nonetheless I was pleased with the design outcome and saw potential for a larger project. This led me to conduct a heuristic analysis of the website, aiming to identify design problems by evaluating it against a set of guidelines (heuristics) that prioritize user-friendly systems(Moran K. and Gordon K, 2023). This analysis helped pinpoint specific usability issues that can be addressed in the new design.
Heuristic Evaluation (2023) Interaction Design Foundation
I created a scale to represent the severity of the violation per heuristic: Compliant, Moderate Compliance, Low Compliance, Non-Compliant.
1. Visibility of system status - Low Compliance
Several violations were found in key components such as news/events and project cards, where links or action buttons were not apparent to users. The lack of affordance can lead to errors and frustration, especially on mobile where the hamburger menu icon is not clearly visible.
2. Match between system and the real world - Compliant
The website is structured following common web components and patterns, making navigation, searchability, and content hierarchy familiar and easy to explore.
3. User control and freedom - Moderately Compliant
The website provides the necessary level of control for exploration. Since it's an informative experience with fewer high-impact decisions, there are no serious violations. However, enabling components like breadcrumbs, floating nav bars, or back-to-top shortcuts could improve the experience.
4. Consistency and standards - Low Compliance
While the website is generally consistent, the approach to many content pieces can be inconsistent and lacks appropriate usability or accessibility standards. Hover effects use a bright yellow tone that makes text unreadable, and image use can be inconsistent, with some content not being readable on mobile.
5. Error prevention - Compliant
There are not many high-impact decisions except for the contact form and content links, both of which operate to a desirable degree with low risk for errors.
6. Recognition rather than recall - Low Compliance
The lack of visible links or calls to action to explore content is a direct violation of the heuristics, as users are pushed to recall how to access content.
7. Flexibility and efficiency of use - Low Compliance
The website enables certain links to explore entire sections or filter content, but the violation lies in making these controls apparent for flexibility of use. Tags also use a bright yellow tone that is often unreadable.
8. Aesthetic and minimalist design - Low Compliance
The website does well in focusing on content with a simple structure. While aesthetic design is not necessarily violated, it currently lacks affordance or information for fluid interaction.
9. Help users recognize, diagnose, and recover from errors - Moderately Compliant
Errors are minimal, and the contact form, powered by Mailchimp, works properly. Even in the light of an error, it provides hints for the user to recover.
10. Help and Documentation - Compliant
The main purpose of the website, aside from publishing research content, is for people to contact and network with the initiative. This heuristic is compliant as the website provides several points of action for this purpose, readily available via the footer or contact link from the navigation bar.
Design Process
UI Kit
After identifying some of the issues to be resolved and before commencing the redesign, I explored several university websites to become more acquainted with the brand guidelines. This process aided in constructing a modest UI Kit, serving as the foundation for the visual design. The UI Kit included the definition of typographical hierarchy, the core color scheme, and contrast guidelines.
Responsiveness and High-fidelity Prototype
The subsequent step involved determining columns and breakpoints to ensure the website's full responsiveness. This entailed considering a minimal desktop/laptop resolution of 1366 px x 768 px with 12 columns for proper display on smaller computer screens, 768 px x 1024 px with 8 columns for tablets, and 375 px x 812 px with 4 columns for mobile phones.
Following this, the redesign focused on creating a new look and feel that wouldn't impact the current content proposal but instead concentrated on addressing key usability issues identified in the heuristic analysis. I believe that a more profound restructuring would necessitate additional input from HSHE stakeholders and users. At this stage, I initiated a basic wireframe session to lay out the main content distribution and transitioned to high-fidelity prototyping immediately afterward.
Retrospective
How I solved the problem
The website, in my opinion, now boasts a stronger presence and renewed consistency. The utilization of negative space, adherence to brand guidelines, and emphasis on visual elements and photography enhance the message, making it more impactful and likely to convert potential donors or interested stakeholders. The University of Michigan dedicates significant time and resources to its brand and communications, underscoring the importance of aligning the organization's statement with all initiatives and programs.
From a usability standpoint, this redesign successfully addressed key usability issues identified through heuristic analysis. While the website already had a reasonable level of usability, the refinements made a meaningful difference. By leveraging UM brand guidelines, incorporating well-known usability patterns, and providing a refreshed take on visual design, the website aligns with the visual identity of the university and the use of authentic photography further reinforces the human-centric orientation of the initiative.
Challenges
Gaining audience input on navigation and information accessibility would have enriched the redesign but posed time constraints. While I wanted to pursue transitions and micro-animations, the current design serves as a stable MVP, addressing the usability issues found in the heuristic analysis. This project highlighted the need for a comprehensive user experience across devices and emphasized the challenge of sourcing unique and authentic photography.
What I Learned
The project underscored the importance of considering various devices and use cases for a well-rounded user experience. It also emphasized the challenge of sourcing unique and authentic photography to align with the brand and product's nature. Despite the time-consuming process, a refined selection of stock photography was pursued from sources like unsplash.com, aligning with the initiative's discourse on the impact of housing policy on people.
