```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2F7zkb5bntuARLu5tC0jIG%2F22098588-d1f7-4936-9566-af59a78d3771.png?alt=media&token=a183b73f-c4bc-4429-827f-92782b34bc68","id":"22098588-d1f7-4936-9566-af59a78d3771","width":1920,"height":1440,"filename":"half-court-sports.png","type":"image/png","caption":"","border":false}]}
```

While watching the Creighton Bluejays upset the Iowa Hawkeyes during the 2022 women’s NCAA March Madness basketball tournament, I noticed that the arena was fully packed with passionate fans.

This inspired **Half Court Sports**, a personal project with the goal of helping sports fans build meaningful connections with female athletes and learn more about women's sports.

### **Role**

Designer + Researcher

### **Duration**

July 2022 - August 2022

### **Research**

To better understand the current women's sports landscape, I conducted secondary research, user interviews, and a competitive analysis. By doing so, I was able to get a more representative perspective of women's sports fans and understand fans current engagement level with women's sports

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2F7zkb5bntuARLu5tC0jIG%2F49f8145d-0669-43be-b9aa-2916d64a8298.png?alt=media&token=c6729f2f-00ed-4cb0-8579-16f786b798db","id":"49f8145d-0669-43be-b9aa-2916d64a8298","width":1920,"height":1536,"filename":"834shots_so.png","type":"image/png","caption":"","border":false}]}
```

### **Defining the Problem**

After conducting research, I used some of my key research findings to define the problem and guide me throughout the ideation process.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2F7zkb5bntuARLu5tC0jIG%2F13346ace-ef54-4f0e-80a4-e599f9b4d04c.png?alt=media&token=72b4f076-cc16-49e2-a478-2ef76c2aa69e","id":"13346ace-ef54-4f0e-80a4-e599f9b4d04c","width":1920,"height":1440,"filename":"999shots_so (1).png","type":"image/png","caption":"Key Research Findings","border":false}]}
```

## **How might we highlight female athletes' stories to help establish a stronger connection with fans and make women's sports content more accessible?**

### **Site Mapping**

Prior to sketching my initial ideas, I created a site map to plan and prioritize the important features and screens that needed to be implemented.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2F7zkb5bntuARLu5tC0jIG%2Fb0d3eb21-5604-4798-b6af-71c1440b7e71.png?alt=media&token=a42f2f5f-7f6b-4aaf-b744-7dd4fd01ae1d","id":"b0d3eb21-5604-4798-b6af-71c1440b7e71","width":1920,"height":1080,"filename":"501shots_so.png","type":"image/png","caption":"","border":false}]}
```

### **Sketches + Low Fidelity Wireframes**

After organizing the key features, I proceeded sketch a rough layout of the mobile app and then converted them to low-fidelity wireframes. Through this iterative process, I added more detailed designs and features to the wireframes.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2F7zkb5bntuARLu5tC0jIG%2F723bc8a8-a575-4bac-8c22-296bc49022fb.png?alt=media&token=c59f9c4c-ed25-4a46-a1c6-0d6dc81f812d","id":"723bc8a8-a575-4bac-8c22-296bc49022fb","width":1920,"height":1440,"filename":"337shots_so.png","type":"image/png","caption":"","border":false}]}
```

After multiple iterations and refinements, I arrived at a final user-centered design solution that is a reflection of my research findings and problem statement.

### **Onboarding**

During the onboarding process, the user can choose their favorite leagues, teams, or players to access a personalized home feed when entering the app to have a customized experience tailored to their interests and preferences.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2F7zkb5bntuARLu5tC0jIG%2F31ca0c60-5e7a-404e-8d1d-675eb3819424.png?alt=media&token=da5a15ef-9617-4f61-af87-3240890e7c8f","id":"31ca0c60-5e7a-404e-8d1d-675eb3819424","width":1860,"height":865,"filename":"Frame 271.png","type":"image/png","caption":"","border":false}]}
```

### **Home & Event Details**

On the homepage, users are presented with the upcoming events for their teams, as well as their personalized feed consisting of **social media content, articles, and highlights**. This personalized feed provides users with a quick and easy way to stay up-to-date with the latest news and updates from their preferred sources.

Once the user selects an event, they are able to see the main feed for that event, as well as important player and team stats.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2F7zkb5bntuARLu5tC0jIG%2Fcea03009-0f5b-49e3-8d48-c39260328a71.png?alt=media&token=084c134e-f0e1-46a3-bcaf-a970962eacfe","id":"cea03009-0f5b-49e3-8d48-c39260328a71","width":1383,"height":865,"filename":"Frame 269.png","type":"image/png","caption":"","border":false}]}
```

### **Team Details**

When a user selects a team to view, they are able to access the team's upcoming events, league standings, entire schedule, and a dedicated team feed. One of the key features I prioritized based on market research is the team roster, which allows users to view **player images and stats to gain a deeper understanding of the individual players on the team**.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2F7zkb5bntuARLu5tC0jIG%2F1af80386-06b6-4761-a731-46ca56d8b38c.png?alt=media&token=40af9c4e-a661-4f86-ad06-ed2d76236242","id":"1af80386-06b6-4761-a731-46ca56d8b38c","width":905,"height":865,"filename":"Frame 268.png","type":"image/png","caption":"","border":false}]}
```

### **Player Details**

On a player's page, users can access a variety of information, including the player's social media feed, relevant articles, and highlights.

By being able to view the player's social media content, users can gain insights into the **player's personality and interests beyond sports**. This allows users to build a deeper connection with the player and creates a more engaging and personalized user experience.

In addition to the social media content, users can also access the player's stats and a brief biography, which includes the player's career accolades. This provides users with a more detailed look at the player's performance and achievements throughout their career.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2F7zkb5bntuARLu5tC0jIG%2F02850923-fa61-4850-94f2-f98bb9a9441a.png?alt=media&token=b340bc5f-3fb8-4988-9a93-2773ba9b44fc","id":"02850923-fa61-4850-94f2-f98bb9a9441a","width":1383,"height":865,"filename":"Frame 276.png","type":"image/png","caption":"","border":false}]}
```

### **Trending**

The trending page features a curated selection of articles and highlights from leagues, teams, and players that users may not be following. This provides users with an opportunity to discover new and exciting content from a wide range of sources.

By showcasing trending content from across the platform, users can **expand their knowledge and interest in different leagues, teams, and players**. This helps create a more engaging and diverse user experience, and allows users to stay up-to-date with the latest news and trends in the world of women's sports.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2F7zkb5bntuARLu5tC0jIG%2Ff3107389-630c-455a-94ca-7e169b833c55.png?alt=media&token=4a11b091-47d3-4165-9cd7-ad631328ac02","id":"f3107389-630c-455a-94ca-7e169b833c55","width":905,"height":865,"filename":"Frame 278.png","type":"image/png","caption":"","border":false}]}
```

### **Community & Events**

The community page provides users with a platform to share their reactions, opinions, and comments on a team's community. This creates a space where users can engage with one another and **build a sense of community around their shared interests**.

The events page provides users with an at-a-glance view of upcoming events, allowing them to easily plan and stay up-to-date with their favorite sports.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2F7zkb5bntuARLu5tC0jIG%2F97acdcbc-61dd-425f-b250-50dba9639aaf.png?alt=media&token=d8331302-724b-4172-aacf-b1e9a4f3bc94","id":"97acdcbc-61dd-425f-b250-50dba9639aaf","width":905,"height":865,"filename":"Frame 278 (1).png","type":"image/png","caption":"","border":false}]}
```

### **Reflection**

As a personal project, this design allowed me to experiment with different research methods and technical aspects of design. Throughout the process, I learned many lessons that will impact my future design work.

One of my main takeaways was the importance of constantly referring back to my research findings and problem statements. At times, I found myself exploring design ideas that did not align with the user's needs or the original problem statements. Having these documents as a reference helped me to stay on track and ensure that my designs were user-centered.

Also, I found myself trying to solve too many problems at once. I realized that quality is better than quantity, and looking back I could have focused on solving one problem exceptionally well.

If I had more time, I would have liked to explore the comment section on different posts as it can create a sense of community within the app.

Half Court Sports

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2Fcareergram%2F8f7ba110-8e8c-49c7-a191-781824589a2b.png?alt=media&token=c7dbdc29-9dcd-4ca0-a0ee-2c9847de97a0","id":"8f7ba110-8e8c-49c7-a191-781824589a2b","width":1920,"height":1440,"filename":"802shots_so.png","type":"image/png","caption":"","border":false}]}
```

Careergram is a research project part of the [UCI Design and Partnership Lab](https://www.daplab.education.uci.edu/). The goal of Careergram is to help young people develop deeper identities toward career pathways by mapping out the aspects of experiences about careers, identity, and self around which young people develop their occupational identity over their lifetimes.

### **Role**

Designer – Visual Identity, User Experience, Interaction Design, Design Systems

### **Team**

Jessica Cai, Jenny Han, Sharon Ma, Minh Nguyen

Advised by June Ahn

### **Problem**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2Fcareergram%2F8ed0197e-4d67-4ccf-a241-c2811f004a3d.png?alt=media&token=848fc5e7-923b-4013-951b-c55f06edcb59","id":"8ed0197e-4d67-4ccf-a241-c2811f004a3d","width":1920,"height":1080,"filename":"445shots_so.png","type":"image/png","caption":"","border":false}]}
```

Many young people encounter challenges with defining their occupational identity, a crucial aspect that shapes their perception of future career paths. Students will tend to seek career guidance from mentors, yet it can be difficult to come up with effective questions and conversation starters to help them define their occupational identity. Additionally, mentors may struggle with accurately understanding students' needs and goals, making it difficult to offer proper guidance and advice.

## **How might we help young people develop deeper identities toward career pathways by fostering stronger connections between mentees and mentors?**

### **Solution**

Careergram aims to foster stronger connections between mentors and mentees by using short surveys to collect formative data from students. These surveys are based on five practical measures defined by the [AXCIS Project](https://sites.uci.edu/axcis/). The data is analyzed using large language models to provide actionable insights and questions for students to discuss with their mentors. By doing so, this helps both mentors and mentees uncover information about career goals and values to provoke more engaging conversations.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2Fcareergram%2Fd1b4ec13-7844-40b2-9f2e-43ea4b5b8952.png?alt=media&token=9d5c47c1-83c2-4ef4-9bf7-27e15684cba6","id":"d1b4ec13-7844-40b2-9f2e-43ea4b5b8952","width":1500,"height":500,"filename":"812shots_so.png","type":"image/png","caption":"Practical Measures","border":false}]}
```

### **Refining the Survey Questions**

One of our first steps was to refine the survey questions based on the five practical measures to encourage better reflection from students and better analysis from the large language model.

During this process, we acknowledged that our analysis is not meant to provide students with the answers, but rather to **spur insights and conversation topics** during in-person meetings, which led to including action items for students to pursue after reading their insights.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2Fcareergram%2F8555582f-5526-4017-a4ec-79a172bfa493.png?alt=media&token=17b0a904-2d24-40cd-a926-afaf0490630d","id":"8555582f-5526-4017-a4ec-79a172bfa493","width":1920,"height":1080,"filename":"725shots_so.png","type":"image/png","caption":"Notes + Low Fidelity Wireframes","border":false}]}
```

### **Visual Identity**

For our brand’s visual identity and design system, I focused on embodying a playful, bold, and fun spirit, drawing inspiration from tangrams typically found in the classroom. The design system was also based on Tailwind CSS and Tremor UI to allow for easy handoff to developers.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2Fcareergram%2F493c528e-4b33-488a-be37-6cee59209a47.png?alt=media&token=0600c468-7122-48b9-b6f2-93cfa418ced8","id":"493c528e-4b33-488a-be37-6cee59209a47","width":1800,"height":800,"filename":"999shots_so.png","type":"image/png","caption":"Tangrams","border":false}]}
```

Our design system includes various colors, including those for our branding and individual practical measures. It was a point of emphasis to be clear and consistent with color usage to ensure color contrast meets the WCAG 2 AAA threshold throughout the designs.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2Fcareergram%2Fdf9b6857-9cc7-410c-8b04-067f6731569f.png?alt=media&token=de45d444-2f4d-4cfe-87f5-80560f872adf","id":"df9b6857-9cc7-410c-8b04-067f6731569f","width":1920,"height":1080,"filename":"522shots_so.png","type":"image/png","caption":"Style Tile","border":false}]}
```

## **Design Details**

### **Survey Input**

A key area of focus was making sure the survey inputs were clear and straightforward in order to get accurate information for data analysis. The survey inputs varied from audio response, free response, and scale-based response.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2Fcareergram%2Fb09d5173-3594-4407-954a-58510612a43c.png?alt=media&token=e991c5cc-d9f1-4f6b-bd29-629e8adf85f1","id":"b09d5173-3594-4407-954a-58510612a43c","width":1920,"height":1440,"filename":"323shots_so.png","type":"image/png","caption":"Self Positioning Input","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2Fcareergram%2F0b1ac01e-993c-4a22-81cf-86ed763a10e3.png?alt=media&token=21152a2a-62b0-46cc-a0e9-0842978649bb","id":"0b1ac01e-993c-4a22-81cf-86ed763a10e3","width":1920,"height":1440,"filename":"965shots_so.png","type":"image/png","caption":"Social Capital Input","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2Fcareergram%2F586508b0-dd00-4e20-ac50-6b27d606687b.png?alt=media&token=dbe454f5-aa34-4e70-8c8a-854f04c45f67","id":"586508b0-dd00-4e20-ac50-6b27d606687b","width":1920,"height":1440,"filename":"766shots_so.png","type":"image/png","caption":"Skillset Input","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2Fcareergram%2F7ebb7793-c0be-4b5f-b76c-2cc002689d5c.png?alt=media&token=bcba34ec-a5da-40ed-9e75-ccb13b970834","id":"7ebb7793-c0be-4b5f-b76c-2cc002689d5c","width":1920,"height":1440,"filename":"675shots_so.png","type":"image/png","caption":"Structural Opportunity Input","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2Fcareergram%2F84e1ebec-fda0-45e4-9e8c-232d82cac68c.png?alt=media&token=af629266-68d8-48cb-9008-aa3fe94fb5c8","id":"84e1ebec-fda0-45e4-9e8c-232d82cac68c","width":1920,"height":1440,"filename":"238shots_so.png","type":"image/png","caption":"Navigation Input","border":false}]}
```

### **Call To Actions**

To help facilitate mentor-mentee interaction, we introduced action items, such as reflection tasks based on their insights and suggested questions to ask their mentor. It was important to emphasize these sections so students would not miss them.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2Fcareergram%2F5ebd362f-68cd-4a0d-867a-caf531f15e81.png?alt=media&token=a16811e0-6389-4f65-9bfa-d42ce3965fad","id":"5ebd362f-68cd-4a0d-867a-caf531f15e81","width":1920,"height":1280,"filename":"6shots_so.png","type":"image/png","caption":"Call to Action Section","border":false}]}
```

### **Student Insights**

To communicate student insights, it was important that the information was presented in a clear and engaging format to make it easily understandable for both mentors and mentees.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2Fcareergram%2F44003024-46f4-4bd5-a80a-e59de5275653.png?alt=media&token=24855996-7b53-4710-af19-84ba9d369dae","id":"44003024-46f4-4bd5-a80a-e59de5275653","width":1920,"height":1440,"filename":"927shots_so.png","type":"image/png","caption":"Self Positioning Insights","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2Fcareergram%2F521bacaa-a2c7-4b40-8317-d9afaac40fba.png?alt=media&token=a5862e44-84b3-44d4-a051-09e35745d11e","id":"521bacaa-a2c7-4b40-8317-d9afaac40fba","width":1920,"height":1440,"filename":"774shots_so.png","type":"image/png","caption":"Social Capital Insights","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2Fcareergram%2F5a6dc6c5-447e-4151-bc2c-930449b650d6.png?alt=media&token=61ec3281-17e6-4de8-8167-14868b6f04ca","id":"5a6dc6c5-447e-4151-bc2c-930449b650d6","width":1920,"height":1440,"filename":"588shots_so.png","type":"image/png","caption":"Skillset Insights","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2Fcareergram%2Ff0b10e13-3dda-4f1d-a4c7-39cf253a7245.png?alt=media&token=9a29e1d4-81d6-4321-828b-4cc77758ae56","id":"f0b10e13-3dda-4f1d-a4c7-39cf253a7245","width":1920,"height":1440,"filename":"458shots_so.png","type":"image/png","caption":"Structural Opportunity Insights","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2Fcareergram%2Fd10f07bb-6858-488c-ace6-23f496879c57.png?alt=media&token=163bd741-f953-44ff-93b2-67d22a635061","id":"d10f07bb-6858-488c-ace6-23f496879c57","width":1920,"height":1440,"filename":"437shots_so.png","type":"image/png","caption":"Navigation Insights","border":false}]}
```

### **Copywriting**

We also focused on writing the copy to incorporate a youthful and playful tone, catering to a young audience and increasing engagement for users as they read through their insights.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2Fcareergram%2F47a347da-0ca1-4e51-a35b-a51eb296248f.png?alt=media&token=01e0213c-4de9-4b48-9a1b-6a22c9774ef0","id":"47a347da-0ca1-4e51-a35b-a51eb296248f","width":1920,"height":1280,"filename":"341shots_so.png","type":"image/png","caption":"Copywriting","border":false}]}
```

### **Loading Indicators**

Because Careergram includes AI analysis to process data, it was important to communicate loading statuses and engage users during long loading periods.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2Fcareergram%2F7e55a591-9828-406f-b7bb-dc433e17f7f8.mp4?alt=media&token=6c5b5274-8be6-461d-897c-28c9cb3d3bd4","id":"7e55a591-9828-406f-b7bb-dc433e17f7f8","width":1890,"height":1228,"filename":"loading.mp4","type":"video/mp4","caption":"Loading Animation","border":true}]}
```

### **Validating Designs**

As a student, it was easy to understand the mentee perspective, but we were lacking insights from mentors. We interviewed a mentor from UCI’s [Sage Scholars Program](https://www.sagescholars.uci.edu/) where we were able to validate our design decisions and get a better understanding of how mentors might interpret students’ insights.

Additionally, I conducted user testing with two users to polish the user interactions and flow. One major pain point was the interaction for adding new Careergrams. Based on this feedback, I added a hover interaction to make adding new Careergrams more intuitive.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2Fcareergram%2F1cad8c18-f9f9-4c38-bcaa-815e900fd67f.mp4?alt=media&token=343aea4f-5856-4105-8520-3e388944245d","id":"1cad8c18-f9f9-4c38-bcaa-815e900fd67f","width":1432,"height":1596,"filename":"demo.mp4","type":"video/mp4","caption":"Hover Interaction","border":false}]}
```

### **Reflection**

During my time on this project, I learned the importance of communicating and consistently sharing what I'm working on. This helped iterate quickly and keep everyone on the same page. Additionally, I learned different ways of asking for feedback based on where I am in the design process. Moving forward, I hope to use these skills in future projects!

Careergram

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2FoxSpuh9M9Hn9WKXfL0s0%2F6c9b47df-e4a7-47e1-b3ff-9a23b58015d2.png?alt=media&token=07754de9-fd8a-4e97-aaa1-d8c8a8c36ca4","id":"6c9b47df-e4a7-47e1-b3ff-9a23b58015d2","width":1196,"height":1080,"filename":"location - las vegas (1).png","type":"image/png","caption":"","border":false}]}
```

[Oloid](https://www.oloid.ai/) is a company working on reimagining physical security and access in the workplace by retrofitting existing badge readers with their M-Tag. During my time there, I worked on redesigning the admin management portal for web and mobile interfaces.

### **Role**

Product Design Intern – UI/UX Design, Prototyping, Brand Identity, Graphic Design

### **Duration**

June 2022 - September 2022

### **Key Users**

The primary product journey of M-Tag, from installment to everyday use, consists of 3 different users. Since I working on designing the admin management portal I focused on the needs of tenant admins.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2FoxSpuh9M9Hn9WKXfL0s0%2Ff110630d-d47c-476d-b5a1-9454549ecc55.png?alt=media&token=2e06f51b-b069-46f5-a2af-fcc4fee38476","id":"f110630d-d47c-476d-b5a1-9454549ecc55","width":1756,"height":635,"filename":"Frame 2290 (1).png","type":"image/png","caption":"Primary Users","border":false}]}
```

### **Problem**

The current Oloid admin management portal was unintuitive and visually outdated with old brand guidelines. Additionally, there is a lot of hand holding during the transition between the Oloid admin and tenant admin.

### **Solution**

Redesign the admin management portal with Oloid’s new brand guidelines and improve the overall navigation experience for tenant admins so that they can install the M-Tag devices on their own.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2FoxSpuh9M9Hn9WKXfL0s0%2Ff7d2a0ff-c07e-47dc-9f0f-0e848b3aaec2.png?alt=media&token=4d26c045-dc01-4a67-90eb-099798ad41d3","id":"f7d2a0ff-c07e-47dc-9f0f-0e848b3aaec2","width":1816,"height":401,"filename":"Frame 2291 (1).png","type":"image/png","caption":"Project Goals","border":false}]}
```

### **Design System**

One of my first tasks was to consolidate Oloid's new brand guidelines into a design system to allow for consistency and reusability of components.

This was my first time working with such an intricate design system so I learned a lot about working with components, Figma auto layout, and documentation on when to use certain components, font sizes, and colors.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2FoxSpuh9M9Hn9WKXfL0s0%2F63a5268d-9017-4d45-b330-a71649f744f8.png?alt=media&token=db4f2550-5ba5-4dcc-a46f-b262ce57a364","id":"63a5268d-9017-4d45-b330-a71649f744f8","width":1920,"height":980,"filename":"Group 362.png","type":"image/png","caption":"Colors + Typography","border":false}]}
```

### **Homepage**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2FoxSpuh9M9Hn9WKXfL0s0%2Fb0648cd6-bc15-4337-b281-b674b7f31bc7.png?alt=media&token=9596e68b-f420-4e28-9912-08563998d72d","id":"b0648cd6-bc15-4337-b281-b674b7f31bc7","width":2275,"height":1141,"filename":"Frame 2292 (1).png","type":"image/png","caption":"","border":false}]}
```

### **Endpoint Details**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2FoxSpuh9M9Hn9WKXfL0s0%2F93332b77-a20b-45ba-96ba-609c84c618cd.png?alt=media&token=0820a27c-1fa3-4426-8098-e5658c8b4f34","id":"93332b77-a20b-45ba-96ba-609c84c618cd","width":1738,"height":1141,"filename":"Frame 2294.png","type":"image/png","caption":"","border":false}]}
```

### **All Locations Details**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2FoxSpuh9M9Hn9WKXfL0s0%2F1d97387e-4320-4340-9153-865d5e2e561f.png?alt=media&token=37aa030e-a9d1-4595-928e-d0fb7653c4ac","id":"1d97387e-4320-4340-9153-865d5e2e561f","width":2061,"height":1141,"filename":"Frame 2293.png","type":"image/png","caption":"","border":false}]}
```

### **User Settings**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2FoxSpuh9M9Hn9WKXfL0s0%2Fba4601ce-e0ae-490d-9779-ce192e6b1b56.png?alt=media&token=3b54d326-9f69-4d14-9b5a-dc8598190f35","id":"ba4601ce-e0ae-490d-9779-ce192e6b1b56","width":1738,"height":1141,"filename":"Frame 2295.png","type":"image/png","caption":"","border":false}]}
```

### **Device Calibration Walkthrough**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2FoxSpuh9M9Hn9WKXfL0s0%2F10baa327-df85-4453-be26-ed463c43c386.png?alt=media&token=5187dff3-6658-4648-bda9-9e96985e5677","id":"10baa327-df85-4453-be26-ed463c43c386","width":1920,"height":1080,"filename":"305shots_so.png","type":"image/png","caption":"","border":false}]}
```

### **Reflection**

This was my first professional experience as a designer and I was able to learn so much. I learned the importance of asking questions to better understand product requirements and user needs. User insights can come from unlikely places, such as conversations with sales and customer success teams, so it's important to work cross-functionally with everyone on the team!

Additionally, I learned how important the design process is for you as a designer, but it might not matter to other stakeholders. As the only designer, it was important for me to decide what tools and methods to inform my designs. I learned how to be self sufficient and make the most of the resources I had.

Oloid Internship

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2FpcVZwemhkn7opWr7UPW9%2F5eed1059-af4d-4d73-a0c9-1da98295ce3f.png?alt=media&token=a7e9677e-2bf0-44ee-96f5-a7ad630b06f2","id":"5eed1059-af4d-4d73-a0c9-1da98295ce3f","width":1920,"height":1440,"filename":"689shots_so.png","type":"image/png","caption":"","border":false}]}
```

Lilobot is a chatbot that supports high school graduates with their college enrollment process by addressing the problem of "summer melt," where many accepted students decide not to go to college. Lilobot is a research project part of the [UCI Design and Partnership Lab](https://www.daplab.education.uci.edu/).

### **Role**

Designer - UI/UX Design, User Research

### **Team**

Karla Avalos, Minh Nguyen, Isabel Pham

Advised by June Ahn, Jenny Han, and Ha Nguyen

### **Problem**

"Summer melt is a common problem, especially among low-income students. Many high-school graduates who have been accepted to college and say they plan to enroll are knocked off-course if they do not obtain sufficient financial aid, miss administrative deadlines, or lack support from family and friends." - [Harvard University Strategic Data Project](https://sdp.cepr.harvard.edu/summer-melt)

## **How might we design an chatbot that can provide high school students a support system to help them during the challenging transition to college?**

### **Solution**

We attempt to address summer melt using natural language processing to create Lilobot, an AI chatbot that can address a wide range of questions that students may have during the enrollment process. It has been trained with specific college information, allowing it to offer reminders and provide informative responses. Lilo also has features that help students think about their emotional worries and can potentially connect them with experienced college mentors.

### **Design Explorations**

We initially focused on creating sketches and low-fidelity wireframes for a task management dashboard that would help students track their enrollment-related tasks for college.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2FpcVZwemhkn7opWr7UPW9%2F33cabbdc-f774-469f-b52d-87d5d4e7d26a.png?alt=media&token=029bf74b-1df2-4f17-b7b0-b2539bf634ea","id":"33cabbdc-f774-469f-b52d-87d5d4e7d26a","width":1920,"height":1080,"filename":"641shots_so.png","type":"image/png","caption":"Task Management Dashboard Wireframes","border":false}]}
```

However, as we got a better understanding of summer melt and how to design for AI, we realized we had to consider the **socio-emotional aspect** of the college journey. Our new goal was to focus on helping students figure out their college identity, while also creating a sense of community to help students understand they are not going through this journey alone.

With this new perspective, we went back to the drawing board to reimagine our initial sketches, transforming them into a more holistic and reflective journey towards college. Sketches were very important in our feedback process because it allowed us to give an idea of our vision without the need for full commitment in this design direction, allowing for more flexibility.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2FpcVZwemhkn7opWr7UPW9%2F4f0f8dd9-1c0d-45bc-9a21-7567958533d8.png?alt=media&token=8e9322ac-0584-4eda-87d9-1b1074ff0520","id":"4f0f8dd9-1c0d-45bc-9a21-7567958533d8","width":1920,"height":1440,"filename":"324shots_so.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2FpcVZwemhkn7opWr7UPW9%2F2185ba85-6fb0-46c0-8522-8358d696e7c0.png?alt=media&token=14bc0014-2560-44fa-8eb2-42f41254a48c","id":"2185ba85-6fb0-46c0-8522-8358d696e7c0","width":1920,"height":1440,"filename":"141shots_so.png","type":"image/png","caption":"","border":false}]}
```

### **User Flow**

During the process of revising our initial sketches, we took the opportunity to develop a well-defined user flow that solidified our ideas.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2FpcVZwemhkn7opWr7UPW9%2Fd57b6085-1dc5-4b5e-a3c0-3d28abc23968.png?alt=media&token=a9df058d-d048-482b-8c71-0e169f9861d7","id":"d57b6085-1dc5-4b5e-a3c0-3d28abc23968","width":1920,"height":1280,"filename":"311shots_so.png","type":"image/png","caption":"","border":false}]}
```

The user flow diagrams helped to envision a new path for Lilo; one where the user is given the option of going through the chat, tasks, or reflection process in their own order. This helps navigate away from task-oriented chatbots and helps users go at their own pace without overwhelming them.

### **Low Fidelity Wireframes**

In our updated wireframes, we created a digital road trip concept that takes students on a journey towards college. The road trip consists of multiple stops, each representing a different task aimed at alleviating worries and providing valuable information about college life.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2FpcVZwemhkn7opWr7UPW9%2Fff678c6e-2c6d-4f73-9b3f-f73e2c649f97.png?alt=media&token=41d0c9ec-deb2-4852-a1d1-90ba8833148f","id":"ff678c6e-2c6d-4f73-9b3f-f73e2c649f97","width":1920,"height":1440,"filename":"968shots_so.png","type":"image/png","caption":"","border":false}]}
```

### **Mid Fidelity Wireframes**

After several rounds of feedback we created mid fidelity wireframes, using the design system as a guide on the visual aspects, and the low fidelity wireframes to ensure all the essential content is addressed.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2FpcVZwemhkn7opWr7UPW9%2F3834d679-1004-40ae-bdee-10c012e885ff.png?alt=media&token=aa1fd888-871d-431e-a66d-407fbcb00db3","id":"3834d679-1004-40ae-bdee-10c012e885ff","width":1920,"height":1440,"filename":"520shots_so.png","type":"image/png","caption":"","border":false}]}
```

At the start of the trip, students will be asked to reflect on what they are excited about and any concerns they might have regarding college. This input will be used to generate a personalized roadmap tailored to their specific needs and goals.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2FpcVZwemhkn7opWr7UPW9%2Fbe80c25e-89f3-4c52-84b0-567419a96686.png?alt=media&token=0b034ec0-5ce6-4870-aca8-e30dd950af7e","id":"be80c25e-89f3-4c52-84b0-567419a96686","width":1920,"height":1440,"filename":"27shots_so.png","type":"image/png","caption":"","border":false}]}
```

At each stop along the road trip, students will have the opportunity to engage in a chat with Lilo, where they can seek guidance, ask questions, or express any concerns they may have. These interactions with Lilo will provide valuable support and information to the students.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJQCR42kZg4c0FxroS72xOh3cDOE3%2FpcVZwemhkn7opWr7UPW9%2Ff9113092-cdff-4f9b-a941-29381d1f0a98.png?alt=media&token=375a7d3e-5383-4ae2-aecc-ade32574a585","id":"f9113092-cdff-4f9b-a941-29381d1f0a98","width":1920,"height":1440,"filename":"944shots_so.png","type":"image/png","caption":"","border":false}]}
```

After visiting each stop, students will be encouraged to reflect once again. This reflection process allows students to track their progress, gain confidence, and address any lingering concerns throughout their journey. In addition, using the information from this reflection, Lilo can update student’s roadmaps to fit their new concerns.

### **Challenges**

Throughout the design process, we were initially blocked by the idea of traditional AI chatbots and task checklists. This led to us losing touch with the emotional aspects that Lilo initially was aimed to have at its forefront.

After realizing this, we focused more on Lilo’s emotional chat sections and reflective portions of the site. We focused on redesigning the tasks as another resource that students can access, rather than a mandatory action item.

### **Reflection**

While designing, our design team would consistently seek feedback from our team, however, we were not clear about what type of feedback we were looking for. During these feedback sessions, we came up with many new ideas and directions to improve Lilo. This caused us to not have a clear direction and left us iterating on our sketches and low-fidelity designs longer than expected. For future projects, we hope to establish a clear direction and goal earlier on in the process and be specific about what type of feedback we are seeking as a design team.

Lilobot

Designer + Engineer

B.S. in Computer Science 
Mnors in Informatics (HCI) and Psychology

Designed a concept mobile app to help sports fans establish stronger connections with female athletes and build the fanbase for women's sports.

Helping students develop deeper identities toward career pathways by improving mentor-mentee conversations. Designed interfaces for student survey reflections and insights.

Supporting high school graduates with the transition to college and the enrollment process.

Created a consistent design system for Edsight, a free data analytics platform designed to assist educators in improving their teaching pedagogy through data and reflection.

Edsight Design System

Analyzed NBA power rankings scraped from r/nba before the 2021-2022 NBA season. The data analysis was based on the Thurstone model, which allows for analysis of how different people rank stimuli and indicates how far each individual ranking is from the “ground truth”, or in this case, the final NBA standings at the end of the season.

Tools: Excel, JASP, LaTeX

Analysis of NBA Power Rankings

Created a VR escape room game with the core goal of teaching players about climate change and rising carbon emissions. Helped establish the game's background story and designed key player interactions to enhance the gameplay experience.

Tools: Unity, Figma, Git

Toxicity Rising

Created a search engine from scratch capable of handling 10,000+ documents and webpages with harsh operational constraints and a query response time under 300ms. 

Tools: Python, Git

Search Engine

Participated in a datathon with the goal of identifying trends in crime rates and proposed solutions to reduce crime in Montreal. Won Social Impact Award.

Tools: Python, Plotly

Analysis of Montreal Crime Data

Collaborating with researchers, designers, and developers to create digital tools for teachers and students at the UCI Design and Partnership Lab.

Research Assistant

Working with local nonprofits to create high quality software and help optimize their daily workflow.\
\
Feeding Pets of the Homeless: Created a dashboard that helps track pet food donations from different donation sites across North America. Lead a team of student designers by coordinating weekly meetings, delegating tasks, while providing resources and mentorship.

Patriot and Paws: Designed a new system to manage and schedule furniture donations in Orange County. Simplified process for donation registration and scheduling for donation pickups.

Design Lead

Designed and prototyped a new, intuitive admin portal for mobile and web platforms to optimize user experiences with remote management for modern access security. Worked cross-functionally with product managers, engineers, and key stakeholders to establish new brand guidelines across UI components and marketing materials.

Minh Nguyen

Education

Projects

Work Experience

Side Projects

Contact