On DallasNews.com, an update needed to be made to our navigation, however, there was not an ideal location on the mobile version of the site to place this. Instead, we reimagined what a new Section Menu could look like, while also solving some previous negative user experiences that had been reported.
Problem 1: we needed somewhere on the mobile site to display the Weather widget, however, there was no space left in the main navigation (this is where the Weather widget was located on the desktop site). This needed to be accessible on
Problem 2: on the desktop site, the Section Menu opened to a full page overlay. Many users did not realize that the Section Menu scrolled further down to show more sections on the site.
After learning of both of these issues, I had suggested the idea of reimaging the Section Menu, while also incorporating the new Weather widget for desktop and mobile that could live in the same space.
Combined Soultion: redesigning the Section Menu that functions similiarly on desktop and mobile. Rather than having all subsections listed, we listed just the main sections with a toggle to expand and view the subsections. This helped reduce the cognitive load of the user and increased speed in finding the content they were looking for, while also solving the issue that users could see all sections without having to scroll. Additionally, on desktop, rather than the Section Menu taking up the entire browser window, I designed it to slide out from the left side of the screen as a panel, so it was a less disruptive user experience. With accessibility in mind, rather than having the subsections appear when hovering over the section name, I designed it so that the user would need to click to expand or collapse to view the subsections.
Overall, after presenting this to the leadership team, it received sign-off to move forward. After discussing with the development team, we agreed it would be best to break this into a phased approach for integrating weather informaiton. Phase 1 would include a non-expandable weather section and display the temperature, while Phase 2 would include an expandable Weather section, with information such as High, Low, and Real Feel.