WRAL Redesign
Overview
Summary: During Fall 2019 my UX Design and Usability Class partnered with WRAL, a local Raleigh-Durham news station to redesign their mobile and desktop websites. For the final project I focused on a mobile view of the website because our professor required that view, even though my team was tasked with understanding the use of the desktop view of the website.
Class: MEJO 581 UX Design and Usability
Programs Used: Adobe XD, Adobe Illustrator
UX Techniques Used: Think-A-Loud Protocol, User Interviews, Personas, Journey Mapping, Card Sorting
User Research Process
At the beginning of the semester, WRAL stakeholders came to our class to talk about their priorities for the website. The top priorities for usability testing were video content, navigation structure, and advertisement placement. Working on a team of five graduate students, I helped create a user test. We each conducted a heuristic evaluation of different parts of the website and then came together to talk about our findings.
After comparing our data through affinity mapping and considering the stakeholders interests we decided our teams’s goal of the user test was to evaluate the clarity of WRAL’s website and its overall navigation. With this goal in mind, we created nine tasks. Each of us conducted two user tests so all together we combined data from 10 user tests to create our user research report.
User Research Findings
Critical Issues
1) Mismatch between system and the real world in regards to navigation.
Users found themselves lost within the myriad of sub-menu items. In addition, the placement of crucial sub-menu items (for tasks) were not located underneath a primary menu item that was intuitive to most users. For example, when prompted to find the Weather Forecast Video (one of the priorities of the stakeholders), many users looked underneath weather, opposed to videos which was the correct path to complete the task.
Furthermore, WRAL’s branded content titles are not intuitive for new users looking for content that would usually be found under a more colloquial name. The most notable disconnect we found during our test was when we asked users to located the weather radar and 7/10 users could not find the radar because it was under the name of “DualDoppler5000,” opposed to a term variation of weather radar.
2) Aesthetic and minimalist design.
Even with the understanding that a news website is trying to attract users attention, many of our users commented on how cluttered and confusing nature of the webpages. This included the homepage, which as you can see from the screenshot on the left has many links, images, and ads close together. Most notably the links are sometimes floating without proper explanation of why they are located where they are.
Minor Issues
1) Recognition rather than recall
Users often could not understand the difference between ads and links. They also were constantly unsure on if icons meant what they thought they did. One example of this was the competition between placement of social media icons and other navigation information on articles. While users were able to recover from it often needlessly took up time.
User Interviews and Personas
After the user research phase we each individually conducted user interviews then came together to create an umbrella persona, and each of us would create a user persona from our umbrella persona.
I conducted two user interviews, the first was with a middle aged woman and the second was with a college aged man. During the interviews I focused on asking questions that were about consuming news generally, I did not specifically mention WRAL as a news source. I did my best to figure out what users wanted out of a news website, not just what their behaviors were in relation to the news.
Using these interview and umbrella audience of WRAL from the stakeholders, I created a user persona of a middle aged woman for WRAL. My user was a long time resident of Raleigh because WRAL’s largest demographic is 40-60 year olds from the Raleigh-Durham area. Other members of my group chose related users, like a new Raleigh Resident or an International Student.
Information Architecture
After considering the personas of the whole class we were tasked individually to come up with the information architecture of the website from a list of assets our whole class created together. To help myself out I did an open card sort to get an understanding of what general categories of the website. This was my first attempt at grouping.
This grouping changed a lot after I started thinking about what would be most useful for users during the journey mapping phase of my project, but at this point I wanted to have a some grasp of scope before I would continue. This was my content map after the Journey mapping phase.
Journey Map
After the first attempt at information architecture, I decided to create a Journey Map for the persona I was working with to get a better sense of how she might react to a vastly different WRAL website, because she was used to an older version of the website. I believe that there will be an initial period of apprehension but after understanding how it works see would be more satisfied.
Within both interviews my participants talked about how they would like to see more about local culture, so that was important to me to make sure I thought through how she might feel about it through the journey map.
I wanted to include pain-points as well within this model at each stage of the process because I felt it was important to consider where users might choose to leave the platform for any given reason. Thinking through this helped me design for those moments that might happen.
Wireframes
After the user testing, user interviews, card sorting, persona and journey map creation I was posed to create a wireframe mockup of a possible redesign of the WRAL website, our teacher at last second changed it to a mobile design opposed to desktop.
To see full wireframes with annotations please click onto the image.
Final Design
The final design was done in Adobe XD. I believe this design is an improvement upon the old website in several ways, first, it will greatly reduce cognitive load of the user because of the new simplified streamlined design. Secondly, the placement of the ad, at just the bottom of the screen will blend in more seamlessly into the page.
Here is a link to the full mockup.
Takeaways
User interviews can be a part of user testing, but having them separate can create more user knowledge and understanding. One breakthrough moment for me during this process was the separation of user interviews and user testing. Before I had done both at the same time with users, but now I see separating them, creates less work in the long run. I was able to empathize more with users after interviewing them on their favorite parts of news websites and it helped create the tasks we thought were most relevant to our users during the user testing phase. This helped me create a better end product.
Card sorting is a valid technique to use yourself. The most overwhelmed I felt during this process was when I was creating the sitemap of the website. I had just over 100 menu items to sort, condense, and/or combine. To handle this, I decided to try my hand at open card sorting until I had an sitemap and information architecture I was sure wasn’t going to be a burden to a user.