Hectic Mobile App
Case Study
THE OVERVIEW
Project Timeline
3 weeks
My Role
UX/UI Designer & Usability Testing Facilitator in a team of 3
Company
Hectic App
Task
Design of a Project Management Part of the MVP Native Mobile App
INTRODUCTION
Hectic is a freelance management software that gives freelancers and contractors control over their business. Through project management tools, invoicing and proposal templates, and time-tracking features, Hectic gives freelancers a way to organize their work with ease and efficiency.
For 3 weeks our team of three had the opportunity to work side by side with Hectic’s team shortly after they went live with the web app. We joined the team soon after they started working on the native mobile app for both IOS and Android. Hectic app consist of several segments, and our team’s goal was to design the Project Management part of the app for mobile. We worked closely with the Head of Product and the Head of Brand and Design and got weekly feedback from COO, CEO, Head of Engineering and the rest of the team.
USER RESEARCH
Existing Web Personas
We started our design process with the user research. Hectic had research about their web app users and introduced our team to 5 user personas the product is built for.
Hectic was moving very fast with the mobile app and did not build any mobile user personas specifically. For the mobile app, Hectic’s team wanted to focus on younger freelancers as they are more likely to use the app on their mobile devices. Our team of researchers took this part of the project, interviewed 5 freelancers within various fields between the ages of 22-35 y.o., who are typically working on project-based jobs with a client. The research team synthesized the results, built mobile personas and handed their findings to our team for the further design process.
Interview Takeaways
Using this data, our research team was able to create two user personas, representing young, newer freelancers who would possibly be more inclined to use their phones in their daily, working lives.
DAILY TO-DO LISTS
Freelancers use their phone as their main tool to write to-do lists and take notes on the go.
​
-
Younger and newer freelancers (age ~22-27) tend to use their phones as the main tool to write granular, daily to-do lists, but leave the larger project planning on their computer.
​
-
Slightly more experienced freelancers (late 20s, maybe freelancing for 2-3 years) tend to stick to more tactile methods, such as post-its, notebooks, or agenda books.
QUICK AND EASY
Freelancers need a way to check high-level communications and schedule details quickly and efficiently.
​
-
Across the board, freelancers start their day by checking their phones for urgent requests, scheduled meetings, and pre-planned deadlines.
​
-
For more experienced freelancers, this tends to be read-only, versus fresh freelancers, who may start their day by updating details directly on their mobile device.
WORK-LIFE BALANCE
Freelancers want a career that doesn’t take up their entire lives but gives them financial stability and steady hours.
​
-
Ultimately, freelancers are seeking a good work/life balance. They would rather make slightly less, in order to gain more time outside of work.
​
-
For young freelancers, this comes with some anxiety about work consistency. For more experienced freelancers, this means their phone is a tool to distract from work, and not a tool to get work done.
Mobile Personas
Our first mobile persona is 'The Fresh Freelancer'. This is a user who has just started their freelancing career within the last 6 months, and is motivated by having a good work/life balance and less strict schedule. They love what they do, but since they’re new to being their own boss, they may struggle with things like invoicing, proposals, expense reports, and the ‘business’ side of the job. This user’s main tool for to-do lists is their phone, because it’s quick, and their phone is always on them. The biggest thing they miss out on as a freelancer is mentorship.
'The Millennial Hustler' is the second user persona. These are users who are a slightly older millennial, maybe about to head into their 30s, and have been freelancing for a couple years. This user has slightly different motivations: while they like having a career that doesn’t take up their whole life like the fresh freelancer, they require much less hand-holding by both their clients and the tools they use to manage their time and business. By and large, this user views their phone as a distraction from work, not as a main tool for working. They’re more inclined to write tasks out by hand than adopt a new tool on their computer, much less their phone. However, the phone is a key tool for view communications with clients, reading schedules and updates, and double-checking deliverables.
Project Management For Mobile
Mobile app development in Hectic was moving fast to launch the MVP of the app as soon as possible. Based on the research results we determined three main aspects to focus on for the project management segment of Hectic mobile app:
In order to better understand the mobile persona’s needs for the complex Project Management aspect of the app we created user stories.
The Collaborator: professional who has to wait on and coordinate with others
The Planner: a freelancer who needs a schedule overview to plan their day
The Status Checker: someone who's waiting to hear back from a client
1
high-level notifications, to-do’s, and schedule
2
adding to-dos and notes
on-the-go
3
time tracking away from the computer
User Stories: Project Management
C&C Analysis
Freelancing & Accounting
As a part of the exploration process we did multiple rounds of C&C to compare various features and functions from other apps.
First, we looked at other apps for freelancers such as Honeybook, Bonsai, Freshbooks to find best practices and useful tools and features. We also drew inspiration from accounting apps like Quickbooks in how it organizes complex information and helps users deal with financial paperworks.
Project Management
As our job was to design the project management part of the app, naturally we looked at a number of project management apps. We found that most of them were focused on teams rather than individuals, but there were plenty of ideas and best practices we could pull from them.
Calendars & To-Do Lists
It has quickly been decided that there had to be a calendar view for project management, and who doesn’t love a calendar. So we explored some dedicated calendar apps and those with clear calendar experiences.
Another important feature our users mentioned as crucial on the mobile - notes and to-do lists. We looked at some apps that do a good job of keeping adding to-dos or notes simple but allow for tagging and organization as well.
DESIGN PROCESS
Current Organization Structure
The current structure of Project Management allows users to only create components from big to small:
​
-
Users can assign a due date, status, and person to deliverables
​
-
Users can mark tasks as done
​
-
Notes and to-dos exist outside of clients, projects, deliverables, and tasks
Project Management View Map
Project Management is complex, and different freelances use and view it differently. Before starting to design our screens in Figma we determined the views we wanted to give our users. Our team along with the Hectic’s team decided to move forward with 3 different views on mobile: project list, project deliverables list, and calendar view for visualizing due dates.
Design Evolution
As I mentioned earlier, Hectic was moving fast with the mobile app and already had a design system set up in Figma. Hectic does not work with low or mid-fidelity wireframes and works straight with high-fidelity wireframes. So we started our work in Figma along with the Head of Product and the Head of Brand and Design.
Each of the screens for project management went through its own evolution. We presented our ideas at numerous product meetings and did user testing with the final design.
Project List Evolution
With the project list view, we were close to the final design from the start. But we had to reconsider the importance of archived projects. Initially, we placed a toggle on the top of the screen, but later we condensed it into the filter button as it wouldn’t be used often enough to give it a separate space.
We also added further details in the expanded view of each project. From here, we then made final iterations to the header and the expanded view.
Deliverables Evolution
Kanban View
With the Deliverables view, we started with the kanban view to match Hectic’s web application. We presented this design during one of the product meetings and decided that kanban didn’t work for mobile. There was a lot of clicking and dragging involved which could cause a lot of accidental interactions, and it also just wasn’t the best way to display the information.
Deliverables Evolution
Quick Filters
We wanted to step away from using large cards and start to work towards a more streamlined list view. From here, we started developing the idea of quick filters on top of the screen and tried many different variations of those.
Deliverables Evolution
Clean Up
After numerous explorations of that idea, we landed on the final version of quick filters on the top of the screen in combination with different filters living in an overlay menu. After usability testing, that idea evolved into our final design with the quick filters moving to the overlay menu.
Calendar Evolution
We were building a calendar view that would present all of the deliverables in a list below and the dates that they’re due. We built a month and week view that users could toggle between. Started with a simple version of both. Week view was rolled up to display just one week. We made a few different iterations to the two views: no carets on the side of the month, relocate the avatars and status buttons. Week view gave a larger view of just one week, larger status buttons, darker background on the week button when pressed.
Then we played around with the visual design even more. We made shapes softer, status indicator smaller, and really worked on the visual elements of this design. Our final screen is on the right. As you can see, we no longer have a week view. Why? I’ll get into it in a moment.
USABILITY TESTING
We tested our designs with 6 people at the age of 24-30. 3 of them are freelancers and other 3 work in teams and use project management software on a daily basis. Along with on of my teammates, we wrote the usability testing script, I was responsible for conducting the test, and my partner was taking notes and putting the results into the rainbow spreadsheet. If you'd like to see more detailed report on the usability test, please click here.
Below you can find the iteration we made after the usability testing.
Homebase
Takeaways
Users enjoyed our Homebase and mentioned that it had everything they needed to easily navigate to other parts of the app.
Users could not tell what the Notes Icon meant.
Iterations
Labeled icons for ‘Notes’ & ‘To-dos’.
Homebase
Project List
Takeaways
Users wanted the same level of detail as on the deliverables view
Iterations
1. Increased the contract of the ‘filter button’ as it was hard to see.
2. With the caret pointing sideways on the condensed card view our users thought that if they clicked on the project card the app would take them to a separate page. We changed the direction of the caret, now it is pointing down to give users an idea that the card could be expanded.
3. Added the collaborator icon to the expanded card to match the level of details on other views
Deliverables List
Takeaways
Users liked the idea of quick filters but were concerned that the design would lead to errors.
Users tended to clear filters before applying additional ones.
Users couldn't tell what the 'deliverables' icons meant.
Iterations
1. Moved quick filters to the filter overlay.
2. Replaced deliverables icon.
Deliverables List
Takeaways
Users would scroll the list instead of filtering since it was sorted by date.
Users assumed that back arrow in the header would take them to the previous view.
Iterations
1. Replaced back arrow with Hectic icon.
2. Added sorting options and labels to the deliverables list.
WHAT I LEARNED
During this project I once again learned how important it is to properly present your idea and how dangerous assumptions can be. It's very easy to assume that people working on the same project with you are using the same data and are in general on the same page with you. It can be true sometimes, but you still have to always support your designs and ideas with the research and give your teammates a thorough explanation of your work.