Mockup of home screen prior to logging in to the app

Overview

This case study was completed in 2020 as part of the UX/UI Immersion program at Thinkful. The aim of this project was to give students in the program real world experience working with a real client.

Task Smart is an all in one task management app for freelance entrepreneurs so they could spend more time with their clients and less time focusing on everything behind the scenes.

Task Smart would allow users to schedule and reschedule appointments, track invoices, their status, and provide clients with a curated video library of learning resources. For the sake of the design sprint, we focused on the minimum viable product, which based on the pain points of our client was scheduling and rescheduling appointments.

Discovery and Research

Competitive Analysis and User Persona

User persona of Michael

We downloaded popular apps that individuals use to organize their business such as TimeBloc, Quickbooks, and Square, etc. Since we were creating an all in one app we wanted to ensure that Task Smart incorporated the best features from all of the apps while following the simple flow that was common for business management apps. With our client being a music teacher, we also looked into tutoring and music apps to find the best way to incorporate some of those features into the design without making an app specifically for music teachers.

Our persona was created to represent the average freelancer when running a business by yourself there is always a lot of information to keep up with and it can become quite cumbersome when lacking organization and syncing capabilities. We used Micheal as a guide when creating Task Smart as we wanted it to be simple to use and accurate so he didn’t spend more time organizing and managing his business than performing and teaching lessons.

Information Architecture

User Journey, User Flow, Low Fidelity Wireframes, and Usability Testing

User journey map

We designed our journey map based on the everyday task of our client Will. He currently uses multiple apps and interfaces to run his business and at times it can be overwhelming and time-consuming. Will currently spends the most time tracking appointments, viewing invoices, and transferring all of his data to an excel spreadsheet. Using this journey map we were able to determine what issues were the most important to the client and ensure that our solution resolved his biggest pain points.

User flows for Task Smart

In order to identify the MVP, we began to map out our user flow. Based on the persona’s biggest pain point, using multiple apps to manage his appointments and expenses, we wanted an intuitive interface that didn’t include multiple layers of unnecessary screens.

Refined sketches Site map for Task Smart
After completing our user flow we sketched out numerous ideas for how to layout each of the screens. From there we voted whose sketches matched what we envisioned when picturing the app. This helped us figure out the layout and functionality of the main screens that Task Smart has to offer while keeping the interface simple and intuitive.
We then began to work on our low-fidelity wireframe. After another meeting with our client, we concluded that our minimum viable product needed the ability to sync between outside accounts and manage appointments to reduce the need of using multiple apps.

Visual Design

Branding, Hi Fidelity Mockups, Hi Fidelity Wireframes

Visual design elements for task smart

Our visual designers selected Roboto as the only font for the app, with a salmon pink color chosen from the color palette of our clients website.

Solution screens

Our solution was to have users login and view a daily schedule. If they had an appointment in need of rescheduling, there would be a notification pop up along with a notification symbol in the bottom navigation bar. From there, they could view the day of the original appointment and select a new time for the appointment.

Outcomes and Lessons

User Testing Results and Final Prototype

 We created an alternative flow so users could easily see notifications that would lead directly to the required action without having to dig through multiple layers of screens due to a large amount of content within the app. Our designers also updated the visual design of the app to fit with iOS standards.

Screenshot of user testing resultsInitial redesign of Task Smart

Our users failed to recognize a notification pop up at the top of the screen and would resort to an alternative flow. This pathway is located at the bottom of the navigation bar which contains a calendar icon with a red notification symbol. After logging in, the users’ attention would be drawn to the notification in the bottom navigation bar and they would click there to enter the calendar within the app. Upon clicking that notification the calendar would show briefly and would be followed by a pop-up screen overlay that contained information about the reschedule request with an option to view the request on the calendar. If this option was selected, Task Smart would show a list view of the schedule with the reschedule request highlighted in red to show that an action is required. Responding to the request is followed by two confirmation screens that complete the mission.

 We discovered test participants would take between 5 and 40 seconds to navigate from one screen to another. They explained some screens were confusing and would leave them feeling lost or unsure where to click.

Future plans for the app would include eliminating repetitive information from the search results screen, and conducting further user testing on alternate sites to test the speed of the app and find out if it truly is an internet connection issue or if the amount of time spent on each screen is due to users not being able to easily locate the information they are looking for. As this was created as part of an assignment for a class project, there are no current plans to further iterate on it.

Redesigning Task Smart

Solution screens

After working with a real client to design an app or website, each individual was tasked with redesigning the app on their own. Above is the final design that our team of four created while working with a real client.

Inventory library of Task Smart prior to redesign

The first step in redesigning Task Smart was to take inventory of all of the elements being used in the current design. I also added a new color palette to the inventory library after a brainstorming session with a mentor. During the brainstorm, we came up with words to describe some of the feelings the app would hopefully invoke within the users. From this brainstorming session, I came up with a color scheme based on coffee because doing your daily tasks should be as simple and as rewarding as enjoying a morning cup of coffee.

Mood board

After taking inventory of the current design elements, I created a new mood board with the new color palette and began updating the design elements to reflect new design choices.

Logos used to survey users about their preferences

While redoing the logo was optional, I felt it was necessary as the original logo could come across to users as impersonal and boring. I didn't want to completely alienate users so I played around with merely changing the colors or only pieces of the icon before conducting some preference tests that showed users liked the coffee cup icon with a simple checkmark.

Redesigning the screens of Task Smart with a simplified user flow.

Creating wireframes to go with the new design was a bit challenging since I merely wanted to simplify the user flow without altering it entirely. What I ended up with was a dashboard with a quick overview of the different features within the app. From there, the user is able to access the different features without feeling overwhelmed. For this particular project, I iterated on the screens needed for a user flow of a scheduling task.

Final mockup of Task Smart after redesign.

The final touch was putting all of it together, the new colors, the new typography, and creating mockups of what the final app may look like someday. As this project was for a class assignment, there are currently no plans for further development or design work on this app at this time.

© Copyright 2021 Laura Welch