UpNext
In 2017, I was asked to design an app concept for a scheduler intended for business use. This was completed as a UX exercise to explore the process of implementing a concept. I completed this entire exercise in a period of 36 hours.
About the project & My process
The exercise was a very fun way to analyze a particular use case for a calendar app. The exercise was open-ended, but confined to a timeframe, making me feel like I could deliver a lot more context for my design decisions if I had more time.
My design process through the exercise has been as follows:
-
Understanding the User
-
Understanding the Problem
-
Scope of the product and goal setting
-
Moodboard
-
Building the brand
-
User Flow Diagrams
-
Wireframes
-
UI screens & elements
I. Understanding the user
Our journey of problem-solving always begins with empathy.
Our users are social, goal-oriented, and modern individuals with a forward outlook in life in the given use case. They represent a well-reputed organization. They arrange multiple meetings with clients every day at various venues. Our user moves a lot, as a result.
Our target customer belongs to the 25-45 age bracket. Our user accomplishes tasks on the go. All information presented to him/her needs to be clear and unambiguous. Big font and high contrast are a necessity for the situations the user is in.
Our user is busy. They arrange 3-4 meetings a day. They're on Facebook, Instagram, and the next big thing. S/he socializes and keeps up with the latest technologies. This person needs a UI that is clean and easy to recognize at a glance. When s/he is not looking at their notification bar, this person needs his/her information on the lock screen and needs it now!
Let us visualize this user and create a persona to better empathize with him.
We’re looking at a modern and ambitious workaholic.
He’s 31 and lives out of Bangalore. He is active and always ready for the people around him. He loves to travel but hates the traffic in his city.
He is likely with a spouse and prefers English to his native language. He works with much information every day and needs it on the go. He regularly takes notes in the meetings he’s been attending.
He likes to keep ahead of the curve and uses a Samsung or an iPhone. The nature of his work demands that he travel a lot in the city.
He regularly uses Ola/ Uber on his phone. He is familiar with google maps and is comfortable using it to navigate on his own.
II. Understanding the problem
Our user needs a tool that can help him/her schedule meetings every day. He is looking for a tool that declutters and reorganizes the information available to him. This needs to be reliable and even needs to work with a weak internet connection. Most importantly, the product exists to save time for the user.
This needs to be a mobile-first application. The user is on the go and may not have the time to open a web browser from his laptop (he rarely uses a desktop). This app needs to be fast and responsive. This app shows the information on the lock screen and sends notifications before a meeting. Our user also uses the app to send reminders about the meeting to his clients.
The problem presented is particular in nature and does not seek to redefine culture. It seeks to improve the efficiency of the users' process. As a result, the app envisioned here is done so from a utilitarian perspective.
III. Scope & Goal setting
We need to design a website / App that puts forward the idea of a smart calendar. This app can schedule meetings, take notes, and helps in commute. This app displays the information needed next to the user in his event queue and does so in a way that is easy to recognize. The app begets action at every point from the user through reminders and notifications.
This app is closely integrated with the apps the user already uses. Ola/ Uber for commute are put in one place. The user can tap to book a cab directly to his next location. The user can navigate directly to the location if he is intending to drive.
This app takes a cue from journalism and has a feature to record audio of the entire meeting. This way, the user can focus more on being present in the meeting than taking notes. A transcript of the session is generated through google voice recognition API that greatly improves the accuracy of recalling information for the user.
This app also understands that the user cannot be everywhere at once, and has a delay meeting feature that sends a notification to all the attendees of the revised time and location.
IV. Moodboard
A visual idea of the ecosystem where the user and the problem exist are given below. The scope of exploration has been limited in scale due to the timeframe.
V. Brand Building
The name of the product is UpNext. UpNext defines in spirit the modern man. The app is utilitarian and minimal in its approach to the user. It uses bold, clear typography to convey information. UpNext is simple but efficient at what it does.
The colors of UpNext are white, black, and cobalt blue. These have been chosen because most of the content on the app would be in white and black to ensure maximum contrast. The simple palette also draws attention towards the functionality of the app. The cobalt blue adds a familiar but refreshing twist to the corporate dynamic.
The typography of UpNext is bold and readable at all sizes. Therefore, I have chosen two sans serif fonts to achieve this: Oswald and Montserrat. Both of these complement each other very well and are easily identifiable. They’re also a part of google fonts and hence ease deployment. Letter spacing of Oswald has been slightly increased to improve readability.
VI. User Flow Diagrams
To list all the features of UpNext, it is helpful to imagine a user's journey using the app for the first time. I evaluate (almost) all possible ways in which the app provides functionality to the user. To go about this humongous task, I first list down all functionalities as I encounter them in the app in a rough list.
Based on my notes, I graft a user's flow starting from the first point that he encounters the app and up until he is a regular user of the app. The app uses the prior information from the user to display content relevant to him. The user journey flow chart is as follows.
This contains a list of all the features of the app, as well as where would the user encounter them. The journey of the user begins in the top left corner.
The functionalities of the app can be grouped into four main categories. Their functionalities, in brief, are mentioned below:
-
Home / What’s next section: Tells you what’s coming up next, has all the notes related to the meeting at a glance, and enables the user to send a notification to the person s/he is discussing with.
-
Notes section: Has a comprehensive, searchable list of notes of all meetings. Each note is “tagged” with certain tags for easy retrievability—Eg: #shop. The notes can also be sorted and viewed at a glance through a quicksort feature.
-
Commute section: Displays the next destination on your schedule. Has the ability to confirm reservations at the restaurants through Zomato, book a cab to your next destination through Ola/ Uber, and has a start navigation feature in case the user wants to reach the venue on his/her own.
-
Profile section: All the app settings and user data can be controlled from this section. You may edit your information, update your photo or log out from here. You can also customize the app according to readability.
These, along with ‘Add a new event,’ comprise the five core features the app provides. At this point, it becomes essential to distinguish between the approaches of web and mobile for UpNext.
The web application would emphasize the notes. A broader timeframe ( week or months) would be displayed. There is an emphasis on search from the first page itself. The mobile version, on the other hand, is more focused on “what next.” It displays the information that is needed at the moment for the user. It is also a lot more interactive involving the use of lock screen notifications in addition to regular notifications. The mobile version, by default, displays the event view.
The overlaps between the meetings are automatically taken off. There is an option to add a custom buffer length during the creation of an event. Because the app is integrated into the google maps API, it automatically calculates the time taken to commute between 2 consecutive locations. If there is a clash between the buffers or the commuting time of the circumstances during the creation of an event, the app demands attention to changing the event's time. The app may prompt to automatically shift the meeting's timings if the time slot after the event is empty and in a clash.
The five core features of the app are implemented through bottom navigation in the app. Bottom navigation is used because it is a standard ruleset that places all the functionality where it is the most accessible. Placing the functionality in front of the user ensures that it is accessible intuitively when needed.
There are several notifications given to the user. Informing the user of what to do next is the core engagement viewpoint. Through dock and lock screen notifications, the user is informed about an upcoming event, is prompted to book a cab when it is time to leave and is sent the notes of the previous meeting matching the current session's tags 5-10 mins before the start of the meeting.
There is a record button in the notes app that can record and provide a transcript of the entire conference through google voice recognition API during the meeting. This makes it easier to revise and condense the information gained through every appointment.
VII. Wireframes
Based on the user flow diagrams, I defined the functionality of the product. The next step would be to place these functionalities with the corresponding UI elements that would tie them together. I made pen and paper wireframes because their low fidelity allowed quick manipulation.
You can see the bottom navigation being implemented here. The icon of the section is highlighted in black. Day view and weekly view of the events are as shown in the two bottom left screens. You can see that it avoids clutter even when many meetings are present in the same time frame due to a clear information hierarchy. Some pages use the two-finger swipe-down feature to employ additional functionality, like toggle of buffer and travel time.
VIII. UI screens & elements
The next step after defining the wireframes would be to define the UI elements. These elements would fit into the wireframes and would follow the palette and typography introduced before. These design elements (along with the palette, typography & pattern) constitute the design system of UpNext.
The next logical step was to combine the UI elements with the wireframes produced earlier. I picked up the commute screen because it instantiates new features not envisioned in the initial brief. This is my take on UpNext.
The web version of the app caters more to the notes of the meeting, whereas the app moves towards providing a quick solution to queries the user might have. If a reservation has not been made, the app shows another button to book a reservation through Zomato.
This concept was a great exercise in understanding and providing the user's needs in a contextual environment through app features.
But I would have loved to expand the scope of the project if given more time.
