The Michigan Daily: A Brand New Web Experience
As a product designer for The Michigan Daily, I worked with a team of 6 designers to create, edit, and advise the creation of new Michigan Daily products. The Michigan Daily website is our most used product. With the redesign, we applied modern web design principles to provide a better user experience across browsing, reading, searching, and sharing.
Overview
Duration: Sep 2019 - April 2020
Role: Product designer
Team: 6 Product Designers + Project Manager
Skills used: User Interviews, Site map, Wireframes, Hi-fi prototypes, Lo-fi prototypes, Design Critique
Tools used: Adobe XD, Figma, Google forms, HTML, CSS
Our Process
Audit current experience
Design Phase
Next Steps
Conduct user research
Validation
Audit Current Experience
We began our process by going through all website interactions to understand the product better. We noticed there was inconsistent use of typography, color, and spacing throughout the website. Users’ are unable to establish any sort of hierarchy or meaning from the displayed information. Additionally, the website is inefficient with overuse of white space and the lack of a grid. The lack of identity and functional layout creates instances of confusion. Overall, the website fails to build trust with users.
User Research
Interviews with section leaders
We began by interviewing section leaders to understand how the website affects their work and to identify what their ideal website would be for the organization.
Key findings
-
Participants found the use of white space to be ineffective and distracting
-
Writers want a way to search and filter through all archived stories for research and readership purposes
-
There was disagreement among section leaders on the categorization of specific beats (mainly MIC, Podcast, and Multimedia)
-
Sections leaders stressed the importance of branding ourselves as a student newspaper
-
There was strong interest in having article recommendations
-
Participants wanted more credit to content creators
-
The web team is looking to expand API to both website and mobile app
Materials
Project Goals
-
Establish a consistent visual design that appears professional to build trust with Michigan Daily’s readers.
-
Increase website functionality by establishing a layout hierarchy using elements of news (proximity, prominence, timeliness, etc.).
-
Support content creators by increasing access to all articles, advertising other Michigan Daily products, improving access to the donation page, and providing proper credit.
Design Process: Header, Navigation and Footer
Top: Current header; Bottom: Current footer
The current navigation bar is too cluttered. Many of the labels displayed are secondary or redundant (they also appear in the footer), while other text labels use icons. Additionally, section buttons have an unclear color scheme
Wireframes
Our objective was to quickly establish The Michigan Daily's brand by installing a clean, professional look with clear section labels.
Top: Final header design; Bottom: Final footer design
We removed labels in the footer from the navigation bar to avoid redundancy and maintain a simplistic design. We gave important buttons like donate, subscribe, and view print issue better visibility by creating their labels on the homepage. We used social media icons instead of text to maintain simplicity. For the section labels, we removed the multi-color scheme and used a single color-scheme to avoid confusion. Lastly, we added the newly created Podcast section to the menu.
Design Process: Home page
Current home page design
Our main goal for the home screen was to restructure the layout to sort stories based on timeliness and prominence. Also, we wanted to highlight sections and related topics through groups.
Home page wireframes
Before, there was no indication of how the stories are structured. Now, the landing page above fold acts as our front page. The page sorts section content by recency. Additionally, the page contains a mix of text and images. This way, visual elements can be used sparingly to indicate prominence and not distract the reader.
Home page final design
Design Process: Section Page
Current section page design
Wireframes
Research showed content creators wanted an easier way to find older articles. We accommodated this by creating a sort feature, search bar, and a continuous scroll option below the accumulated content. Like our homepage, editors will decide the stories above the fold for the day. Smaller sections' will display content for the week. The page sorts the rest of the content chronologically.
Final section page design
Design Process: Article Page
.png)
Our main goal for the article page was to put the focus on the content. We centered the content and removed the ads from the sidebar, and placed them between paragraphs. We added authors' contact information, credit to the image creator, and a link to purchase content. Additionally, we added a related articles section at the bottom of the story to encourage further reading.
Final article page design
Validation
Some validation data
Our main goal for the validation study was to gain insight into how our new designs improved. Due to timing, we conducted our validation study virtually. We sent out a Google Form to the entire Michigan Daily Staff to receive insight from all sections and received 67 responses.
Analysis
-
A majority of respondents preferred the new design.
-
There were mixed responses about the placement of ads. We brought this issue to the Michigan Daily marketing team.
-
Many participants suggested we improve the prominence of social media links (most of our readership and revenue comes from social media).
+ 10%
Site Views
After the launch, we were able to generate a 10 percent increase in month-over-month total site views for 3 straight months.
Moving forward
For our next iteration, I would like to add more interaction with The Michigan Daily's target users to evaluate how the website's new design affects their experience. I believe conducting qualitative methods such as user interviews or focus groups would provide the best insight into design improvements because they would allow us to observe users' attitudes directly.
