TRITONED:
MOBILE REDESIGN

UX DESIGN | VISUAL DESIGN

TOOLS
Figma, InVision
MY ROLE
UX Designer with wireframing, prototyping, and user testing
TEAM
Roni, Angelica, Ulric
TIME
2 weeks

PROBLEM

UC San Diego’s current learning management system, TritonEd (TED), is rarely used on mobile. The site lacks optimization and consideration for mobile devices. Because of this, students have difficulty navigating the mobile site due to its poor design.

SOLUTION

We created a mobile-friendly redesign to allow easier navigation for users to accomplish their goals.


RESEARCH

As users ourselves, it was important for my team and I to get outside perspective on the kinds of issues with TED so that our biases would not be the main driving force behind the redesign. Thus, we conducted some user testing to find problems commonly encountered in the site. We did pair interviews (one facilitator, one note-taker) with four UCSD students by having them accomplish specific common user tasks on the site (ie: checking grades, looking at recent class announcements) and observed their processes. Our main objective was to observe how users used the site, what motivated their actions, and what possible mishaps they encountered along the way.

KEY INSIGHTS

From the interviews, we found some common usability issues our interviewees encountered:

  • The excessive clutter on the home page creates a busy environment, making it harder to accomplish the user task.
  • Navigating between courses is a hassle as the navigational structure is set up for inefficiency.
  • Some helpful features are not obvious and take some trial and error to figure out.

Though there is a lot of problems with the site, our findings led us to think more about how the site layout created a domino effect of other problems for the users. We thought about what aspects of a mobile-friendly site could mitigate the issues users faced and what the current design was not delivering in terms of those assets.

COMPONENT TO REDESIGN

The user testing gave us insight on various issues users had, some that we had suspected and some we were unaware of beforehand. After looking at the breakdowns we had of each user issue, we decided to focus on the navigation process from the home page to the classes. It is a necessary component for everyday users and it would address the various issues with the site.

SKETCHES

We took a look at some other competitors such as Edmundo and to see their designs and how they might mitigate the problems we saw in TED’s site. After consolidating the competitive analysis, we moved on to create our own separate sketches on possible redesigns.

Our sketches focused on certain components to help clean up the navigation on TED. In the end, we discussed which aspects we liked from each other’s sketches and combined them for our prototypes.

PROTOTYPING

My team and I made two different prototypes to address the design problem. Angelica and I worked on one, combining our sketch designs together. Roni and Ulric worked on the second one.

Prototype A

Our main feature was the navigation bar which allowed users to change tabs easily to do whatever necessary task.

Prototype B

Roni and Ulric’s prototype used horizontal space to give extra mobility in navigation so that the home page would not be cluttered.

USER TESTING

Of course, redesigns would not hold much weight without user input, so we set up more user testings! We asked four new users to go through our prototypes for effectiveness and feedback. Like the first round of testing, we had users go through specific tasks and analyzed the amount of time and clicks it took to accomplish each task.

Results
Our redesigns for TED proved quite successful. The users were able to accomplish the tasks in 2-3 clicks and less than 2 minutes. They were able to grasp onto our navigational system quickly, giving comments on the overall nicer experience.

LESSONS LEARNED

There were a lot of takeaways from this project that made me more aware of the implications of our redesigns. Though our results were seemingly successful, there are some limitations to our project. Because our users are experienced with the site, their interpretations are biased compared to those of users who never used TED. There is the possibility that testing different kinds of users would lead to different findings, which our redesigns do not cover.

Given more resources and time, we would have talked to different kinds of users to find out what their experiences would be and how that may change TED’s redesign. If we were to revisit the project in the future, we could do some A/B testing of different redesigns based on data collected from different kinds of users to see which design would be most effective overall.

Thanks for reading. 📱
INDEX
SASE Website Redesign
SASE REDESIGN

Web Design

SouveNear Kiosk
SOUVENEAR KIOSK

Visual Design

Focus Mode
FOCUS MODE

UX Design

Other Work
OTHER WORK

Graphic Design