Orange Media Network

Practices in usability

 
33b5f0ba-1e9e-11e9-b40c-837c368fce5b.png

Service

Orange Media Network (OMN) is the media outlet of Oregon State University, and consists of six different student-run media publications and services, ranging from newspapers to radio stations to art and literature magazines.

Team & Role

The project was an independent foray into UX under the supervision of the lead web developer & marketing manager at OMN. All findings and designs were done by me and presented to OMN staff at the conclusion of the project.

Project

This micro-internship revolved around demonstrating concepts that would improve usability and user experience for the OMN mobile experience. The core practices in the project consisted of user research, user interviews and iterative interface design. The entire process from start to end took place over the course of a university term (3 months).

Component 1.png

User Research

The goal of this redesign was to increase user satisfaction and success when engaging with the Orange Media Network platform, and user research was used extensively as a first step in this process. Through interviews with students who used the platform, I was able to find common pain points that users had. I also accumulated user feedback on their perception of the platform.

Initial Pain Points & User Feedback

User interviews revealed insights pertaining to the UI of the current web and mobile experience, highlighting key factors inhibiting satisfaction and success rate. These factors included the placement of ads and newsletter blurbs that tended to block user engagement and confused readers. In addition, users had to dig through pages to find content that was old and buried due to the mobile layout as the UI consisted of very large cards, rather than a grid or list view.

Some key features or changes that were suggested during interviews included the streamlining of the interface, making cards smaller, condensing information and saving users time to view articles. There was also an aspect of customizability that was a common point from users, as the front page showed articles from all the departments of OMN. This inspired the functionality for allowing a user to customize their feed to suit what content they wished to see.

Design

Taking user feedback into account, I surveyed the different design routes available to me, especially focusing on user-centered, streamlined and minimalist interface design. I also wanted to maintain some similarities to the current UI where they could be kept so as not to alienate those who enjoyed the card-based view better. I opted to plan out a user roadmap, plan a customized feed, and weigh the value of card view versus list view.

Card View vs. List View

To assess the benefits of both designs, I opted to study what each type of view is best at. Card view requires more screen space, especially considering the already limited screen space on mobile devices, and forces users to scroll heavily to see a wide range of content. While users have to scroll and subsequently leave behind content, they have a harder time remembering content that was passed by due to cognitive load. The upside of card view is that images and text can be larger and more detailed, catching a user’s eye due to the increased emphasis on the article. Lists, on the other hand, are much more condensed and user’s can see more choices on a screen while also largely avoiding the problem of cognitive load. For the article-based design of OMN, lists would be great for showing information, especially from a wide range of sources. I opted to include both and to provide a setting for users to toggle the view of the interface between card and list.

Customized Feed

Given the pros and cons of both types of views, I opted to include a toggle that would allow card view and list view to be switched, allowing users to choose what method of browsing and content engagement they preferred. This would be alongside the settings where users would be able to customize and curate which OMN content they would like to see.

User Roadmap

In order to have a general sense of how a user would interact with the new interface, I made a user roadmap that would serve as the basis of user choice for the application.

weweew.png

Prototype

Keeping in mind the design emphasis on streamlined and minimal interface elements and user customizability, I opted for a clean palette that also incorporated elements of OSU and OMN branding. The card view was meant to be the default setting as OMN mobile users would be familiar with it, but could be toggled to list view in the same settings screen where user feeds could be curated. Users could also view individual categories/publications of OMN.

Group 2.png
Group 4.png
Group 3.png
Group 5.png
Group 7.png

Reflections

Being one of my first UX projects, especially during college, it was very informative to implement concepts and user research into a prototype effectively. I learned critical user interview skills and divided this project into steps which made it organized, feedback-responsive and most importantly easy to replicate in case of further work and collaboration for OMN.