Helena Ip - Agenda App Redesign

Project Type: UX/UI Design. Personal Project.

Date: January 2021

Role: UX/UI Designer

Tools: Adobe XD

The Problem

The application that replaced physical agendas and class schedules for high school students has an inconsistent design, has several unnecessary functions, does not clearly present information, has confusing navigation, and is lacking in visuals overall.
Since online and digital organization platforms are becoming more popular and replacing physical organization methods, it is important that these applications and websites present information clearly so that users can keep an organized schedule that can be viewed at a quick glance.

Daily View Calendar

Weekly View Calendar

Weekly view Calendar

Monthly View Calendar

Calendar Settings

Calendar Filter

Options Pop-up Screen

Timetable 1

Timetable 2

Timetable 3

Timetable 4

Upcoming Events Screen

News Screen

Another News Screen

Hamburger Menu Selected

Settings

Student ID

Channels

Notifications

Links

Dark Mode Hamburger Menu Selected

Dark Mode Daily View Calendar

These are screenshots of the interface of the agenda and scheduling app that high schools have students use. (above)

My Idea

In order to increase the usability and interest in using the application that delivers class schedules, school announcements, and acts as an agenda, I set to redesign the app with a modern layout and design to make navigation easier as well as alter the content to be more relevant and concise while keeping the core functions. I also wanted to make the overall appearance of the app's interface more appealing overall.

There were 3 goals of my redesign:

1. Make navigation and viewing information easier

2. Reduce functions to what is necessary

3. Improve the overall visual design

Ideation Process

I started by interviewing a few high school students that used the app by logging in using their school credentials to access their class schedules as well as the app's other functions.

This is the feedback they gave about using the app:

“There are too many options that don’t make sense”

“There are too many functions that I don’t use and some don’t do anything”

“Upcoming events, announcements, Twitter posts… they all so similar things but conflict with each other”

“The interface for the weekly schedule layout and monthly layout are very unappealing ”

“There is no way to add events/tasks yourself… you need to be granted access to the school's website in order to make any changes”

Looking at the app there were a few issues I found in addition to what I learned in the interviews.

There were a lot of pop-up menus/screens, and many have the same functions or presented barely any information

These pop-up screens required you to press "done" to close them, many people would tap outside of the pop-up screen to close them but it wouldn't work in this app

There were separate screens and spaces for Twitter posts from the school, upcoming events, notifications, and news but the information presented in each section was either redundant, repeating, or not consistent in each section.

The timetable required a lot of scrolling to view the whole screen, however, most of it was empty slots

After gaining feedback and looking through the app, I outlined the key issues with the original that I wanted to solve:

1. There are unnecessary functions & a confusing layout

2. The design of each screen is inconsistent (ie: dark mode pop-ups while in light mode, different looking layout for each calendar function, etc.)

3. The way information is presented is not clear & hard to understand at a glance

4. There is no way to add and edit tasks and events even though this app was introduced to students to replace physical agendas

I brainstormed ideas on how to solve these issues in order to improve the app and determined what the key features were. During this process, I thought about what screens and functions were necessary and which were redundant. I also wanted to improve the navigation throughout the app by simplifying it and making it easy for students to understand and use quickly.

Brainstorming to generate ideas on how to improve the usability of the app based on key issues that need to be fixed

These were what I determined to be the key features of the app:

Calendar - Daily view, Weekly view, Monthly view, Include events, tasks, and classes, Add events, Filter events

Class Schedule - Current term schedule

To-Do Tasks - A To-do list that you can edit

Notifications - Notifications, News, Announcements

Profile - Student ID, Settings/Preferences, Resources

To get a better idea of the key functions and layouts for organizational apps I did market research on popular apps and websites such as Notion.

Design Process

I started my design process by sketching out wireframes for the screens of the app. For my new design, I wanted to decrease the number of repeating or redundant functions. I also wanted to use symbols and navigations similar to social media platforms that students would be familiar with.

After sketching to visualize the general layout of the app, I moved onto Adobe Xd to create low fidelity mockups of each screen.

Low fidelity mockups

I then moved on to create high fidelity mockups. At this stage I implemented a new colour scheme that was more visually impacting and stimulating.

High fidelity mockups

The original design had an option to switch to dark mode which I thought was a valuable function since students are already using digital devices so much and bright lights can put a strain on the eyes. Additionally, many other platforms that students use have dark mode functions so users will be accustomed to having that option available to them.

Final Application Design