CASE STUDY
Media Day Application
Project Overview
The Media Day App is an academic digital product for Loyola University New Orleans that strives to help incoming high school students find their scheduled sessions on campus pertaining to the School of Communication and Design. With the app, users are able to easily navigate and locate their sessions without stress or confusion!
Role: UX/UI Designer
Services: UX Research, Sitemaps, Wireframing, UX/UI Design, Design Systems, Prototyping
Duration: 14 weeks
Tools: Figma, Figjam, Notion
Problem Statement
High school students may struggle to navigate their recommended activities and sessions on an unfamiliar campus. Instructors and campus stakeholders also need an organized way to keep track of students and their personal responsibilities throughout Media Day.
The Solution
-
Design a UI system that integrates simple access of campus courses for university stakeholders and students.
-
Allow stakeholders and instructors to see key information digitally rather than cluttered paper work.
-
Allow students to schedule and adjust recommended sessions with ease.
-
Provide an interactive map to help students navigate their way around the university campus.
Discovery: Workshop & Survey
Gaining Insights through Quantitative and Qualitatve Research
Our team’s research process started with a discovery workshop/meeting, inviting stakeholders to share important insights and goals surrounding media day. My role was to help lead a discussion with open-ended and closed-ended questions while three of our team members recorded notes. Through this workshop, our team learned more about the audience and gained insights on important KPIs and goals for Media Day.
Our team also gathered quantitative research through a survey where we were able to learn specific demographic info, personal user experiences with previous Media Days, and what users wanted mostly when navigating through an app for Media Day.
Define & Ideate Overview
During our defining and Ideating design process, our team explored a few sets of UX research methods such as personas, Journey maps, and information architecture. My tasks were focused on defining user needs and behaviours through user journey maps and ideating through an information architecture for the app.
Define: User Persona
This is one of the three user personas that a team member designed to better understand the needs, wants, and behaviors of our specific users. With personas, I was able to move forward with defining and visualizing the user’s experience and possible pain points.
Define: User Journey Map
Mapping the User Flow
During this phase, a team member and I worked on creating user journey maps to define and understand our user’s needs and behaviors as well as how they may feel before, during, and after using the application.
Ideate: Information Architecture:
Structuring the Application's Features
I worked on this information architecture in Figjam for our team to reference so that we better understand the flow state of the app. This is also to make sure that all features in our app are easy to understand and navigate.
Design: Low-Fidelity Wireframes
From Iterating to Designing
Upon concluding our research phase, we began to work on low-fidelity wireframes as a team. We all presented our own versions before moving to a more consistent and final version. The team decided to apply my designs for the map in future iterations and my task was to produce wireframes for the app’s user account screen.
Design: High-Fidelity Wireframes:
Diving into System Design and User Interfaces
After many low-fidelity wireframe iterations, our team developed high-fidelity wireframes and a user interface system to showcase the app’s personality and brand as well as the key features. My tasks mostly focused on refining the UI of the user account, dashboard and session screens.
Usability Testing:
User Navigation Insights
Our team conducted usability tests through the design stage for both our wireframes and high fidelity designs and prototype. Two team menbers and I conducted our own seprate testing workshops with groups of users where we gained insights to validate our designs and to discover navigation pain points.
Project Reflection
What I learned
Throughout this process I learned how to create UI design systems to maintain consistent layouts and UI designs. This process also taught me how I work in a collaborative environment and share ideas with my peers. I became more comfortable with presenting goals, design ideas, and executions to stakeholders. It was eye-opening to understand the importance of usability tests and how feedback can strengthen designs for better navigation experience and visual organization.
Challenges
-
It was challenging to meet both user’s needs and stakeholders' needs.
-
Issues arose when gathering qualitative research, as many potential users were not always available.
-
Working with brand colors and visual elements were a challenge, as color combinations did not always produce the best contrast on mobile screens.