UX UI DESIGN PROJECT

TIMESHEETS

DESKTOP APP

ABOUT:

Before tackling a larger project, the client wanted to see my thought process thus giving me project in which a fictional client wanted to see something a project done as soon as possible. I had two hours to come up with a solution and below is my process that awarded me the job.

REFERENCE: Confidential

ROLE: UX Designer / Interaction Designer

TECHNOLOGY: Unknown

TOOLS: Axure, Photoshop

PROJECT INFORMATION

GOAL:

Design a time-sheets application that would allow the users to track the time spent on a project for both invoicing and estimation purposes while also making the process more enjoyable as the current company implementation is universally hated.

REQUIREMENTS:

ability to capture time
ability to record time on multiple projects in a single day
ability to record/signal in advance holiday or sick days
most users will be viewing and recording their own time only
second set of users who will be able to see and edit multiple users data across a range of periods, by user, by team and by project
a solution needs to be done within two hours in order to be presented to the “big” client

MY UX APPROACH QUICK PREVIEW:

CLIENT BRIEF

To the left you can see the client brief, based on that I’ve highlighted the goals and features that they wanted before I got started.

I STARTED BY ANALYZING THE COMPANY USERS AND COMING UP WITH POSSIBLE APPROACHES

Why I did this: I needed to identify the company culture, their age group, how their users interact with the products, their tech proficiency, what devices are they using ( mobile, tablets, smart phones, laptops ), operating system in order to get an idea of their existing ecosystem
How I did this: since my client wanted to see my thinking, I went ahead and setup a company profile that fits with the multi-national goal they were going for as well as their initial work environment
How it helped: by highlighting the initial layer of information and constraints that I needed to design the UX, thus I was able to determine that since it was a tech company, they were proficient with all sorts of devices and from these resulted the fact that they spend a lot of time online and on devices thus are quite familiar with simple and complex layouts. By knowing this I was able to identify three approaches.

NARROWING DOWN THE SOLUTIONS

Why I did this: since the project had an urgent delivery time, I had to quickly identify which approach is the best one in order to focus on it
How I did this: by brainstorming and using my empathy skills to connect with users and think about what would be the steps that the users need to perform in order to get this done, thus identifying early problems with these initial solutions
How it helped: it helped by identifying problems early, so I wouldn’t realize during my design that this solution is completely flawed and I need to start over thus not making the deadline. It also helped narrow down my final solution to either focus on a web app or a desktop app approach

THEN REFINING THE TARGETED AUDIENCE

Why I did this: as a way to further refine the targeted group and clearly identify how each user group would use this application
How it helped: it later on helped design the app by taking into consideration their tech proficiency which influenced how complex the app UI could be, how eager they are to get home thus wanting to get things done fast and have clear and simple UI elements as well as identify from where and how they will access the application and what features they will need

TACKLING THE FIRST SOLUTION

Why I did this: in order to clearly identify the users journey on a day to day basis when interacting with the app and identify which is the best approach
How I did this: by identifying what are the exact steps they need to perform in order to get the app running, afterwards creating the users journey in Axure and then identifying problems with this approach
How it helped: by pointing out that this solution requires too many steps to be performed on a daily basis by all users, it only works for user group B that will only use certain features from time to time, thus they don’t have to do it on a daily basis or for long periods of time

I THEN MOVED TO THE SECOND SOLUTION

Why I did this: in order to identify if this approach would prove to be faster and easier for users to perform the record time task on daily basis
How I did this: by identifying what are the exact steps they need to perform in order to get the app running, afterwards creating the users journey in Axure and then identifying problems with this approach
How it helped: by identifying what are the exact steps they need to perform in order to get the app running, afterwards creating the users journey in Axure and then identifying problems with this approach

NONE WORKED AS INTENDED SO I CAME WITH ANOTHER SOLUTION

Why I did this: to display how the two solutions could work together and be tailored to each user group and their needs
How I did this: it was clear that a desktop solution would be needed for users who require to perform certain task on a daily basis, while user group B that only performed certain tasks from time to time would be better using a web app so they would avoid having to interact with the app. Using a desktop solution for both user groups, would have lead to users having to be faced with additional features which wouldn’t have made it intuitive, might have required running the app even though they wouldn’t use it, might have lead to using additional system resources might and so on
How it helped: going through all this process and identifying the best approach, helped design a user experience that’s tailored to each user groups and their particular behaviors, tech experience and required tasks

I THEN IDENTIFIED THE VIABLE FEATURES BASED ON COMPETITOR ANALYSIS

Why I did this: in order to identify the features that I need to integrate into the wire frames while also meeting the deadline
How I did this: by doing a quick research on the competition and by brainstorming a list of features related to the ones mentioned in the initial project description and picking only the ones that could improve the UX
How it helped: by focusing my energy and design efforts on delivering a minimum viable product, that I could then get real user feedback and data, then iterating based on that as well as ship new features that would further improve the UX.

AND STARTED THE WIRE-FRAMING

Why I did this: in order to pint point the best navigation and page structure so users won’t get dizzy, confused or be required to perform extra interactions
How it helped: by pointing out early problems and choosing the best approach as a result
Here are some additional

UX EXPLANATIONS

This was just a preview, see the step by step guide to my thought process below
View the PDF Case Study below
View the Time sheets App Case Study
Here’s how my UX design solved some of the

PROBLEMS + SOLUTIONS

1. how to identify user information with such limited information? solved by creating a fictional client background this helped get a sense of their tech proficiency, age group, environment and office culture, this helped get a broad idea who I was designing for, the scale and the mentality of the users which influenced how complex the app layout could be based on their tech proficiency and age group
2. how to determine what features need to be shipped first? based on the clients habit of wanting to see something done as soon as possible I assumed he would continue to want to see things done as soon as possible and thus I choose a Lean approach and then solved the problem by listing the minimum viable product features, that would let me ship a product fast, gather data and iterate upon feedback. Since there were no physical users I didn’t create a red route analysis to further identify the priority of the features
3. how to choose the best solution for a UX problem? solved by brainstorming multiple solutions, listing their pros & cons, identifying problems,  crafting the user journey and I would have validate them but due to it being a fictional client I had to client data, thus I assumed they were valid
4. how to identify additional features for each user group beyond the required ones? solved by doing a quick competitor research and creating user personas that provided some insight about how they work which helped me get into their mindset, as a result I was able to create a more realistic solution
5. how to make data be shared between web app and desktop? solved by coming up with the solution of using an API to quickly share data between these, since a mobile approach was also considered at early phases this would have further helped that approach
6. how to make it seamless and not get in the way, keeping user interactions at the minimum? solved by making the day to day desktop app light weight and letting it run in the background as a way to avoid interference with their day to day performance by requiring them to have a browser or application constantly open and visible, which could distract them and get in the way by taking screen space, showing up when alt-tabbing or leading to accidental clicking in the bottom of the operating system bar
7. how to determine certain user behaviors? solved by creating user personas detailing if they have a family, have a tech background, if they are required to work over-time which helped assume that they would most likely want to get it done as fast as possible, especially at the end of the day due to them wanting to get home to their family
8. how to prevent user fatigue? solved by identifying how much time they spent at the desk by monitoring key presses and mouse movement since if a user is away then no interactions would be performed, thus if the user reaches a certain threshold a message is displayed to let them know it’s time to take a break
9. how to make timesheets fun? solved by designing a light gamification system that would display fun quotes or possibly images that would improve the users mood before they start working, using fun and creative copy writing, countdown to clearly define “it’s work time now” and ranks such as “you’re a superstar” provided at the end of the day as a way to motivate and congratulate users for a well did job. All this would also help increase the productivity of user
10. how to make it easy for users to start working without worrying about the app? solved by making the app run automatically when they start the computer and by letting them start the app manually if they want that, which automatically starts tracking time, in both cases user interactions are at a minimum requiring at most a single click to get started
Thanks for browsing,

VIEW OTHER UX PROJECTS

or share this project with your friends, it helps