Designing for Dynamic Software
By: Crab T
Tags: UX, Uvu, Software, Portfolio

The world is continuously moving online, and that includes classrooms. I was tasked with finding new functionality and organization for the classroom software GoReact.

A GoReact representative met with me to layout some of the groundwork and tell me a little bit about the software. Something that came out of that meeting was that the GoReact team felt a little lost about who their target audience was. They built the site to be a more interactive version of Canvas, but quickly integrated their software to work within Canvas. They also talked about how a surprise audience was the deaf community, who represented the majority of their user base early on, and who they catered towards in future designs.

The main aspect the team wanted to see redesigned was the video page, as it housed most of the unique functionality GoReact has to offer.

GoReact’s main purpose is to find a way to present, and have comments easily based off of timestamps. The issue found with its original design was clutter and clarity.

In my redesigned version I focused on reducing that clutter, only showing items when necessary, and having more user choice in what’s displayed. I accomplished this by moving the different tabs into a dropdown menu and having comment interactions show only when hovering over the comment.

The team also wanted to use their color scheme for buttons throughout the site. The problem they had was their main color, red, was used on buttons meant for confirmation or continuation in some pages, and canceling on others. To fix the issue I used their red only on cancelation and back buttons throughout the site.

To fix their concerns about page clutter, I turned their horizontal menu into a vertical dropdown. This lets the user choose a new tab only when they want to, and gave the icons more room to breathe in the default page sizings.

On tabs, you’d still be able to write a comment, but it wouldn’t post until the user came back to the main comment tab. Instead of covering already user comments, we had each tab cover the add comments section, while still leaving the main area comments up for users to refer to.

Another fix for the original site was that each video had feedback statistics. The feedback could be found under the video, but was difficult to see. So much so in-fact, that I didn’t notice it as a feature until a few days into working on this project.

The solution was to add it to the menu, as this kept it from covering the video as it did perviously. The feedback could track what type of comments were left, but only if you were to hover over the right part of the graph. Adding the total number of each comment type meant that they could easily find what types they’re looking for.

The last important change I’d like to point out is the Endnote tab. Previously the tab would shift the menu, thats located towards the bottom, to the very top of the section. It also felt like a text editor program when used instead of a long form summary comment for the video. By making it smaller, and adding some text formatting tools, it felt better suited for its job of overall video reviews.

I enjoyed this project because I have a deaf cousin who struggled in school, even an all deaf school. He really struggled with the online elements of classes because most sites he used weren't built with his disability in mind. It was fun to try and get into his headspace and design based around him, and what would be helpful for every user.

Trevor Thompson is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The following article relates to Stake Holders in the DGM 2250 Course and representative of the skills learned