work
WorkFlow
An app for all workplace environments.
ROLE
UI/UX Designer
TOOLS
Figma, Adobe XD, Illustrator
TIMELINE
4 Weeks | May - June 2022
CONTEXT
An important factor in the workplace is the concept of communication and organisation in which it helps maintain working at a fast-paced environment and achieve effectiveness within work tasks. From using communication, this steadily improves an individuals’ range of essential work skills such as teamwork, problem-solving and efficiency.
OPPORTUNITY
Maintain workplace efficiency by creating an application that organises every workplaces’ communication systems such as shift schedules, timesheets and a direct messaging feature which will help enable employees to become more well-connected and organised within their workplace and preserve positivity in work environments.
RESEARCH
Communication & Organisation
Firstly, workplace communication is defined as the exchange of information between work employees within a work environment. Communication in a workplace is considered ‘strong’ if it boosts employee morale, engagement, productivity and overall satisfaction for employees, teams and organisations. Today, work communication has developed into modern technology where people communicate virtually online with each other within various work scenarios. Workplaces often use applications that organises their company foundation and its’ communication systems which involves a wide range of features for employees such as weekly shift schedule, daily work tasks, direct messaging, etc.
Why design an app for workplaces?
As an university project, I wanted to design an app that could be used as an everyday app for users and after generating ideas, I approached on the idea to create an business/work app for all workplaces in order to maintain productivity within all areas of work roles.
Throughout the research process, I looked at if there were currently similar apps on the market and apps such asDeputy, HomeBase & Google Calendar. Although, for my casual job, I currently use an app called WorkJam that I usefor viewing my upcoming shifts, direct messaging to other employees and managers, etc. The WorkJam itself wasmostly functional but with the user interface, I could see that it can potentially be improved visually. So for myproject, I mainly focused on examining the WorkJam app and noted down the pros and cons. This led to theapproach I aimed for this university project where I wanted to design my own workplace app with an improved userinterface and user experience comparing to WorkJam.
WorkJam App
Competitive Analysis
Pros
•
Easy access to work schedule and shift details
•
Clock In/Clock Out easily accessible through the app instead of
using physical machine
•
Functional communication systems including direct/group messaging between employees and managers
•
Simple functionality that is similar to other mainstream social
media apps
Cons
•
Signing in the app through SSO (Single-Sign-On) each time can be considered not as user-friendly
•
The UI on some screens are a bit confusing or are text heavy, causing distractions
•
Some users have clarified that the navigation around the app was challenging
•
Internal messaging sections has the potential to be upgraded in referring to UI
User Personas
Creating user personas became useful throughout the design process, as the target market for the app involves a wide range of users in a various range of workplace environments. For instance, the two user personas represent users who currently work in different areas of employment, specifically where one person works in the retail industry compared with the other user who is a manager in a design agency. These user personas exemplify the wide range of users that the app intends to create to ensure organisation and connection within all workplace environments.
DESIGN
WorkFlow wireframes
Within the wireframe process, the name of the app at first was named ‘WorkConnect,’ initially because the aim of the app was to maintain the positivity of workplace relationships between employees and managers through strong connection and communication. This was the current title temporarily in the design process until I decided to rename it to ‘WorkFlow,’ eventually during the creation on the digital refined wireframes. So, during the initial phase of sketching the wireframes, I sketched out layouts for the main pages for the app and the features included by also drafting the interaction and link between them.
Refined wireframes
After the sketch of the wireframes, the next step was refining them into digital wireframes, applying the visual user interfaces and layout on all screens. From digitally bringing the sketch wireframes into screen, I realised and experimented to change the title from WorkConnect and replace 'connect' with 'flow,' therefore developing the official title of the app WorkFlow.
I believed the new name for the app during the design process was a better alternative because the name suited the concept of the project a bit more better and hearing the name WorkFlow, evokes more on the ideas of efficiency and productivity which is both essential in workplace environments and is one of the main objectives for this project.
Wireframe Testing & Feedback
From the low-fidelity wireframes, the next step was to start completing the visual design as well apply interacitivty on some of the pages for peer user-testing during this project. I was able to get positive feedback on the layout on most of the screens on how they were designed professional and modern with the context behind my app. Even when all of the screens I designed weren't interactive at the time, one of my peers that tested the app within the first stage of user-testing emphasised on keeping the interactions simple and functional as the app is considered to be for professional use. I also asked my peers as well on which name suited better for the app from between 'WorkConnect' or 'WorkFlow', in which majority chose WorkFlow as they highlighted that it sounds more aligned with my project objective where at this stage, I decided to shift into using WorkFlow as the app name.
User Flow
I created a quick user journey flow for the particular user and the potential actions they can do with using the app. With the wireframes, creating the sitemap as a task was more manageable and understandable as I could see the interactions in a visual perspective from the wireframes. From the feedback on the wireframes, I ensured on keeping the user flow simple as suggested from one of my peers. At this stage, I continued to refine the wireframes a bit more with changes including the app name and quickly started designing into screens.
WorkFlow Logo
With the change on the app name to WorkFlow, I started sketching out some logo designs that could become the visual brand for the app. I wanted the WorkFlow logo to be modern and simple that visually emphasised on the idea of 'work' and 'flow' which the logo sketches I created were refined in Adobe
Illustrator.
In crafting the logo's visual design, I opted to apply a cool colour palette of blues and greens that was similarly applied for the app's visual user interface. During a class tutorial, we had an opportunity to examine each other's logos of their own app prototypes and exchange feedback.
From the WorkFlow logo designs, this particular design was the most
suitable for the app according to majority of my peers who examined
all the logo designs. The colour scheme for the logo also represents
the brand identity and visual design of the app's interface.
The next stage, was to start the visual design process of the app with inspiration from the refined wireframes as well as the feedback both received and upcoming to help achieve the objective for the
WorkFlow app .
PROTOTYPE
WorkFlow App
Log In
When accessing WorkFlow, users are first brought to the sign in page where they log in their work details to view their work-related information. Most workplaces will have an employee ID for all employees in which this was implemented within the sign in page for WorkFlow along with the use of their own password to ensure authentication and privacy.
Punch Clock Feature
From the landing on the home screen, the use of the 'punch clock' is a feature essential to all workplaces as this ensures they are on punctual on time according to their rostered shifts. Users would be able to clock in or clock off during their shift instantly than using the physical punch clock machine.
This feature helps demonstrate that the employee is reliable, organised and committed to their work and using the punch clock feature also allows them to be paid correctly shown within their timesheets.
View Schedule
Users are able to view their upcoming shift schedule within the week through the schedule feature by pressing on the schedule icon in the navigation bar. Shift details are also included when a user presses on aparticular shift including the time, location, position and co-workers working on the same shift and same day.
Direct Messaging
WorkFlow offers a messaging communication feature where employees are always connected both physically and virtually. Employees are able to chat with others discussing anything either work or social related. The message feature also offers group chats for workplacesto discuss meetings, feedback or advice essential for workproductivity and efficiency.
Takeaways
The WorkFlow app is a project concept on being a platform to maintain productivity, organisation and efficiency in a workplace environment. This project is the first official app prototype that I created in which I believed I achieved well with the user interface and the user experience. From this project, I was able to learn and implement UI/UX design skills into the WorkFlow app and I intend to use what I learnt and continue to develop on creating more enjoyable and impactful user experiences.
© 2024 by Josh Zhedrick Cay