Unical
Unical
Calendar app for University students
Senior Capstone
For my capstone, I decided to create a prototype of the app to help students be more productive and successful university students. Throughout my project, there were some obstacles, challenges, and new skills to learn to overcome those challenges. It was a great experience hope you enjoy my work! Thank you.
Project Brief
This project is to create an app that can create a schedule, create a to-do list, link university calendar/events / academic to the app, and share your calendar with others. This app will help students keep track of due dates/announcements from university, create and share the schedule with others to be more productive with friends, and create notes and a to-do list to become successful in University. I decided to create this app because I had a hard time keeping track of my university and personal life since it was on both different platforms. All my close friends had to stick to one or not use it at all since there was no perfect app for productivity. So I decided to create the app and it was a great journey. I was responsible for conducting user research, creating a persona, and usability test, and creating low and high fidelity prototypes.
Problem / Goal
Problem : Some users do not use the calendar app / productivity app because it is difficult to use / learn, features that a particular app did not have or all app is in a separate platform.
Goal : Design an app for scheduling / to do list and other useful features that allow users to create events with ease and learn more about how to be more productive and successful.
User Research
To create an app, first I need to learn how users use the productivity / calendar app and what are the pain points (what is stopping them for using it) users have. So first step was to interview the participants.
Interview Detail
​
1. Five Participants that attending to university currently or in the past.
​
2. Participants that are actively using or used productivity / calendar in the past.
Participent 1
Major : Computer Science (Senior)
Participent 2
Major : Engineer (Jr)
Participent 3
Major : Translation (Master)
Participent 4
Major : Computer Science (Senior)
Participent 5
Major : formal college student
3. Time duration : 2-3 weeks
​
4. Method : In-person / Phone call
​
5. Example Questions :
-
What app or method you use to be more productive?
-
What do you like / dislike about it?
-
What did you use in the past and reason why you not using it anymore?
and more follow up questions to go into details.
After interview....
I collected the data and created two features to make it easier to see and understand the perspective of the participants. Empathy Map and Affinity Diagram
Empathy Map
By creating an empathy map, I can deep dive into users' points of view and analyze data to create insights. This empathy map is divided into 4 sections. Thinks, Feels, Does, Says.
​
- Thinks / What users think about calendar and other productivity app
- Feels / What users feel when using the apps
- Does / What users do in the app
- Says / What users said during the interview
Affinity Diagram
Affinity Diagram is a way to organize information and gather common themes from the interview answers. For this project, I collected the answers and created a category of features the participants wanted in the Unical and this is the diagram.
Insights
Based on interviewing participants, collecting data and empathizing with participants, I collected answers and found insights and themes.
Insights / theme
Simple design
To do list
Apps (email) link to the calendar app
color is important
Notification is important
Pain Points
Stressful when adding events
Color is limited
Apps can not link to the calendar
No function of shareable app
Less customizable
Persona
I created a persona which represents the 5 participants that share similar needs, problem and thinking.
Ideation
With all the information I collected, found insights, and created a persona, I began the ideation phase. This is the most difficult challenge because of creating a solution for the problem that participants and translating that into the design. It will be difficult to create a prototype from the start, so in order to come up with ideas, first I started the process by creating 2 storyboards and a "crazy 8" ideation exercise. The Big picture Storyboard (to understand pain points) and Close-up storyboard (to gain the point of view of the users using the app features) and crazy 8 (coming up with 8 ideas in 8 minutes of function of the app)
Big Picture Storyboard
Close-up Storyboard
Crazy 8
Paper wireframe
Next step is to design the app itself! In order to achieve a great design, I sketched design, coming up with multiple ideas and design. After, I selected the best sketch that is a simple and functional design.
Total of 8 paper wireframe
Top : (From left to right)
1. Home Page
2. Calendar Page
3. Course Page
4. University Event Page
​
Bottom : (from left to right)
1. Profile Page
2. Calendar Page (Detail)
3. Side Menu Page
4. Sign up Page
​
​
One Example of the paper wireframe (Home Page)
Digital wireframe / Low fidelity
Based on these paper wireframes, I created a digital wireframe and Low fidelity prototype. I used Figma, an UI design app to create these designs.
Usability Test Part 1
After creating extra features and an interface to make it "usable", I conducted the usability test with participants from before. For the first usability test, I focused on the overall functionality of the app. I collected the highlighted feedback and came up with insights.
1
"There is no security on the student ID. Feel unsafe to have ID without verification"
2
"Having a to do list on the side menu is too inconvenient. Having a separate page will be better"
3
"Having a progress bar in the app will be the best. So you know where your at"
4
"To have a feature where app will input the university event automatically, so I don't have to"
Based on the insights I made changes to my design
1
"There is no security on the student ID. Feel unsafe to have ID without verification"
I created a feature where once the user click on the Student ID, it will require a pin number in order to access Student ID
2
"Having a to do list on the side is too inconvenient. Having a separate page will be better"
3
"Having a progress bar in the app will be the best. So you know where your at"
Created a separate page for the to-do list and includes progress bar so it is easier to see
4
"To have a feature where app will input the university event automatically, so I don't have to"
Created a feature that will link to the University website (with user Login) and automatically add to the calendar
High fidelity prototype
After conducting part 1 of usability test, I created a more detailed prototype with more features, so that it will look "Lifelike". The prototype includes colors, buttons, animation, icons, images, and more. It was a great opportunity to explore features and colors and to learn new skills.
Usability Test Part 2
For part 2 of usability test, I was more focused on the visual element and design. For example, the icon, color, text size, overall flow and more. It was a great to get feedback, especially on the visual because I can get real feedback from participants who uses a variety of apps on daily bases and this was the highlight of the feedback.
1
"Overall color of the app is confusing. Sign in is colorful but the home page has none of the color"
2
"Having a illustration or some sort is great"
3
"Progress bar is in the awkward in the profile page"
4
"Maybe having a singular or similar color overall through out the app will be good to have"
with testing part 2 is done, I improve the overall design
1
"Overall color of the app is confusing. Sign in is colorful but the home page has none of the color"
2
"Having a illustration or some sort is great"
Created an illustration to make the user more welcomed to the app and see the color to similar colors.
4
"Maybe having a singular or similar color overall through out the app will be good to have"
See the overall design to more simple and functional. Made the over flow, colors and visual elements more clear and consistent through out the app.
3
"Progress bar is in the awkward in the profile page"
Made the progress bar more simple and easy to look at. It is connected to the Checklist where you can see all the task and progress.
Final Design
Based on usability testing, getting feedback, redesigning, adding new features, and more, it took me a while but I finally finished the task, and here is my final design for Unical.
Demo Video
Sign in to Home Page
1. Sign up
2. Select an institution
3. Select class
4. Select color
5. Select other calendar apps
6. Home
Explore the App
1. Home
2. Checklist
3. Calendar
4. Course
5. University
6. Side menu
CheckList Features
Notification / Widget
1. Tasks
2. Notes
3. Summary
​
1. Share calendar
2. Notification
3. Widget
4. Widget 2
5. Email
6. Android
Creating Event
1. Add Event
2. Color selection
3. Details
4. Save
​
Test the Prototype!
Click the image to test the prototype, Enjoy!
#Click the blue squares to interact!
