<p>Published on <a href="https://blog.prototypr.io/the-guardian-redesigned-almost-everything-and-im-not-sold-not-in-the-slightest-2bc7b280678d?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Daniel Mendez </p>
<p>The Guardian app has been installed by millions and currently has a 4.7/5 score on <a href="https://play.google.com/store/apps/details?id=com.guardian&amp;hl=en_GB">Google Play</a>. It is a good score. No, it is an excellent score. The app is generally fast, caches stories well and fairly intuitive to navigate. None of these attributes have changed in the redesign of the app.</p>
<p>The Guardian explain <a href="https://www.theguardian.com/media/2018/jan/15/guardian-new-look-online-katharine-viner">here</a> why they’ve carried out an extensive rebrand and redesign on all their platforms. The purpose of this article is not to discuss the rebrand, but to look at any UI/UX decisions they’ve made in the app and attempt to understand why they were made.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*YNAb5Po2nqP2gJuH41ubGw.png">← old, new →<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*FNtAg6kkVOTYzImcKUkaog.png">← old, new →<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*qLgCPh8WrVQQxQxASXOIIw.png">← old, new →</p>
<h3>Header</h3>
<p>This is the first most startling change the user will notice when opening the new app. The very distinctive blue, which The Guardian has used for a number of years, has now has now gone. In its place is ‘arguably more on trend’ black and white header. Two other changes have also taken place in this space.</p>
<ol>
<li>The height of the header has increased. This is due to the new taller logo structure and as well as the distinctive but essentially useless four horizontal lines below it. Being distinctive is important, and I commend the effort for trying to achieve this but I don’t feel that simply adding these lines is the correct way to achieve this.</li>
<li>The account icon has been removed and placed in the slide out menu. This will have been a stats-led decision, and if the number of people using it were outweighed by the number being put off using the menu due to its placement, then it had to go.</li>
</ol>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*up6bZIvpbiT042tow3engw.png">← old, new →</p>
<h3>Headline title</h3>
<p>Very little change in this section. The font size and small clock icon has increased slightly and as a consequence the overall height of this section has increased ever so slightly. Another minor change is the alignment of the clock icon and time. It was aligned to the bottom of the title and is now centrally aligned. If anyone has ideas on why this small change was made feel free to let me know. Overall small changes but I welcome letting the title breathe ever so slightly more.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*z3V_iSCJHbZVyeDuuWHvtA.png">← old, new →</p>
<h3>First story</h3>
<p>It’s here you begin to see a number of clear design decisions and updates.</p>
<h4>Font choice</h4>
<p>The most distinctive change The Guardian has made is the new, bolder and stronger font. I don’t agree with this decision. When more than one person is shouting, you can’t hear a thing. When three or four titles are all clamouring for your attention users will find it distracting, confusing and can easily be switched off. I wasn’t necessarily a fan of the older style but I found it easier to scan over and read. The decision to go very bold looks messy. In the above example they’ve also chosen red as the category colour (for NHS in this example). Red has been used for years in The Guardian app as the colour to identify breaking news or a live news feed. The fact it’s now also being used as a category colour diminishes its impact. If you want visitors to associate a colour with a category or a state, then it’s vitally important to create clear guidelines for their use and then stick to them.</p>
<h4>Blurb</h4>
<p>I like the choice they made to add a blurb for the first story. It can help engagement and serves to draw in the visitor. This decision however, increases the height of this section so the clock icon and the time have been removed. More generally (and this may have been part of The Guardians thinking) there are pros and cons to dating an article; the newer the article the more relevant and ‘live’ it may seem which can encourage reading of it, but on the other hand, as time progresses and the time since it was published increases, it can have the reverse effect. If a viewer is interested in getting the latest on a political story, for example, seeing that a story was published 9 hours ago can act as a deterrence and encourage them to find something newer.</p>
<h4>Scrolling section</h4>
<p>The decision to reduce the font size here is a sensible one as without having to increase the space they can now display the whole title. I assume the design team came across a number of examples in the old design of titles being cut off too much. And while we’re in this space, the new quotation marks. I’ll assume the designers were off sick the day this was signed off.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*2Xbq8wOk5K7DAsiyfkdoCA.png">← old, new →</p>
<h3>Further stories</h3>
<p>This is the section that had to give, considering all the small height increases in previous sections. The old colour of orange (although now a stronger shade) to highlight opinion pieces has been kept and although the user sees a lot less of story two and three when landing on the home page, the title is still fully readable and is a price worth paying for height increases further up the screen.</p>
<p>ICYMI comments:</p>
<p>The padding either side and between the tiles has been reduced slightly. in order to give the content more space. This doesn’t significantly to how busy the page looks and is a sensible decision.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*6jAoQVLXce4hpM0tW2jDKg.png">Old design with 13px padding (left), new design with 7px padding (right)</p>
<p>Finally, the speech Floating Action Button (FAB) has been removed. The stats would have aided this decision and I assume this relatively recent addition to the app wasn’t performing as expected so the decision to remove it was straight forward.</p>
<h3>Conclusion</h3>
<p>Annoyingly, I have two conclusions:</p>
<p>If the scope of this project was to redesign this app, it was a missed opportunity. There have been a number of recent studies exploring side menus and the lack of interaction they receive and it would have been interesting for The Guardian to explore a bottom navigation for the app (Although for apps with numerous sections this can be a challenge). And whilst I’m not a fan of horizontal scrolling the decision to introduce it as a function and then only have it appear once on a very long home page is a strange one.</p>
<p>If the scope of this project was a light touch update to incorporate the new branding, then despite the font choice, it’s achieved its goal. A fresh look and feel update with emphasis on engaging the user a little more as soon as they open the app.</p>
<p>Thanks for reading.</p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=2bc7b280678d" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/the-guardian-redesigned-almost-everything-and-im-not-sold-not-in-the-slightest-2bc7b280678d">UX/UI Breakdown: The Guardian app (January 2018)</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


UX/UI Breakdown: The Guardian app (January 2018)

Top Stories