Project juggling anywhere
Keeping projects organized and on time is arguably the most important part of freelancing. Being able to deliver what you promised when you promised it can make or break your business. Hectic helps contractors manage their projects and the daily administrative tasks of their freelance business so their lives can be less "hectic."
The Scope
WHO: Hectic design team: Dano & Felice + Vika S. & Kylene K.
WHAT: Translate the essential views and features of the Hectic web app into a native mobile app.
WHEN: 3 week sprint, February 2021
ROLE: C&C Research, UX/UI Design, Usability Testing
TOOLS: Figma, Mural, Zoom & Google Meet, Google Sheets
The Challenge
Project management is complex, and everyone does it a little differently. The biggest challenge was understanding what folks need on their phone to manage projects and how to deliver that information effectively on a small screen.
I was dropped in the deep end with this one. After establishing the scope, I jumped right into high fidelity sketching and an informal critique in the first design meeting with the head of product and head of design. The process never really slowed down from there.
Working Fast
The Hectic team works at a fast pace. While working with them, I designed fast, presented fast, failed with feedback fast, and iterated fast. Needless to say, I learned a lot about getting stakeholder feedback and buy-in early and often.
Understanding project management
We started by writing an internal press release and requirements document for the entire mobile app to understand the stakeholder team's objectives for the overall product. Discovered that the focus was on a quick initial release of the mobile companion app, with additional features being rolled out continuously until it matched most of the web app functionality.
With that in mind, our team of three pivoted our focus to the product's project management section. After a quick discussion and review of the new mobile personas, Vika and I wrote some user scenarios based on that research. To better understand how freelancers would use project management on a mobile device, we turned the scenarios into user stories with the head of design in Mural.
The Status Checker
The Planner
The Collaborator
The Structure & Organization
Deliverables are the foundation for project organization in the Hectic app. Users can assign a due date, status, and person to a deliverable. But the freelancer must add the client and project before a deliverable can be added. Naturally, the app's project management section needs a project list, deliverables overview, and a calendar (everyone loves a calendar) view.
The Process
After creating user stories and reviewing the personas, the team started cycling through conducting C&C for inspiration, collaborative sketching (primarily high-fidelity), and presenting to each other and the Hectic design team. We hit a few bumps in the road, but every exploration was worth it in the end.
We found that most project management apps were focused on teams rather than individuals, but there were plenty of ideas and best practices we could pull from them.
I worked closely with Vika in Google Meet and Figma to sketch screens and talk through designs. We presented our progress to the team for feedback and some on-the-spot ideation in Figma.
Prototype and Testing
After a lot of constructive back and forth, the team decided we were ready to do some testing. Kylene created a comprehensive Figma prototype for the project management screens, and we were off to the races. Try the project management prototype for yourself here.
Usability Testing
Over a weekend, Vika facilitated the usability tests while I took down quotes and insights. We tested our designs with 6 people; 3 are freelancers and 3 people who use project management software daily.
We compiled the results and insights from the tests and founds some areas for improvement. We were surprised to find ourselves presenting our findings at the Monday meeting.
Always Be Prepared
We weren't expecting to go through our usability results at that meeting, but we were prepared. I learned to be ready to present your work or findings at any time because you never know when you'll find yourself in front of stakeholders explaining things.
The Evolution
Project List
The project list was pretty straightforward, but we had a few assumptions going in that needed to be assessed. The initial design with the active/archived toggle assumed that a freelancer would often view archived projects, which didn't match the user stories. We removed the toggle and added an archived filter. The next iteration was close but didn't show all project information when the card was expanded. After testing and the following product meeting, we landed on cards that expanded via a caret or navigated to a detail page along with robust filtering for the list
Project Calendar
Nothing beats a calendar for a high-level view of how busy things are and when downtime is coming up. We started with a basic month and week view and did a range of visual explorations before testing it with users. We learned that users wanted to filter the calendar in a few different ways and see all of the information linked to the deliverable from testing. After presenting our findings, the head of product and stakeholders decided we would add separation between days in the deliverables list, making the week view redundant.
Deliverables List
The Deliverables list started as a Kanban view similar to how it's shown on the Hectic web app. During a product meeting, the stakeholders determined that all of the clicking and dragging involved wasn't the best mobile experience. We started searching for inspiration and iterating alternatives—this lead to streamlining the section into more of a list and exploring tabs and quick filters. There was some confusion about adding additional filters and concerns about fat fingering the quick filters in testing. After the product meeting, the quick filters moved into the filter overlay, added options for sorting the list, and separate days with the labels.
Takeaways
I'm very proud of the work I did individually and as part of this team on the development of the mobile project management feature. We handed off a complete, well-thought-out product, more or less ready for rollout. I'm sure the Hectic team will continue evolving the native mobile app, and I look forward to seeing it go live.
Next Steps
Test the updated screens for usability and further explore the navigation between the project management views.
Revisit the mobile app's overall navigation and explore a bottom navigation tray rather than the current in-and-out method.
Continue refining the mobile UI and address some of the accessibility issues Kylene uncovered via color adjustments or changing the typeface.