top of page

UI DESIGN CASE STUDY:

Design Patterns        Style Guide        Visual Design

OBJECTIVE

OVERVIEW

This is an event management app for professionals. It includes event creating, messaging and team building. It is to build better teamwork and increase the organization's effectiveness and efficiency.

I used to work for a non-profit where we held many fundraising and outdoor events. Each staff member had a job, a location and times they had to be at. We were always given an excel sheet set in time slots for the whole day which listed everyone's names and and where and what they were doing at each hour! Some people would fold it and put it in their pocket and pull it out to recheck throughout the day. Imagine how inefficient that is for everyone involved! What if there was an app that the manager can create an event and then add each staff member to just-read option, it would put everyone on the same platform. The app could be opened and the user can enter into the event only if they have permission. Now a lot of people might be thinking of Asana or something similar but not quite! I wanted to let team members be able to message for changes/updates or hold quick calls (in emergencies) on field without using other platforms such as Zoom.

DESIGN PATTERNS

DESIGN PATTERNS: SOCIAL

The ability to add a connection like a team member, having social abilities such as a chat window and interact and share content with other users will help. 

DESIGN PATTERNS: NAVIGATION

DESIGN PATTERNS: GATHERING INPUT

The main user such as the admins that create the Events/ Tasks will have to create a profile of the event but they will also have to create a company profile like Linkedln. When the other team members are invited, they will need to connect to the company and have to put in their information. At this point, I don't think I want the option to connect or sign-in with Facebook or Google. I think it would easier to keep track of staff if they all had the same type of profiles. 

This will inform team members time-sensitive information directed specifically at them. Also the whole team will stay updated in case there is a need for other members needing to be involved in one person's task. 

DESIGN PATTERNS: DATE MANAGEMENT/GATHERING INPUT/SOCIAL

This will give an overview of Events/Tasks involving other departments and the single page will give all the necessary data needed by the company to finish a successful event. Also without being invited to other departments, each staff member knows how involved others are, but are privy to data in each task (task details, time, notes). 

DESIGN PATTERNS: NAVIGATION

This will simply be a way to filter out tasks and easily see their specific task without having to scroll through multiple tasks in different times and dates. 

DESIGN PATTERNS: FEEDBACK

The user can give individual feedback regarding their tasks but still be shown on the dashboard so the whole team can view their Event/task. The other part is if non­-assigned person was to finish the task then the error prevention popup will ask if you want to label the task as complete even though you were not assigned to this task. This way it stops others by mistakenly labeling a task. 

CHALLENGES

One of the challenges I faced in this was the iconography. This app is heavy in icons and interactions. Messaging, calls, checkmarks, notifications and color indications are ways the app communicates with the user. Getting the size consistent and the color palette to stay cohesive involved a lot of planning and trial and error. 

STYLE GUIDE

Typography

Palette

#8648FA
RGB: (134, 72, 250)

#8DE4FF
RGB: (141,228,255)

#52FAC5
RGB: (82, 250, 197)

#FED766
RGB: (254,215,102)

#F25F5C
RGB: (242, 95, 92)

#F4F4F4
RGB: (244, 244, 244)

#022F4D
RGB: (2, 47, 77)

HIGH-FIDELITY WIREFRAMES

The major challenge were the "what if" scenarios.
What if a team member had an account on the app before being invited?
What if there are invited to multiple teams?
What if a team member has to be changed?

As I started to create wireframes, I recognized theses situations and attempted to make modifications to the login screens and a Create an Event screen. Giving the host/manager the most control of the event will then take options out of the teams hands and also keep them restricted in making changes. 

Each member will get an invite code for the login process and if there are already on the app, then they will receive a notification on the email set up. They will have access to read and/or write but not save any changes. As each change sends a notification, the host can pick and choose to send it to the group (recommended) or an individual.  There is also a Event screen and Review screen which shows all the members involved in each task and each individual has the ability to accept or decline the task (both actions will send a notification to the host).

Another way for the members to communicate was the chat screen. Although there will always be a personal phone on hand or maybe a laptop for emails, these don't always give us a clue about member's designated task. This screen showcases the tasks scheduled in the event and each member assigned to it to minimize the confusion about contacting the team member and another to check where each team member is scheduled to be without being the nosy coworker!

SOLUTIONS

While I knew there are productive apps out on the market, I still went ahead and followed my idea. In the beginning I said I wanted this to be more focused on offsite project/event management compared to onsite. Although an employee can still

their station remotely and be able to view their tasks, it still only captures the working environment that is static at an office desk or at a home work station. Things like Google Calendar help members access in field but then again does it have all the other features I have incorporated in Taskmaster.

FINAL MOCKUPS

​This project is an attempt at combining management and communication/messaging apps to give a team all the resources and features to make the event as successful one!

bottom of page