Degree Project

I have been thinking about whether the illustration of the guide page is only displayed in text or is a character illustration. In order to give users a better visual experience and understanding, I think that a combination of character illustration and text is used as the guide page. I started the icon and logo sketch design of the prototype interface.

Since I was not satisfied with the previous task page, I conceived two tasks with different layouts. I have updated some function page layouts. To be honest, the design interface really gives me a headache. Every time I think I won’t change it anymore. Final choice

I used the Figma website to design the app wireframe. Figma is a browser-based UI design tool that can create multiple canvases on the page. I can view each app page as a whole, which is conducive to adjustment.  I basically determined the framework of each interface content and interaction flow of each page bottom Login page Guide page The guide page will introduce the function information and the general description of each function，I think it’s good for the user’s sense of use. Sign up Then there is the user registration landing page, because the user goal is for university students who have academic delays, the registration page needs to fill in user information and email, create a password, etc. Task According to the layout draft of a few tasks, I used a square task. On the right side, you can create new tasks and filter tasks. According to the Focus, Matrix method to plan the urgency of tasks. Assign tasks reasonably to reduce the pressure of Procrastination., it is...

Since I changed the interface prototype of the final deliverable, I updated the visual reference for the computer app this time. Layout The dashboard design - The designer used calm colors in order to feel comfortable on the eyes when using the app. I like the design style of Sanket designer, black and white illustrations look simple and clean. The interface design of this app is also very simple and clear. The light-colored background and brightly colored illustration design will make users more visual novel in use. UI colour mood board Green -  is the best color to improve efficiency. In addition to being one of the simplest colors on the eyes, it also reminds us of nature. Green is a good color for keeping long-term concentration and clarity. Blue -   Some studies have shown that blue is best for challenging learning situations. Blue paper, blue ink, or blue highlighting can also be used to help improve reading comprehension. Blue is a relaxing and calming color, ...

I started to draw some sketches of the app, and the approximate functions of each page. And it is estimated that how many sub-pages are needed for the functions on each page. Functional visual sketch Because my app has 2 main functions, task and study room For the tasks page, I try to imagine several layouts for the task page, centering or distributing the task sections.  For the study room page, considering the user's perspective, how to give the user the most conventional sense of use, I drew the following angles. In order to give users an immersive learning experience, I try to look down on the table and the page window，like zoom.  

This storyboard helps me next app development.  

app flow helps me sort out the links and functions of each page, making the next step easier  

The main function of overcoming procrastination: The function direction is through my research on how to let university students alleviate academic procrastination. The functions include time management, plan classification, and key points in community learning. The central concept is more inclined to task time management core components Task -  Easily manage task time urgency level Study room -  Online study room, immersive experience, mutual supervision Chat -  You can find users with common learning goals and create study rooms together Dashboard - schedule-  It is a place to comprehensively check the completion of the task, and you can see the total number of hours the user has focused on