UI/UX Designer
• Arranged team meetings.
• Collaborated with team on research, definition, 11ideation, and testing.
• Refined product structure and user flows.
• Crafted wireframes for Azi's calendar 11and goal-setting/breakdown features.
• Crafted high-fidelity prototypes for calendar.
• Iterated on the calendar, improving the calendar's 11usability score from 3.7/5 to 5/5.
My Role
Instructor
Team Members
Yaxin Luo, Akah Fu, Adeline Li, Cecilia Lu, Yubo Fan
Senior Product Design Leadership @ AWS
Tools
Instructor: Jason Levine,
Figma
Goals & Assignments Breakdown
When Jack sets a goal, he can ask Azi to break it down into smaller, manageable tasks. Azi organizes these tasks based on the workload, Jack’s schedule, and his past work patterns.
Jack can quickly adjust the workload and timing for these tasks using simple plus and minus buttons.
Additionally, for assignments imported from Jack's Canvas, Azi can break them down to help him complete them efficiently.
We introduce Azi, an AI-powered scheduling app that automates task and goal management while prioritizing daily activities. With features like conflict resolution and goal breakdown, Azi simplifies time management, boosts productivity, and supports overall well-being, enabling students to focus on their academic, personal, and professional growth.
Solution
Azi: your smart college organizer
University students often struggle to balance a dense mix of coursework, extracurricular activities, and job searches. The manual process of scheduling and prioritizing tasks can lead to stress and uncertainty, making it difficult to manage time effectively and stay balanced.
Challenge
Overcoming scheduling overload
Personal Time Protection & Heat Map
Now, with a busy schedule and a desire for quality personal time, Jack discovers Azi's Period Protection feature. It scouts for possible free slots in his agenda.
Azi identifies activities that can be rescheduled and suggests the best times, creating uninterrupted periods for Jack to unwind, rest, or spend precious moments with family.
Additionally, Azi uses a heat map in the Monthly View to visually show the intensity of each day's schedule, helping Jack get a clear overview of his planning.
Seamlessly Syncing Canvas Data
& Easy Onboarding
For Jack, our new user, a grad student at UW. Azi syncs his course and homework details from Canvas, removing the need for manual input.
Azi offers a step-by-step onboarding tutorial, guiding Jack through creating his first schedule with ease.
Clear instructions like "Tap to text" and "Hold to talk" above Azi's main button make it easy for Jack to communicate his needs.
Resolving Conflicts
When Jack tries to plan a movie night that overlaps with his reading, Azi smartly recognizes that the reading plan is more flexible and suggests a recommended time slot to shift it to, ensuring Jack can enjoy his movie without hassle.
Additionally, Azi minimizes Jack's input by suggesting cinemas near his classes before the movie.
Cool. Now let's talk about how we got there.
Your AI-powered college organizer
for productivity & time management
0-1 | Mobile | Interactive Prototypes
OVERVIEW
HIGHLIGHTS
TEAM
How might we help university students manage their time effectively?
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.
DISCOVER
- 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.
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 -
DEFINE
- Sketches -
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.
- 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 -
Resolving Conflicts
Goals Breakdown
Onboarding
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.
IDEATE
- Overall Wireframe -
- 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
PROTOTYPE
“My schedule is empty from 7 to 10, I want it to be more suitable for me.”
"It would be more conventional to use AM and PM to indicate the time."
“Can I know the current time?”
- Usability Testing -
Home Page
Conflict Resolving Feature
Calendar - Daily View
Period Protection Feature
Before
After
Before
After
Before
After
After
Before
After
Before finalizing our high-fidelity prototype, we conducted usability testing with five potential users to gather initial insights. They were given specific tasks and encouraged to share their thoughts aloud while navigating the interface.
After they completed the tasks, we conducted follow-up interviews to delve deeper into their experiences. The feedback gathered was instrumental in refining our design approach.
“The Navigation Bar is a little hard to see.”
“5 schedules sounds too vague, and I would like to know the specific goals and events.”
“Can Azi access my location and let me choose from nearby cinemas? I don’t need to input it myself then.”
“It would be smarter if Azi could tell which of the two plans is easier to reschedule.”
“When Azi gives suggestions to move events to protect ’Me Time’, the event card is too small to click and move.”
“I want Azi to tell me why it recommend those time slots.”
Login & Onboarding
- High-Fidelity Prototype -
Calendar
Entering Azi
EDU Account Login
Syncing Canvas Data
Onboarding Begins
Requesting Microphone Permission
Voice Input
Requesting Location Permission
First Schedule Created
Home Page
Selecting Rescheduled Time
Choosing Location
Conflicts Resolved
Weekly View
Monthly View
Monthly View: Tap a Day for Details
Daily View
All Events View
Ask Azi: Text Input
Ask Azi: Voice Input
Tap to Text
Hold to Talk
Goal
Period Protection
Viewing Event Details
Editing Event Details
Goal Page
Setting New Goals
Entering Goal Details
"Ask Azi" for Goal Breakdown
Goal Breakdown Completed
Goal Created
Viewing Completed Goals
Assignment Breakdown
Lock Screen Reminders
Pop-Up Reminders for Schedules
Pop-Up Reminders for Goals
Night Mode
Ask Azi: Resolving Conflicts
Calendar
Goal
Notification
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.
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.
REFLECT
- Group Reflection -
- Future Outlook -
Objective
To create an intuitive time management tool that helps university students balance their commitments, enhance productivity, and work toward their life goals.
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
Optimizing scheduling for enhanced efficiency