INERTIA Studio Visits Refresh
NERTIA is a web publication that focuses on artist-to-artist interviews. Founded in 2017, it is currently ran by a two-person team: the editor and the transcriber. The project is funded through various grants and user contributions.
Stakeholders at INERTIA is seeking a redesign project that would improve the readability, navigation, and the usability of the web publication.
Timespan
8 Week, May – June 2021
Process
User Interview, Information Architecture, Prototyping, Usability Testing, Implementation
Tools
Figma, Illustrator, Notion, Google Survey
Team
UX Designer (1) Stakeholders (2) Brand Designer/Graphic Designer (1)
Problems
We conducted user interviews with art students, professionals, and art enthusiasts, gaining insights into their needs and preferences. This research informed our design decisions, highlighting three key areas for improvement in the redesign process.
1. Ambiguous Hompage
Most users claim that they can not tell what the website is from its homepage.This is also backed up by Google Analytics data which indicates that most users don’t navigate off the homepage.
2. Confusing Navigation
Users said that the menu page is not helpful at all and they are overwhelm by the cluster of tags.
3. Poor Readibility
Most users claim the articles are hard to read on their mobile phones due to the low contrast between the background and the texts.
It is also difficult to see the images on mobile because the site doesn’t have a click-to-enlarge function.
Competitor Analysis
Who to Compare to?
After synthesizing user interview findings, we identified a recurring sentiment: most users felt INERTIA resembled a blog rather than a publication site.
During follow-up discussions, users who expressed this view elaborated that INERTIA's look and feel diverged significantly from the online arts publications they typically engage with, such as It’s Nice That and Hyperallergic
After comparing INERTIA to It’s Nice That and Hyperallergic, I identified several design flaws that violate Jakob’s Law:
-
Single-column layout: Unlike multi-column layouts common in publication sites, INERTIA's single-column design limits user options and content visibility.
-
Lack of a homepage search function: Users are unable to easily locate specific articles, hindering discoverability.
-
No emphasis on columns or topics: Without clear highlights for different sections, users struggle to identify and navigate content that matches their interests.
Information Architecture
Old INERTIA IA
-
Overwhelming menu content: The menu tab presents an excessive amount of information, making it difficult to navigate.
-
Inactive pages displayed: Navigation options include inactive pages, creating confusion and clutter.
-
Unorganized articles: Articles lack categorization or thematic organization, making it hard for users to find related content.
New INERTIA IA
-
Highlight columns/categories in the menu: Clearly emphasize different sections to guide users effectively.
-
Add a top-level search bar: Enable users to quickly locate specific articles.
-
Integrate a “load more” function: Allow users to access older articles without overwhelming the initial view.
-
Remove inactive pages: Eliminate unused navigation options to reduce clutter.
-
Relocate contact and social media links: Place these in the "About" page for better
Final Product
Protoype
1. Paper Wireframes
I began by creating multiple iterations of the new INERTIA site on a gridded sketchpad, enabling me to quickly explore ideas and refine designs through rapid iterations.
Leveraging my familiarity with WordPress, I ensured that the wireframes aligned with its structure to facilitate a smooth transition from concept to implementation.
2. Lo-Fi Prototype
Next, I developed a low-fidelity prototype based on our preferred paper wireframe. The prototype incorporates interactive elements to demonstrate the user flow across both desktop and mobile platforms.
Test and Iterate
1. Usability Testing
We recruited six participants from our target demographics—artists, students, and arts professionals—to test the low-fidelity prototype.
Given that 75% of visitors access the site via mobile, as indicated by Google Analytics, we prioritized showcasing the mobile prototype to participants first.
2. Iterations
After synthesizing user feedback with the team, I updated the low-fidelity prototype to address the identified issues. The revised prototype was then shared with the graphic designer to refine the visual styles.
The designer was informed of key insights from usability testing, including:
-
Participants felt that high-contrast designs improved readability.
-
The font size on the desktop was perceived as too small, making it difficult to read.
Implementation
1. Working with WordPress
While the graphic designer developed the design style guide, I began exploring WordPress themes and selected the Goodztheme. I customized it using HTML and CSS to align with our prototype.
During this phase, I collaborated closely with stakeholders to ensure the project remained on track for a timely launch.
2. Implementing & Executing the Design
At this stage, the graphic designer collaborated with the stakeholders to develop a site mock-up and style guide. My role focused on implementing the custom landing page and applying the finalized design style to the modified WordPress theme I had created.
Takeaways
1. Adapt to budget and time constraints
This project taught me how to navigate the limitations of real-world budgets and timelines while still delivering a high-quality outcome.
2. Test early and often
Despite a tight schedule, I’m glad I prioritized testing the low-fidelity prototype. This early-stage feedback allowed us to identify usability issues and address unresolved user pain points, ultimately saving significant time and effort later in the project.
3. Prioritize user needs over personal preferences
During the wireframe and prototype stages, we debated whether a landing page was necessary and initially decided against it. However, usability testing revealed that users strongly preferred having a landing page. Letting go of our initial preference was challenging, but this user-focused decision greatly enhanced the product.