Project Overview
Challenge
UCLA's Bruin day is a 2-day event for newly admitted students and their families that packs quite a number of events for various departments to showcase what the school has to offer. We had designed an app in 2022 that organized information about various events in a simple and approachable way online so users could find appropriate details anytime and plan ahead. Our clients at UCLA wanted us to further simply the app for easier navigation and redesign using their new design guidelines.
Solution
Improve the overall experience by re-designing the flow in order to make the navigation more efficient.
Design User interface and adjust screens accordingly based off of provided brand guidelines.
Tools
Adobe XD
Adobe Illustrator
Balsamiq
Adobe Photoshop
Role
As the sole UX/UI Designer for this project, I was responsible in redesigning the overall UX/UI of UCLA's Bruin Day web app. My role included brainstorming with my teammates, communicating with software developers and weekly meetings with clients.
Design Process
The design process for this project involved spending more time on conceptualizing and iterating, since the UCLA's events team already provided our team with information on who we will be designing for and what features need to be implemented.
Inspiration
There were multiple meetings with UCLA's Events team to get a better understanding of what they were looking for. These meetings were also helpful in understanding the audience we were designing for. Since, our team had been working with UCLA from the past 3 years to produce apps and websites for various events at UCLA, and since we designed the first Bruin day app for them, I had an deeper understanding of their expectations.
Current State Evaluation
Analyzing the previous year's Bruin Day app that we designed and identifying pain points was naturally the first step in this process. I went through each screen to figure out what could be improved and how the new branding could be incorporated.
My previous year's Bruin Day app design
After meeting with the clients and brainstorming possible features that had to be improved, we landing on the following insights:
Conceptualization
Sitemap
The next step in my design process was visualizing how the product would be structured. Multiple iterations, brainstorming and client insights resulted in a refined sitemap that reflected clear hierarchy while defining features.
Final Sitemap
Validation
At every step, the clients and teammates were involved for feedback. Meetings were set up every week to discuss progress and clarify any questions either of the teams might have, in order to ensure communication.
Iteration
Wireframes
Low-Fidelity Wireframes: Once the sitemap was defined, I started creating low-fidelity wireframes. Thought, the client wanted the prototype for both mobile and desktop to be created simultaneously, I decided to go with mobile-first strategy in order to make sure I could capture every detail and feature on smaller screen space. Creating these wireframes and sharing them with the client provided invaluable insights on what was lacking and what worked from a layout perspective.
Mid-Fidelity Wireframes: Once, the low-fidelity wireframes were in a good spot, I created High-fidelity wireframes to further define screens on mobile along with designing for desktop. Since, the branding was provided, I added brand typography to bring it closer to the prototype that would be designed.
High-Fidelity Wireframes: Once, the Mid-fidelity wireframes were approved, I worked on the UI and created high-fidelity wireframes referring to UCLA's branding. Important interactions were simultaneously created to give a sense of how the actual website would look. After this phase, I went ahead and created a functional prototype for the clients to test and review.
High-Fidelity Wireframes - Desktop
Implementation
After Client review and multiple meetings to refine the design, the assets were handed off to the developer. I was in constant touch with the developer to ensure smooth translation of design into a working app.