The Process

Logistics

Specs: Designed and prototyped in Figma for desktop
Timeframe: Nov 22-Dec 17, 2021
Role: UX/UI Designer, Automations
Team: 5 designers

Goals

• Identify areas for improvement through an audit of existing platform
• Make it easier for new users to complete their first journey automation 
• Increase number of active users 

The first step in the process was conducting an audit on Quickwork’s existing product, which was broken up into three levels: 

• Website 
• Automation platform
• Conversations platform 

The audit consisted of heuristic evaluations and initial ideas for recommendations. Each team member conducted an individual audit.

Audit Summary & Recommendations

The audit began with an overall summary and high-level recommendations. The audit was an initial introduction to Quickwork’s platform that was meant to be relatively quick, performed over the course of a couple days. 

After exploring Quickwork’s website, automation platform, and conversations platform, my overall impressions were that while many useful tools were there for users to successfully use Quickwork, they weren’t always presented in the most helpful or easy way. 

Website 

Recommendation #1: Who is this for? 

The first recommendation I had for the website is deciding on what sort of language to use. Their homepage below contains a lot of technical jargon that may not be easily understood by non-coders.

I believed it would be helpful to conduct interviews with their audience to determine what sort of language most resonates with them. 

This recommendation is based on their two user personas, “citizen developers” and “coders,” outlined below. 

After exploring their personas, I determined that the two personas were slightly competing with each other, as citizen developers would need a simple platform with more accessible marketing language, and coders would not need the marketing jargon. 

However, as citizen developers were their primary persona, we determined with the core Quickwork team that it would be more useful to pursue the recommendations based on citizen developers. In addition, while coders didn’t necessarily need marketing jargon to be persuaded to sign-up, citizen developers would need more accessible language to understand what the platform does and how it would help them. 

Website Recommendation #2: What is shown first?

The next tip for the website would be to figure out what these potential users should be seeing on the website first. In other words, what information would take priority. For a website, this is an important decision, as Quickwork’s website is a user's first introduction to their product. 

Currently, there is a lot of text on the main pages of the website. Instead, my recommendation was to make it more user centered by providing real-world examples of automations conversation management that your users would find helpful. 

Progressive disclosure would be a helpful usability heuristic to use so that not all text is displayed at once to avoid information overload. The text could even be broken up with a video or animations which show how the product can be used. 

For instance, below is a prime example of exemplifying the product, however,  the website currently shows the same interface on WhatsApp, Telegram, Messenger, etc, where it  instead can show 5 different examples of ways someone can use the conversation feature.

Website Recommendation #3: External & internal UI consistency

External consistency is having a consistent interface to similar products so that people know what to expect. This means designing based on what users already know. Internal consistency is having  visual consistency from the different elements within a product’s own interface. 

Based on this, I saw a few examples of room for improvement. For instance, these cards below imply that you can switch between them because they're in a stack, but there is no way to switch between them. 

Another example of external inconsistency is that the line below next to "Connectivity" looks like a scroll bar—however,  it's just a visual element that doesn't scroll.

Here, the breadcrumbs used are redundant. The user can already click above to switch between cards.  They also don't make sense because they disappear as you click on them, whereas in other cases on the website the breadcrumbs work normally. 

In addition, typically,  the navigation is displayed so it is  indicated what page a user is currently on through the text of that page being bolded or emphasized.  Here, I was on the case studies page but it was not indicated.

Also, from a language & wording standpoint,  I think there are terms that are used differently on pages, like customer stories v. case studies. It would be helpful to be consistent here as well. 

Website Recommendation #4: Reframing case studies 

My last website recommendation was to reframe the page with “customers stories” to further emphasize how different industries are using the platform. 

To tailor the platform to the user, there could be  a way to input what industry the user is in to see how other industries have used specific journeys. In addition, including more videos or animations here too can make the experience of the website more enticing.

Automation Recommendation #1: Improve sign-up experience

The main call-to-action on all the website pages is to Get Started. However, many websites contain embedded sign-up boxes to reduce how many steps a user has to take. 

Also, the sign-up box there can be tailored to new users, here they would then have to take another step to register now. There also should be a way to allow users to sign-in with Google or other apps.

After sign-up, there’s nowhere to go from here.  Instead, I recommended allowing users to continue the process with confirmation later or a verification code sent to email. 

Automation Recommendation #2: Helpful onboarding & templates 

My second automation recommendation was to provide a helpful onboarding experience with recommendations on where to go first.

The first action after sign-up is to Name the Folder, which feels out of context. What is this in regards to? What is the folder for? To be clear is a better way to start the experience. 

Also, one thing to always consider in UX is how the interface will look in its blank state.  For instance, I don't have any journeys at first, and the action is to create the journey. 

What else can be here? Through creating potential journey templates and resources on how to set up a journey can be helpful. 

Currency, there is a “Docs” page, but it's just pages and pages of text that people aren't going to want to read. If the documentation was built into instructions with the initial set up, people don't have to take that extra step of “reading the manual.” 

Automation Recommendation #3: Clear UI for actions

There are many instances where the UI is misleading or confusing and can be simplified for clarity. 

For instance, the save changes v. save & start button. What does Start mean, start creating the journey or start the journey? Also, save changes looks like it’s greyed out, making it not look clickable.

Automation Recommendation #4: Visibility of system status 

Visibility of system status is an important usability heuristic that states designs should keep users informed about what is going on through appropriate, timely feedback. 

From the Trigger Event to Action steps, there should be a way to close the trigger event knowing it is saved and go back to the action. 

If info from the box "Trigger Event" is complete, it can be closed with a green check mark or a red X to indicate the user’s status. Currently, there is no way to know if the info is saved.

Conversation Recommendation #1: Clarify conversations sign-up 

The first conversations recommendation is clarifying how the sign-up to the separate conversations platform works. I accessed the conversations platform via the automations platform but was instantly prompted to re-sign up. 

Immediately, I thought this was confusing—do users need to have an additional login for Quickwork conversations?  

I first tried by original login but it didn't work, so I assume that was the case. Instead, I think these should both be part of the QuickWork login.

Conversation Recommendation #2: Conversations onboarding 

For conversation onboarding, many of the same recommendations from the automations platform apply. Initially, the first view after sign-up is very blank and it is unclear what to do. 

In addition, at least on the automation platform there was a CTA to create a new journey. Here I have no idea what I'm supposed to do, and after exploring all the options I still didn't know 

Maybe this was due to my lack of understanding of code and how I'm supposed to use this, but even for someone who does understand I believed it  would be a more delightful user experience if they were guided through everything to make it easy and as quick as possible.

Summary of Audit 

The audit was well-received by the core Quickwork team. From here, our team of 5 decided to split up into two groups to redesign the (1) website and (2) automations platform. I offered to work on the automations platform with one other designer, as I had prior experience with Zapier and was interested in optimizing the platform. 

As the timeframe was only 3 ½ weeks total for the entire project, we decided that it was only feasible to focus on the website and automations, omitting the conversations platform which needed more development.

After the initial audit, the Automations team decided to conduct research to better understand the platform and find out how other companies are solving automated workflows. 

The secondary research included investigations into what a citizen developer is in order to better understand the user.

From Forbes, “The Pros and Cons of Citizen Development”

Competitor A was not very helpful, as there was no way to test the platform without scheduling a demo and paying for the platform. Quickwork already has a better solution than this, as their platform offers a generous free plan with an instant sign-up. 

Competitor B's platform is likely one of the most simple automation platforms on the market, but they do not provide as many additional or advanced tools that Quickwork does.

However, for new and inexperienced users, investigating Competitor B's platform was very productive. A few key takeaways were the recommended workflows and providing many resources and tutorials for onboarding.

The Competitor C lightning demo was also helpful as it is another very simple platform. The key takeaways from exploring Competitor C were only showing one step at a time, and include popular apps without having to search for them. 

User Flows

Based on the goal of creating a more helpful automation process, these 2 potential end-to-end experiences model the successful experience a user will take, from after sign-up to activating their first journey. 

Based on our decision to focus on the onboarding experience of citizen developers and make the platform as simple as possible, we decided to focus on the first user: those unfamiliar with automation. 

Crazy 8 Exercise 

From here, we decided to do a sketching exercise to generate many ideas. The first sketching exercise I performed solo where I created 4 potential screens of the critical screen in the onboarding process. I determined the critical screen which would be the screen after sign-up which prompts the user to start their first journey. 

This key screen also could allow users to browse apps and browse recommended journeys. 

Next, the Automations team performed a Crazy 8 exercise which involved sketching 8 potential ideas over the course of 8 minutes, with 1 minute per frame. 

Each screen is a variation of what should appear first, whether the first CTA should be Connect Apps, Recommended Journeys, or Create Journey.

Additional Sketches

After the Crazy 8 exercise, I sketched a very basic outline of the key screens in the onboarding journey, including the critical screen, the screen before it, and the screen after. 

Critical Screen #2: Search & Select Apps

The next critical screen in order to complete the onboarding experience would be to Search/Select apps. This is the same screen as the previous, with an expanded box after the user has selected their apps. Now, the user can change apps and drag to reorder them.

Summary: After presenting flows and sketches to the Quickwork team, it was decided that we would move forward with wireframing the onboarding the automation platform for a user unfamiliar with automation platforms in order to achieve the simplest process. 

Wireframes

From the sketches, I began wireframing. I led the UI direction for the Automations team.  On a tight deadline of a week and half to complete wireframes, high-fidelity mockups, and user testing, I decided to focus on making detailed wireframes to prepare for high-fidelity.

Rather than producing many screens that would be not as quality due to the deadline, I focused on making a lesser number of screens that were higher quality and refined into high-fidelity designs. 

The process starts directly after sign-up with a welcome screen to start the journey.

3 Key Decisions

• Breadcrumbs/Visibility of System Status 
• Multiple Places to Access Tutorials 
• Keeping Tools Tab

There were three crucial decisions that were made during the wireframing process. I detailed them below. 

Breadcrumbs/Visibility of System Status

As previously mentioned, it is important during a complicated process for users to stay informed on which step they are on. 

So, I decided it was necessary to include the status indicator at the top of the journey creation page. It begins automatically when the user selects their two apps. These breadcrumbs also act as a navigation, so users can return to previous steps if they need to make changes.

Keeping Tools Tab

Initially, the tools tab in the navigation was omitted from the wireframes to simplify the onboarding process. However, after presenting the wireframes to the Quickwork team they stressed the importance of keeping the more advanced tools for advanced users.

The other designer on the Automations team led the first round of user testing from the wireframes in order to implement any changes moving into the high-fidelity mockup. 

Overall, the feedback from users was positive. However, there were a few small changes that we decided to implement based on feedback. Below is a summary of notes from 2 interviews:

Analysis of Feedback 

Based on the feedback from the first two interviews, we decided that the most important changes to make when designing in high-fidelity would be to:

• Make the test button bigger and more noticeable
• Keep the side-by-side journey from “When this happens…” “...then do this” so users aren’t confused 

UI Choices 

One of the key constraints we had to keep in mind was to keep the UI consistent with the Website team, as we were working independently under a tight deadline. 

For the color palette, we used the orange that was in Quickwork’s existing logo with its friendly counterpart, a medium blue. The orange was used primarily in the logo and in the Intercom integration (chat support), while the blue was used as the button & accent color. 

We kept the color palette minimal and simple so that users wouldn’t get overwhelmed as they set up complicated integrations.

The website team chose a standard yet versatile sans serif font, Lato, while I chose Prompt to use for a quick improvement of their existing logo. However, I didn’t spend a lot of time on their logo as it wasn’t as important in the redesign of simplicity. 

High-Fidelity Mockups 

From wireframes to high-fidelity mockups, the main change was to keep an organized structure when specifying the trigger & action. 

Through this, the user first selects the Trigger & Action, then connects the apps at all once. This way, the process feels more seamless and easier. 

The other key change in the high-fidelity designs was adding additional “Continue” buttons so that the process doesn’t automatically advance without the user wanting it to.

User Testing 

In the final round of user testing, we received positive feedback on the prototype, which you can explore here. 

Interviewee 3: (High-fidelity)

Background: Education -> transitioning into UX Design. No experience with integration
platforms. However, most of her Gmail is linked to Slack.

UX Feedback:

• Slide 2, Slide 8-  Renaming the journey. -----> What do you think about adding more spacing between the breadcrumbs and “Name your journey”? I’m thinking it will be more visible.

Not feedback, but what I noticed:

• Slide 5: I think it makes sense to rephrase “…Do this!” to “Then do this”.

She  added “then” herself when describing this section, and it came up for one of my calls yesterday too.

Based on the additional feedback, we made a few quick changes, including repositioning buttons, adding more spacing at the top, and rephrasing the Trigger and Action language to be “When this happens…” “Then do this.”

After presenting designs, Quickwork was very pleased with the deliverables, including the audit and redesign.

Overall, it was an enlightening project to work on, with two teams across 6 time zones and was a valuable experience to work amongst a design team under a tight deadlines.