UI/UX Designer
• Reserved study places for 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
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.
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.
Solution
Azi: Your AI-powered personal scheduling ally
Personal Time Protection & Heat Map
Now, with a busy schedule but a desire for quality personal time, Jack discovers Azi's Period Protection feature. It scouts for possible free slots in his agenda.
Azi assesses activities that can be rescheduled and proposes the best times for them, thus carving out uninterrupted periods for Jack to unwind, rest, or spend precious moments with family.
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.
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.
Cool. Now let's talk about how we got there.
0-1 | Mobile | Interactive Prototypes
OVERVIEW
HIGHLIGHTS
TEAM
How might we help university students mangage their schedules 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
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.
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
Streamlining scheduling and maximizing efficiency
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.
Overcoming scheduling overload