Inside DragProduct

Building a new Drag experience

By 10th May 2021 June 11th, 2021 No Comments

We are rebuilding the experience of Drag. It’s a redo, a rethink from thousands of signals, insights and direct chats with customers. This is the initial work before handing over to our superstar product team to build.

πŸš€ Here is the most recent product summary

Updates

#4 Update: 7th June 2021 Initial board concepts

#3 Update: 31st May 2021 First design prototypes

#2 Update: 17th May 2021 Trello board for feedback / voting

#1 Update: 10th May 2021 Framing our problems

🐦 Follow updates on Twitter – get notified in real-time when this blog is updated.

πŸ”ˆΒ Feedback on designs – join our Trello board to vote and feedback on our direction.

This post will show you how we are building a new UI / UX experience from early-stage prototypes to production-ready designs. Here’s the background.

Our team is building Drag. It’s an all-in-one workspace, in Gmail, that helps teams to run their business from their inbox.

Over the years, we have pivoted a few times and incrementally added features. It has meant that Drag feels fragmented in places. This is natural as different ideas converge into one.

However, there is a time to stop and take stock of our product. The time is now. I want to reimagine Drag and now explore a consolidated, smooth, and best-in-class experience.

This post will document the visual UI / UX planning, designing and strategy behind our decisions. It will continue to be updated regularly over the coming weeks as we move towards production-ready designs.

The main goal is to provide visibility to Drag users in advance of launching this new experience. Perhaps this blog, Trello design board and Twitter could be a place to feedback and help shape our plans?

#4 Update (7th June 2021)

πŸ‘€Β Initial board concepts

1. Started work on the core functionality. Drag’s brand (to our users) is synonymous with boards. This week is focused on starting to build an excellent board, list, and detail view.

2. Further improvements to non-core functionality.

πŸš€ Here is a video updateΒ on the early concept of Drag’s new boards.

Drag boards

Here is the first concept of Drag boards. Similar in function, it will start to consider collapsible columns, and merging cards in a simple way. There is quite a bit of work to optimize the number of cards to be visible within the board and generally bring more functionality to boards.

We will also be introducing settings to columns, enabling more flexibility at board level.

Updates on board design πŸ‘‰ please feedback here.

List view

Typically users are using list view to replicate the familiar way that they use Gmail. It’s a challenging balance of maintaining this, whilst introducing additional Drag functionality.

Updates on list view designs πŸ‘‰ please feedback here.

Card detail view

This is where we plan for the magic to happen. We’re planning to provide a popup that gives full-screen access to Drag features. You’ll be able to access this full-screen popup from inside any email or card. It means everything from note-taking to tasks, related cards. Most of our future features will be added to here as a single space for you to operate.

This is very conceptual at this stage. Feedback welcomed πŸ™‚

Updates on new card details πŸ‘‰ please feedback here.

#3 Update (31st May 2021)

πŸŽ‰ Our first design prototypes

1. Worked on a first batch of designs built in Figma (a rapid prototyping tool). They’re early stage concepts to start to plan out how a new and improved Drag may look.

2. Started on the non-core functionality and will move onto boards, cards, and core features in future updates.

πŸš€ Here is a video update on the designs for board settings, automations, templates, tags, moving cards, search and filters.

Board settings

Here’s an early version of board settings. Wanted to consolidate all of the different settings into one consistent place. Users will be able to access all ‘non-core’ activity in one familiar place.

Updates on board settings feature πŸ‘‰ please feedback here.

Automations

You can see that all of Drag’s features are now in this single, full page popup. This gives much more space for browsing and configuring automations in a clean way.

Updates on automations feature πŸ‘‰ please feedback here.

Templates

Email templates are now cleaner and maintain the new design convention of full page popups, all in one place. Also thinking about better inline attachments, tracking and a folder structure for templates.

Updates on templates feature πŸ‘‰ please feedback here.

Reports

At this stage, reports are only superficially improved. There will be further work into fundamentally improving how to extract valuable insights from Drag.

Updates on reports feature πŸ‘‰ please feedback here.

Tags and moving cards

We are still thinking about Tags and Moving Cards. This is early stage; however, we are trying to move all activity into full-page popups. The initial new concepts go against the design convention that we are trying to maintain.

Updates on tags feature πŸ‘‰ please feedback here.

Search

We are currently implementing elastic search, so aside from the technical piece that is happening in the background, here are the proposed new visuals. We are thinking about improving the designs to include where the search term has been found, e.g., email, comment, task, etc.

Updates on search feature πŸ‘‰ please feedback here.

Filters

As our boards (and associated features) evolve, filters become more important. This design is only a simple foundation.

Updates on filters feature πŸ‘‰ please feedback here.

Additional improvements

Here are some more improvements that we’ve started working on.

πŸ‘‰ Sorting boards
πŸ‘‰ Managing users
πŸ‘‰ Billing
πŸ‘‰ New onboarding pages (WIP)

#2 Update (17th May 2021)

πŸ€” Building a feedback loop with customers

1. Created a trusty-Trello board. Please use this as your way to feedback on UI / UX. Critique them, be ruthless and help us build a robust, best-of-class Drag.

Here’s the Trello board

Use this board. Ways of receiving feedback should be kept simple. Trello does just that.

We would really appreciate help from our users to guide the experience, help spot fatal flaws and ensure we rebuild Drag to be best-in-class.

#1 Update (10th May 2021)

πŸ€” Framing our problems

We currently have a number of fragmented designs. This is evident throughout the product with different popup designs/styles to various different configurations. The ultimate goal is to make an excellent user experience that feels top class.

This means not only improving layouts so that they are consistent but, more importantly, challenging the way that various features work and implementing best practices so that they are optimized and β€˜feel correct.’

The added complexity of designing inside Gmail means that we need our own identity and align well with Gmail’s existing designs.

What problems are we thinking about?

πŸ’­ Drag is a more complex product than others. We offer boards with and without a Shared Inbox, making it hard for us to find one universal way to create boards. Is this over-complication?

πŸ’­ Do we currently have the optimal overall layout for all features surrounding the boards? (e.g., location of filters, sort, create new boards, etc.).

πŸ’­ Do we have the correct layout for all settings?

πŸ’­ Is our β€˜set up shared inbox’ board the correct flow?

πŸ’­ How do we design the product to look great?

πŸ’­ Gmail has a unique UI. How do we maintain this level of simplicity but still appear to be our own identity?

πŸ’­ Do we have strong enough board and list views?

This is more of an optimization piece than overhaul.

Where you have complications, simplify everything. I think a lot about how complex our days are. Every part of this concept will be simplified. Shortest cycles to complete tasks, removing all noise from visuals.

What to work on?

Here’s a Drag board containing what we will work on.

Nick Timms

Author Nick Timms

More posts by Nick Timms