oncampus
Methods: brand design, competitive analysis, user interviews, usability testing, wireframing, prototyping
view 2020 Figma prototype ︎︎︎
view 2019 Figma prototype ︎︎︎
view website ︎︎︎
a pre-existing product
OnCampus was built with one challenge in mind: UCLA students needed an easy and quick way to discover new student clubs they might be interested in joining.
challenges from research insights
From the feedback, we realized that the site did not provide adequate information upon first viewing to our target audience: students who were completely unfamiliar with the different clubs on campus.
redesigns
With a renewed focus on the term “discovery,” a design sprint was held to encourage cross-team feedback. From there, we redesigned the home page, the search page, and the club card components.
design sprint
The design, development, and marketing teams were involved in the brainstorming process of the new site. From there, our redesigns incorporated the best elements of each team member’s wireframes.
home page
The search bar that originally took up the entire home screen now had a permanent residence at the top navigation bar. This was an effort to focus less on search-based discovery and more on browse-based discovery.
search page
Applying filters now resembles the process of filling out and submitting a form. Originally the filters applied automatically, but this confused mobile users who did not realize this updated the page in real time.
club card components
A tag system was designed and developed so that students could get a quick overview of a club’s purpose while browsing.
This tag system was further expanded upon in Summer 2020.
a new OnCampus
conclusion ︎
We successfully launched our redesigned website at Fall Quarter Demo Day.
Joining a pre-existing team with a pre-existing product was a refreshing change of pace. I learned how to quickly acclimate to established team dynamics and goals while also providing new ideas to the table.
a new identity
New year, new identity. During Spring 2020, the OnCampus team decided that this would be an opportune time to rebrand, especially given the influx of new students that would be using the site for the coming remote quarter.
After undergoing a branding sprint with a new marketing team, we finally decided on a redesigned logo and marketing graphics to match.
research
context
During the summer, we were limited on time and manpower.
I was the sole designer for OnCampus at the time and had planned my departure from the team in advance.
Fortunately, a team member was interested in taking over my position, but had no prior background in UX/UI design. We decided to run through one last round of iterations for search page designs while simultaneously training our team member through hands-on experience.
feedback + competitive analysis
From previous feedback, we recognized how last round’s new changes have significantly improved the user experience of figuring out if they successfully found a club that suited their interest, but that we still had room to present more information in a more compact way.
We conducted a competitive analysis to see how other campuses approached this problem and discovered that many schools utilized template designs.
We took note of the pros and cons from these sites and took them into consideration when redesigning our own search page.
redesigns
From there, we spent three days creating a mid-fidelity prototype for user testing.
search page
The biggest changes were decreasing the width of the filter bar and reorganizing card views. Of the things we wanted to test for the most, we wanted to see if users preferred to have the flexibility of determining their own view or if one view was objectively easier to browse through than the other.
We created two different views: a compact “cards” view with two columns vs. a “list” view similar to one we currently have implemented.
club card components
feedback
Our suspicions about the current site were confirmed from usability tests; people felt that the filter bar took up too much of the screen despite how little it was used and that they would prefer if the space was used to convey more information about the clubs instead.
As for the redesigns, we received overwhelmingly positive feedback on the new club view lists. All participants were able to complete their user tasks with ease and noted that future features such as bookmarking and recruitment banners on cards would be helpful.
conclusion ︎
We had a very quick turnaround period this time with a total of two weeks in comparison to three months from last Fall, though we still managed to gather valuable information.
This was my first time leading a design sprint, and it was my pleasure to teach everything I knew about UX design to the team’s new designer.
I wish the OnCampus team the very best with the direction they choose to go!