YaxinLuoPortfolio

UI/UX Designer

• Reserved study places for team meetings.

• Collaborated with team on research, definition, xideation, and testing.

• Refined product structure and user flows.

• Crafted wireframes for Azi's calendar xand goal-setting/breakdown features.

• Crafted high-fidelity prototypes for calendar.

•Iterated on the calendar, improving the calendar's xusability score from 3.7/5 to 5/5.

My Role

An AI-powered Time Management App for Modern University Students

Azi

We introduce Azi, an AI-powered scheduling app designed to transform university students' time management. By automating goal organization and optimizing time allocation, Azi customizes planning to fit individual lifestyles and priorities, easing the stress of time management. It streamlines academic and personal commitments, fostering a balanced, productive college experience. Azi is your AI-powered personal scheduling ally, unlocking the full potential of your university years.

Objective

The focus of the project is to explore design solutions that not only streamline the process of managing academic, personal, and professional commitments for university students but also optimize the outcomes, enhancing their overall university experience.

Challenge

University students often struggle to balance a dense mix of classes, homework, extracurricular activities, and job searches. The manual process of scheduling and rescheduling, coupled with the effort to prioritize tasks without overlooking personal time, can lead to stress and inefficiency.

Goals & Assignments Breakdown

Personal Time Protection & Heat Map

Seamlessly Syncing Canvas Data

& Easy Onboarding

For Jack, our new user, Azi simplifies scheduling by auto-syncing course and homework details from Canvas, eliminating manual data entry.

Azi also offers a step-by-step onboarding tutorial, guiding Jack to effortlessly create his first personal schedule.

Right above Azi's main button, clear instructions like "Tap to text" and "Hold to talk" are displayed, reducing cognitive effort for Jack.

Resolving Conflicts

When Jack tries to schedule a movie night that conflicts with an existing reading plan, Azi smartly deduces that the reading plan is more flexible and suggests shifting it to another recommended time slot, ensuring Jack can enjoy his movie with Sofia without hassle.

Additionally, Azi minimizes Jack’s need to input by suggesting cinema locations based on his class locations prior to the movie.

Upon setting a goal, Jack can request Azi to divide it into smaller, manageable tasks. Azi organizes these tasks considering the goal's workload, Jack’s current schedule, and his past work patterns.

Jack can swiftly modify the workload and

timing required for these smaller tasks using straightforward plus and minus icons.

Additionally, for assignments imported from Jack's Canvas, Azi can also break them down, helping Jack complete them efficiently.

Now, despite a packed schedule and a craving for quality personal time, Jack finds solace in Azi's Period Protection feature.

Azi diligently searches for potential free slots in his agenda, recommending optimal times for activities that can be shifted. This not only helps in carving out uninterrupted periods for Jack to relax, rest, or cherish time with family but also explains why these specific times are suggested.

Moreover, Azi employs a heat map in the Monthly View to visually display the intensity of each day's schedule, aiding Jack in achieving a holistic oversight of his personal planning.

- Sketches -

- Scenarios & Steps & Stages-

- User Journey Map -

We created a User Journey Map to show both online and offline experience of our users. Plotting their journey from initial awareness to the final stage of engagement, highlighting key interactions and touchpoints. We drew a Storyboard to visually depict each phase of the user experience. This allowed us to visualize and prioritize user needs and preferences throughout their journey.

We outlined the scenarios where our user might see a need to interact with Azi.

Based on these scenarios, we detailed every step a user might take to reach their goals, such as 'Resolve conflicted plans' and 'Set & Edit Goals'. Then, we grouped similar steps into stages, each with its own name. For every stage, we brainstormed possible features that could fulfill the user's needs.

Finally, we held a vote to pick the most effective ideas for each stage.

Our sketches started with the user login process, tracing the path from syncing Canvas data to creating personal schedules through voice input. We explored the distinctions between goals and events and brainstormed various scenarios for notifications and their potential appearances.

Discover

Skip To:

Define

Ideate

Prototype

Reflect

As a team of graduate students, we set out to identify needs that resonated with us. During our brainstorming session, a common theme emerged: the daunting load of coursework, extracurricular activities, and job searching. This sparked our curiosity—could there be an assistant capable of helping us manage our time more intelligently? The idea of using AI to create a novel solution quickly took hold, and we were excited to explore and refine it further.

After conducting online research, we discovered that while some universities employ chatbots to answer students' questions about specific courses, these inquiries' scope is limited, and such tools fail to assist with time management. Moreover, the existing AI personal assistant tools on the market cater to a broad audience and lack design specificity for college students. This realization led us to contemplate the benefits of an AI assistant that could integrate with Canvas, access coursework data, and help students plan effectively. Such a tool would significantly aid students.

Before creating personas, I collaborated with teammates to conduct interviews with 15 students. This foundational research aimed to deepen our understanding of student needs and challenges, further informing our concept's development process.

- Personas -

Cool. Now let's talk about how we got there.

OVERVIEW

- Overall Wireframe -

- Product Structure -

We started with the needs of two personas and summarized the features they required into a mind map.

Then, we combined these two maps to create a comprehensive mind map that shows the product structure.

Aiming for clarity, I refined the initial mind map and created the final Product Structure using Visio. This step was crucial in accurately depicting Azi's framework, ensuring that each element was strategically positioned for the best user experience.

During the wireframing process, we integrated several essential features into the original framework, including "Period Protection" and "All Events View," to enhance functionality and user experience.

- User Flows -

Onboarding

Resvoling Conflicts

Goals Breakdown

Protect Personal Time

Initially, our user flows were indicated by red lines between wireframes. While precise, this format lacked an overall view.

To address this, I reorganized the user flows into a flowchart format. This improved readability and provided a clearer, more accessible overview of app interaction.

- My Wireframes & Thoughts -

Leveraging user feedback, I developed a Calendar with four views (Daily, Weekly, Monthly, All Schedule) to suit different preferences.

A standout feature, Period Protection, designed for individuals with busy schedules who need blocks of personal/family time, promotes a balanced lifestyle by facilitating essential time allocation.

Acknowledging that some goals might not have a specific deadline, I introduced an optional deadline button.

This allows users to specify an end time and access the "Ask Azi" feature for goal breakdown assistance.

I added a gray overlay to prevent users from altering selected options during the Azi breakdown goal process.

I switched to a one-click solution to automatically adjust time and workload, reducing user effort and simplifying the process.

I switched to "+" and "-" buttons for clarity and placed them under sub-goals to improve visibility and module coherence.

It ensures users can focus on the current process without accidental modifications, enhancing the usability and reducing potential confusion.

Calendar

Goal Breakdown

Iterations

- Visual Design -

Set Goal: Input Names

Set Goal: Select Time

Goal Breakdown Initiation

Goal Breakdown Result

An AI-powered schedule planning app for university students

0-1 | Mobile | Interactive Prototypes

Jan 2024 - Mar 2024

Timeline

Discover

Jan 3

Brainstorming

Define

Jan 11

2 personas

Listing and voting

User journey map

Ideate

Jan 26

Sketches

Prototype

Feb 1

User flows

Wireframe

Feb 17

High-fidelity Prototype

Test

Feb 28

Usability testing

Further interviews

Iteration begins

Mar 6

Interviews

Presentation

Iteration Ends

Solution

Azi: Your AI-powered personal scheduling ally

Overcoming scheduling overload

Streamlining scheduling and maximizing efficiency

Instructor

Team Members

Yaxin Luo, Akah Fu, Adeline Li, Cecilia Lu, Yubo Fan

Senior Product Design Leadership @ AWS

Tools

Instructor: Jason Levine,

Figma, Teams

How might we help university students mangage their schedules effectively?

- High-Fidelity Prototype -

Calendar

Ask Azi: Text Input

Ask Azi: Voice Input

Tap to Text

Home Page

Hold to Talk

Goal

REFLECT

- Usability Testing -

If we were to make it a real product, we will collaborate with schools to gain access to the Canvas interface and assist students in planning their studies and lives effectively. This helps improve student graduation rates and employability at schools.

- Future Outlook -

1. Writing a PRD (Product Requirement Document) from the start will save us a lot of time later on. For example to ensure consistency in our current date, color, and specific event.

2. It's important to define the product direction early on, even during the low-fidelity phase.

3. Finalizing the storyboard before beginning the prototype development in Figma.

- Group Reflection -