The Making of Tempest






Introduction
Increase efficiency. Save costs. Reduce manual repetitive tasks. Tempest is a staffing software product designed around the needs of the modern company. It's designed to handle any kind of organisation out of the box: from a few colleagues working remotely to thousands of workers across a myriad locations.



Collaborators
Petar Kovacevic: Senior UX Designer, Jovan Mladenovic: Senior Ul/UX Designer, Entire Chord Agency Team



My Role & Time
UX Design, UI Design, Illustrations
Jan 2020 - Present







Process Overview





In this project, I worked as a UI & UX designer with a cross-functional team. When I joined, the entire projects had alredy kickstarted. We jumped into the research fase pretty quickly on, and then proceeded to work on the user flows and the users overall journey.

Analysis



What seems to be the problem?
The mechanisms that underlie the temporary worker model are inherently inefficient. It takes an inordinate amount of time to organise and arrange shifts for workers that are (by their very nature) subject to frequently change. Using traditional methods results in huge amounts of waste across the agency.



Who are our users?
Based on the research and interviews with people, we basically divided everything into 2 groups: temporary workers and agency admins/managers. These 2 types of people behave differently and also have different goals. Both of them are interested in having a staffing software to help with stuff like: Huge time saving, Digitalization and Efficient communication.



Understand Users’ Intentions and Needs
We conducted first focus group to better understand the users. Based on their feedback, we highlighted some of our most useful features.
I introduced the rainbow sheet analysis method to the team and this helped my team better understand users’ needs.







Priority of the Features
Based on our interviews and analysis, we understand the priority of different features. This helps us create our information architecture. As Shift Swapping has the highest priority, we decide to have this functionality featured.



Main Features and Structure



User Flow
To further define users’ actions, we created user flows for different features to gain a better understanding of how users will use it.









Wireframes
At this stage, we used wireframes to discuss and better understood what kind of information they want to know about. We created most of pages based on the information architecture.







Challenges when creating wireframes
At this stage, we encountered some problem when we discussed wireframes and ideas with our higher-ups. As most of them want to see colors on the components which represented Tempests branding. As a result, at this stage, after we confirmed the info on the wireframes, we moved to next stage, Hi-Fi prototypes.

Hi-Fi Design



Color Palette
After working on the wireframes, we created a simple style guide to set the correct visual tone that the users are familiar with.









Accessibility
When we designed the system, we also considered accessibility and confirmed all color passed WCAG 2.0 AA standards.







Illustrations & UI Elements

After testing our landing page wireframes, we found that some of the elements were plain and not very engaging for our users. To make it more energetic, we tried to present our product more creatively.



Usability Testing

In this stage, my team and I conducted focus group to test the usability and learn more about user needs. We also had a meeting with the development team to understand their perspective and techniques. As a moderator in the focus group session, this was a good opportunity for me to share our design with the community and talk to them in person.


Final Design

After the usability testing, we improved the design based on their feedback. Here's the showcase of the App, Web Portal and Web Site.



More Info & Links


Application and Web Platform
You can find the app both on the App Store and Google Play Store. Here is the Web Platform too!

YouTube Video Explaining Tempest
Here is the YouTube Video animation explaining the product even further.

Tempest.app Website
You can also check out the Website here!