In this series I'm going to choose a random website, analyze the frontend code (performance & best practices) and UX, and present my findings. By taking a look at the issues on existing projects, we can improve our coding and UX skills and learn how to avoid issues in our own projects.
I have more than 5 years of experience in frontend development, eCommerce and writing professional-grade frontend audits and I've learned a lot by doing audits.
Users having trouble using your website? Or you just want someone to check if your website is up to par and following best practices? I can do a frontend and UX audit for your website. Limited slots available.
This week, we'll be taking at the redesigned version of a popular worldwide weather forecast website, yr.no and compare it to the current design and see how it fares. I've been using Yr website for years now and it's one of my go-to sites for checking weather forecast.
Mobile support
Why is mobile support important? Responsive web design (RWD) has been around for years and desktop-oriented websites and services were eager to jump on RWD train.
According to the Global Stats around 53% of users use mobile and tablet devices to browse the web. This is why it's important to offer a mobile-friendly site or you can use up to 50% of potential users.
Considering the fact that users want the weather forecast data on-demand and want to get that info quickly and painlessly, it's important to have a good mobile-friendly website (maybe a PWA).
YR's current site is not mobile friendly. And we can see how it looks like from the screenshot. User has to zoom in and out and hope that website is touch-friendly out of the box. Users dislike inconvenience and they won't think twice before moving onto a competitor's website or service.
Let's compare the current website to the new, mobile-friendly website. Notice how it's easy to navigate it and view data.
Added mobile-friendly features are a definite win when it comes to the redesign. But the rest is far from perfect...
Streamlined or dumbed-down?
What I found unpleasantly surprising is how redesign doesn't serve the content which is the main purpose of the website - design needs to simplify how users search and perceive the weather forecast information.
For example, let's look at the weather forecast overview on the current page. Just scanning through the tables I can instantly see which forecast is related to which day and info is nicely presented in the table. Everything is clear from the first scan. Forecast information for individual days is located in separate tables which makes info nicely grouped and presented.
As for the redesign... what is this? The information is not as clear as in the previous case. Each day is now presented in a separate table row, but we've lost quite a bit of info.
Table is now difficult to read, due to the it being so wide and every data point is now merged into a single table (without any background colors guides for even rows).
Instead having individual temperature, rain and wind info for each quarter of the day, now we have the combined information for the whole day. Only detailed infos for the times of the day is presented with weather icons. Table is too wide and users might find the info difficult to scan and parse - on desktop lot of eye movementis required and on mobile user needs to scroll the table horizontally.
Same can be said for the graphs data. On the current YR site, graphs show temperature, rain, wind and weather forecast data for the next 48 hours in 1 hour intervals. It's easy to connect the date and time to each data value. If user is interested in detailed table-view of the data, they can scroll down.
On the redesigned website, graph data is expanded to 7 day range and graph is both tall and wide, with no additional detailed data at the bottom. The graph is difficult to read and only when user hovers on the data point can get a more accurate info. Redesign made graph difficult to read and added an extra step in order to better perceive the data.
Don't hide info in modals
Redesign was done with some questionable design choices. Most apparent issue is how data is presented in a non-compact way - everything is stretch tall and wide. Graphs and tables take way up too much screen space on desktop and mobile and are difficult to read.
What was the solution? Just make the user hover or click on the data point they interested and they'll get a dropdown or modal element with the details, respectively. Redesign produced an severe UX issue. Users are now required to click on data to better read and understand it.
Current website, in my opinion, is not cluttered to warrant such a design choice - to hide everything in modals.
Conclusion
This redesign is a classic case of "don't fix what isn't broken". With it, YR website lost its identity in the process of streamlining. The redesign needed to refresh the (a bit) outdated and add a responsive styles to make the website mobile-friendly. Instead, the redesign dumbed-down the website and made the data difficult to read and understand.
If possbile YR design and dev tam should consider going back to the drawing board and create a design that will make both mobile and desktop website delightful to use. It's important to understand your users and create a web app that answers user's questions in a detailed and quick way - without additional clicks.
This was just s small taste of professional audits that I do regularly. Don't make these kinds of mistakes when redesigning your website, let me help you take your website to the next level. Limited slots available.
These articles are fueled by coffee. So if you enjoy my work and found it useful, consider buying me a coffee! I would really appreciate it.
Thank you for taking the time to read this post. If you've found this useful, please give it a ❤️ or 🦄, share and comment.
Top comments (3)
Very good analysis, couldn't agree more. Classic example of redesigning without remembering what was good about the previous version.
Fortunately the old site is still available here, for now at least:
retro.yr.no/
I'm sure the new site is great on mobile, and more touch friendly for tablets as well, but it fails badly in terms of usability on desktop. Really hard to get a quick overview of the weather now, which is kind of the point...
Agreed. I was shocked when the new site loaded instead of the old site, but I found the link to the retro.
The mobile app is good, it's almost as usable as the retro site. I wish they gave the desktop app as much attention as they did to the mobile app.
Thanks for sharing.......
..