UX/UI Designer
The Basics
Objective
To design a mobile proposal tool for Hectic's native mobile app.
Company: Hectic
My Role: Product Designer in a team of 2
Duration: 3 Weeks
Tools Used
Figma
Trello
Photoshop
Overview
What is Hectic?
What's the problem?
The Constraints
C & C Analysis
We decided to conduct a competitive analysis of Hectic's primary competitors such as Honeybook in order to compare their mobile app proposal tool with Hectic's website proposal tool. Below you'll see our full list of takeaways. However, we decided to focus on 3 in particular as we move forward.
1.) Suggested Deliverable Items can save users time
​
2.) The ability to customize proposals is important, so the tool is flexible enough to be useful
​
3.) Simple and clear functionality is key
Research: The Web Proposal Tool
In order to make sure we adhere to our given constraints, we did a deep dive into Hectic's current website proposal tool. Below you will see a breakdown of several of the key functionality options they have available. These are all features we wanted to implement with the mobile solution we create.
Noteworthy Takeaways
While attempting to create and send a proposal of our own using the web proposal tool we discovered a few pain points.
​
1.) Commenting on a specific block of the proposal isn't possible given the current comment feature's limitations. Addressing this issue would be useful for a client providing specific feedback in particular to a freelancer.
​
2.) Editing your cover photo/title settings wasn't intuitive.
​
3.) It takes a long time to manually enter all of your deliverable line items. Adding curated suggested items would likely save the user time.
Information Architecture
In order to visualize the possible structure of our proposal solution, we created a mind map. This helped us to sort out our ideas and reminded us that simplicity can get lost if we don't narrow our focus.
Project Management
While meeting with our stakeholder, the product manager at Hectic, he suggested that we use a project management tool so that we can stay on track. We decided to use Trello and created a system where we could mark tasks as completed using checkmarks, and drag and drop features into categories such as "in progress". This turned out to be very valuable because we always knew what needed to be done before our 3-week deadline arrived.
Quick Detour: Here's a peek into Hectic's Design System
I wanted to make sure we studied their Figma design system thoroughly because this was the first time I had been tasked to use a design system. I enjoyed using it because it helped ensure our design solutions were in harmony with the current MVP mobile app screens they have.
Wireframes
Revising V1
After we met with the Hectic product manager and UI Designer we received clear feedback. Based on what we learned we decided to improve a few aspects of our design.
​
1.) The add content button was redone to match the website proposal tool.
​
2.) The add deliverable block was given more structure so that the user can understand what information belongs there.
​
3.) We simplified the action toolbar to prevent clutter.
Let's take a look at our 2nd iteration screens now.
Honorable Mentions
We ended up creating over 50 screens for Hectic's mobile app. They addressed features such as adding content blocks, editing cover photo settings, signatures, payment & legal terms, and client perspective screens.​
​
.png)
Final Solution Demonstration
What I learned
1.) It's important to invite people with different perspectives to design reviews.
​
2.) Don't take constructive feedback personally, and be prepared to iterate frequently.
​
3.) Sometimes a non-conventional design process will make more sense for the company or project you are working on. For example, in this project, we were specifically instructed to focus on ideation and high fidelity wireframes because Hectic's design team already had personas and some research completed.