The student project was done to conceptualize the port of PC game Death Stranding to the mobile platform. The new control scheme prioritizes ease of use on the mobile platform, considering mobile users' interaction habits, the nature of finger-based interactions, and the limitations of mobile screens. At the same time, the overall design aims to keep the original minimalistic artstyle.
Timeframe | Role | Category | Platform |
|---|---|---|---|
2023.11 - 2023.12 | UI/UX | Gaming | Mobile |
DailyMail Redesign
How can we improve the readers' news reading experience utilizing IA(Information Architecture) methods?
Originating in 1896, DailyMail was a traditional paper-based newspaper that developed its website as the digital era arrived. DailyMail has more than 218M users per month. However, we found dissonance existed on this website: giant advertisements and inconsistent pictures and text prevented users from reading news from this website effectively and made us doubt its authenticity. Therefore, we set out to find a solution that boosts the website's digital brand and helps users to read news comfortably.
Identify Problems
#1 Improper ads distribution
The first thing you noticed when you enter this website would not any breaking news but ads that float everywhere. What's worse is that these ads stick to their positions when you scroll. We knew advertisers were important stakeholders, but the ratio between news and ads was off. In a survey we did with 15 participants, 66.67% of users find advertisement the most frustrating part.
#2 Information overloaded
A 2014 study showed that the average age of DailyMail readers was 58 (Taylor, 2014). Even if we assumed that the readers choosing the website version were younger, the text sizes and dense layout still made it uncomfortable to read. In our user interview consisting of 3 participants of different ages, all of them expressed their concern about text sizes and text density.
#3 Ineffective navigation flow
In collaboration with 2 of my team members, we mapped out the existing IA. DailyMail has 98 categories in total. We could see repeated secondary categories under multiple main categories. Moreover, they were named with inconsistent criteria, mixing countries, news types, and human names.
IA: Before
Gather Insights
A user's perspective
To create an IA that matches the users' expectations, we invited 20 participants including 10 college students, 5 workers, and 5 seniors to complete the card-sorting test. Participants will group individual labels according to criteria that make sense to them. We calculate the percentage by using
the formula below, and highlight the highest percentage as the preference of participants.
Based on the card-sorting results, we designed a new IA and tested it with a tree-testing of 13 participants by having them find the locations in the tree where 5 specific tasks can be completed. The images below show the result of our tree-testing: the green path refers to the correct path, whereas the red path indicates the participant ended at the wrong location, and dark blue indicates the participant reached the location and went back.
There were categories that did not fit participants' expectations: 68.8% of participants found the US Economy in the wrong place, and 72% of the participants wanted to find cars under Lifestyle, but most of them found it at the right place in the end. We learned from the results and made our tunes to the IA structures:
1. We changed the secondary category ‘US Economy’ to ‘Economy’ and move it under the main category ‘Finance.’
2. We changed the third category, ‘Royals,’ to a secondary category under the main category, ‘Entertainment.’
IA: After
After redesigning the IA, the number of cards in secondary categories had been drastically reduced by about 60% (from initially 98 categories reduced to 40 categories).
To create a more organized overall reading experience, cards related to public figures are no longer a part of the information architecture. Secondary categories such as "Games" and "Puzzles" are placed under "Entertainment" instead of appearing in multiple categories. We omitted "Headline," "Latest Headline," and "Latest" in secondary categories and redesigned them as a part of the filter function for each page. In addition, we created tertiary categories. By increasing the depth of the IA structure, the amount of information users need to process at every step is reduced, thus making the website more accessible to navigate through without modifying the actual content.
Solution
Same content, but cleaner
We redesigned news blocks and website layouts based on Gestalt principles. Titles and descriptions were placed together for a smoother reading experience. We made sure hierarchies between different types of news (Headline / Normal) were clear. The secondary categories only expand out when a mouse hovers over one of the main categories. Moreover, the search bar was placed as an element of the header that could be accessed wherever you are.
Ads, yes we got a place for you
Going into secondary categories, tertiary categories would show up. we have a bottom-up structure to better help our readers to switch between different categories. We reserved an area for ads that would not disturb the reading flow of our readers.
Commenting: an active community
On the article page, we had an additional floating button: commenting. Tap on it will open a side comment window, allowing you to view others' comments as well as share your own thoughts while reading the article.
Consistent language with a modern feel
As you can see by looking at the elements in comparison, we tried to keep DailyMail's branding identity by keeping its color scheme. At the same time, we added a little pinch of modern and minimalistic touch to alleviate the heaviness large amount of text and images brought by the news.
