At a Glance
What is Bridge?
"Bridge" is a UCSB campus mobile app that provides essential student services and campus information. It was created by UCSB to allow students to search for UCSB-related information in a consolidated platform for easy access. Features such as academic and financial resources, student health information, and campus organization updates are accessible through the app and would be other wise accessible only through separate and multiple platforms.
Reinventing "Bridge"
From September through December 2021, I collaborated with 3 other designers and a student project manager to redesign Bridge as part of a project team. The goal was to make it more enticing for students to choose Bridge as their primary resource for UCSB related information, and to make a more user-friendly interface overall.
This project was completed in two stages:
- Initial Redesign + research (group)
- Implement new UI with an improved user-experience (solo)
Between the two stages, I had completed my second UX project through a design-athon where I gained more skills and inspiration to polish up this project.
The Problem
Why are students not using it?
Since I am a UCSB student myself, I was able to gain some insight from using the app and talking with my peers. Our initial speculations of our issues were:
- There isn't much quality-of-life advantage to using the app versus simply using a browser to access websites or using social media such as Instagram to keep up-to-date with current campus events.
- Bridge seems to lack information on campus wide organizations and events and students would need to go to a different website to access (ex. Shoreline) information anyways.
Because of these reasons, Bridge has become a resource that is seldomly used and known to UCSB students.
Taking the Deep Dive
Research
App Audit: Gaining a better understanding of Bridge
We conducted a thorough audit of the app to gain a better understanding of Bridge by taking screenshots of the most important screens, took notes on all the included features, Bridge's mission statement, the app's pros and cons, and our initial comments of any rooms of improvement design wise.
Group Vote: What do we think about Bridge?
One issue we realized early on upon opening the app was the overwhelming amount of features and choices a user can take. All the features were in tiles and it's difficult to find anything since nothing was sorted and the colors did not correspond to any specific category. To narrow down our design scope, each of us rated and voted on each feature and app in the desktop version of Bridge and used this system to decide which features and tiles were essential and which only created confusion to the students.
Competitive Analysis: what about other products?
We compared and analyzed 4 different popular campus wide apps used in universities and our campus: Canvas, GauchoSpace (Moodle), Schoology, School Loop, and placed our main focus on their user experience, ease of navigation, and overall usability and user flow. We used our previous experiences with these apps as students as well as information gathered from online forums for the analysis.
In person user interviews
In order to start the project, we had to understand more in depth what the students’ needs are, and that included their motivation to use Bridge as a resources as well as their motivation to use other apps/resources instead of Bridge. We needed to first understand why students find Bridge hard to navigate and difficult to use.
Why are students choosing other platforms when Bridge supposedly has everything already?
We conducted 11 moderated, in-person interviews outside of UCSB's library where student traffic is the heaviest on campus. Demographic information, along with both qualitative and quantitative data were collected.
Some of the sample questions include:
- How do you track and organize your life?
- Where do you usually look for info regarding campus events and orgs
- What non-academic information do you look for and where?
- Have you heard of of know of Bridge?
Research Analysis
User Pain Points: The interface is disorganized and overwhelming
We found that the main issue with Bridge is that its outdated UI and confusing navigation and an overwhelming amount of options in each page. Some UCSB-only resources were great to be included. such as GOLD (class registration platform), Financial Aid, Dining, etc., but others such as the weather, Umail, and nectir did not make sense to be included here since they can be accessed in other apps that would make more sense and would be more convenient to use.
Through thorough discussion, we decided to keep and get rid of some features to simplify the navigation process and help users make decision more efficiently. Tiles voted with more 👍 were decided to be kept and those that were voted with more 👎 were gotten rid of.
What did we find out?
Looking at these fives platforms, we found that grade-book features are essential in these course information platforms from both the faculty and student perspectives. Additionally, a clean and modern UI is a vital aspect that services like these often lack focus on as they mainly emphasize their information display and sharing capabilities between teachers/professors and students. With some research through online forums, students reflected that want to have something nice to look at everyday when they retrieve their assignment and course information and they want to be able to do so quickly and efficiently.
As it is, Bridge was just not what the students were looking for
From the interviews, we learned that a lot of students:
- use GauchoSpace the most for accessing academic and course information
- have heard of and/or downloaded the app but chose not to use it
- would like to access information on the Food Bank, meal swipes, campus events, faculty inform, and booking appointments in a more simple way
- receive information on campus and club events through word of mouth or through social media
All of these are saying that they don't use Bridge but other platforms and methods to acquire course and campus information. This means that we need to devise away where they can complete these essential tasks on Bridge instead of elsewhere, we need to make Bridge their main tool.
Devise clear user interface and make popular services easily accessible
We want to create a seamless experience for students using Bridge, which means making features and student services available directly in-app instead of being redirected to a website. We also want to focus on making the most used features the most obvious on the homepage so that students can achieve their objectives efficiently and not get distracted by features that are only used once every year and those that are unnecessary (such as the whether).
Prioritization Workshop
We summarized all our findings and each if us brainstormed ideas that could solve the user pain points. We did a prioritization workshop as a group with all the stickies to figure out what we should focus most of our time and energy on in our ideation phase. We focused our energy on features and fixes that would require low effort and create high impact to our target users.
Locking down on key features and objectives
To make the best use of our limited time, we focused mainly on features in the "low effort - high impact" region, which are:
Design Process
Overall Procedure
Since this was a group project, we each ideated a set of lo-fi wireframes to base our final prototype on so that we can have more ideas to work off of later on. Eventually, my wireframes were chosen to be the base of the final product, some of which are shown below.
Design Approach
A modular homepage for efficiency
User Problems
- No information hierarchy, leading to difficulty in making decisions in home page.
- Important and popular features and services being not obvious and too messy.
- Logos were not helpful in identifying their corresponding features and services.
Design Approach
- Prioritize popular and essential services and features in the home page.
- Include only features that are most used by students on a daily basis based on research analysis: daily schedule, GauchoSpace (for course material), GOLD (for registration), and daily dining menus.
A more intuitive faculty search
User Problems
- UCSB system not having centralized website/app with holistic faculty directory.
- Difficult to look up specific staff member, need to sort through multiple websites.
Design Approach
- Allow students to find any faculty member across UCSB, including professions, lecturers, TAs, and department specific counselors.
- Display immediate relevant information in each card, including department/subject and email
- Automatically display the most relevant faculty based on past, current and future (registered) courses
Customizable organizations & events page
User Problems
- UCSB offers different websites and services regarding campus organizations and events, making it difficult to find information in a centralized space.
- Students miss events and meetings because of lack of reminders and accessible information.
Design Approach
- Recommend organizations and events to users based on preferences set in the filter.
- Show trending and popular events on the main page.
- Sort campus organizations and events by category.
- Make information accessible to users through intuitive interface
Student resources for all the rest of services and features
User Problems
- Unorganized tiles on original home page makes essential services difficult to find and navigate.
Design Approach
- Organize features not included in home page in a separate page.
- Categorize features into Academics, Student Health, Transportation, and Finances & Registration sections based on internal card-sorting exercise.
- [lo-fi to hi-fi] condensed 2 frames into one to make information easier to access at a glance and reduce clicks required to get to user destination.
Outcome
Reaching out to stakeholders for potential collaboration
Towards the end of the project, we reached out to stakeholders on campus to pitch our redesign seeing as we were able to solve some student frustrations regarding the app. We had a couple back-and-forths through email and also discussed our project through meetings. However, they decided to not implement out ideas in the actual app due to the development cost it would incur.
Despite the rejection, we were still grateful that the school was willing to hear us out and gave us this learning opportunity.
User testing
Overall positive student feedback!
Since we did not have enough time to conduct a round of comprehensive user testing, we conducted a simple user testing to inquire about their feedback on our redesign for possible future iterations. We received good feedback overall, especially on our homepage and student resources pages, as they were significant improvements on the current Bridge interface. We also learned that while we were able to resolve some UX issues from the original app, there were still room for "improvement to align with trendy UI".
Takeaways
What I learned
Since this was my firs UX design project, my learning curve was exponential. I learned a lot on not only how to wireframe and prototype with Figma, but also how to ideate for solutions that address user pain points and frustrations. One of the biggest asset I learned was conducting User Research, from identifying potential issues to crafting interview questions and conducting the interviews in person. This was when I experienced how powerful and essential research is in design, because without it the design is just art that doesn't solve a problem.
How can I improve?
Perfection is still a long way to go
Although we received positive feedback from our peers, I recognized that perfection is still a long way to go. At the time, I was unfamiliar with creating clean UI. There were a lot of misalignments and inconsistencies in the wireframes as I was too focused on creating the content that would be on each page and making sure the information was accessible.
Implement better UI
If I had more time, I would focus on sharpening on my UI skills to create more cohesive designs that is more pleasing to the eye and implement more UX design principles when creating the app interface. While designing, I also neglected taking phone shapes into account, which means that the heading up top would be cut off by the phone (ex. where the front camera is placed on an iPhone).
Stay focused on user needs
There were some instances where I was too focused on "adding features" that I lost focus on user needs. It was obviously impossible to redesign the entire app and implement every single feature that we wanted. In cases like these, I would have liked to re-prioritized the various design implementations and focus more on quality rather than quantity.
Part 2
Experimenting with new designs
A couple months after the project ended with the team, I decided to play around with the designs more to practive my new learned skills from a different project. This time around, I had the opportunity to fine tune the color palette and use my new learned knowledge on variants, auto-layout, and better UI/UX practices to create cleaner user interface.
I used still the navy-yellow branding colors of UCSB but spiced it up and added more vibrant colors as well. I didn't want another campus app to be boring and rigid, I wanted Bridge to be fun and exciting!
The goal of this re-redesign was to experiment with my new UI skills and play around with different styles and colors to create an user interface that is more modern and clean.
In addition to new design system and UI, I also wanted to address some issues and details that I did not get to work on first time around.
What's New?
New style guide
The biggest change in stage 2 is the user interface and branding. In stage 1, we adhere pretty strictly to the Bridge branding: gold and navy. I wanted to make the app more vibrant while still incorporate the original branding in it, so I added other accent colors of green and red.
However, I made a critical mistake here, which was not differentiating the use cases and functionalities of each of these colors! I used these 4 main colors (gold, navy, green, red) decoratively and not intentionally, which eventually caused some minor confusion as to which elements are active or not. For instance, some users could not tell if an element is a tag or a button during testing.
Additional features and issues addressed
Since this re-redesign focused mainly on UI design, I created the detailed designs on features that we included but did not flush out in the previous prototype. In the new prototype, I designed intuitive flows that made more sense to UCSB students and decreased the time needed to reach the user goal.
Login page and widget-like home page
By logging in with SSO upfront, students wouldn't need to re-login on an external site every time they access a separate UCSB app.
The modular and widget-like home page would also allow students to see an overview of their day and specific features that are most used to a typical UCSB student, which included a cohesive schedule and course menu at a selected dining hall on campus.
Implementing "save" feature and reminders
Within the Organizations and Events page, it is separated into "My List" and "Recommended" with recommended events and clubs generated by what they had already participated in or by their major and other related student data. They can also put in preferences in the filter to generated more events and clubs.
The saved events and clubs would go to "My List" where they can see an overview of upcoming events and the clubs they are currently involved with along with their respective events and reminders in the club cards.
Student resources and easy access to course information
In this flow, I flushed out the design for a mobile-optimized version of GauchoSpace based on a typical weekly layout. From there, students can not only access course material, they can also access their grades, syllabus, and announcements easily from the course page without having to navigate tiny buttons and menus on the GauchoSpace website.
Since GauchoSpace is a resource students access on a daily basis, including its features directly in the app would highly impact how students use Bridge.
More academic resources: directory & library information
In addition to the previously addressed directory features, students would not be able to add faculty to the "My People" list if they want to contact them quickly in the future.
With an integrated Library booking service in app, students would be able to book library rooms through Bridge instead of in a seperate browser through Libcal.
To declutter the interface, students can add or remove any resource "widgets" on the resources page to only include what they need on a regular basis.
Dining hall information and meal swipes
In our interviews, some students have voiced their frustrations on how hard it is to check how many meal swipes they have left and check the wait line and menu for the dining halls on campus. To access these information, students would need to go on 3 separate websites and apps just to get the full picture of what they will be eating for the day.
With this new design, students would be able to see all the dining-related information (swipes, menu, waiting queue cam) all in one place instead of having to download/use other apps such as Transact Mobile Ordering or Go Gaucho.
Final Product
Usability Testing
Time on task
After completing my own redesigns, I asked 5 students to test out the prototype. They were asked to first use the original Bridge app to check how much meal swipes they had, starting from the Bridge app home page. After completing this task, they were asked to complete the same task on the newly design prototype.
The result was an average of 46% decrease in time consumed to reach the user end goal in this particular use case.
Is the redesign actually better?
Besides the testing, we also casually asked some other students to use our app and they all had positive responses regarding the convinience and ease-of-use, and the general improvements from the original Bridge app. They liked that the Bridge redesign would not take them out of the app to a new browser tab to access a school website/app, and that the app takes care of the SSO log in at the beginning so that they can access everything at one place. One student also commented that "everything was more intuitive to find and access in the new design."
Besides the confusion on the tag/button UI mentioned here, I would say the redesign was overall a success as it achieved my goal of improving its functionality, and would make students actually want to use it, especially if it means that they don't need a UCSB folder on their phone with 5 different UCSB apps.
Takeaways Part II
What did I learn this time around?
Consistency is key
While I successfully injected vibrancy into the app's aesthetic, I overlooked vital distinctions between active and non-active elements. For instance, the resemblance between "tags" and active buttons due to shared colors and shapes caused confusion. Furthermore, treating the four main colors as interchangeable colors compromised the interface's cleanliness and cohesiveness. This experience taught me that paying attention to these small details is really important for the overall user experience in future projects.
If I had known better...
I would have pursued a more rigorous validation process for my designs. Rather than relying solely on peer input, I would have taken a more systematic approach by using methods like user testing through surveys and interviews. This way, I could have involved a wider range of people to gather different insights and suggestions for improvement.
Additionally, I could have focused on creating clear UI guidelines for different parts of the design, making sure each component type had its own rules for colors and styles. This attention to detail would have made the project look more polished and work better overall.
Building an entire app is hard work!
When I challenged myself to re-redesign a better version of Bridge, I wanted to improve the entire app, which in hindsight I should have known was not feasible. I had been too ambitious and it was task that was beyond my skillset at the time. If I were to work on it now (a year later writing this), I would have been able to scope the project and prioritize the tasks better to acheive a better overall result.
However, even though this redesign focused mainly on incorporating some new features and visuals, it taught me the importance of having detailed design systems that go beyond just stating if something is active or not. There's still a lot for me to learn when it comes to creating cohesive design systems – keeping things consistent across the app and making sure everything makes sense to our users is key!
