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
#7 Update: 18th August 2021 Final board concepts
#6 Update: 21st July 2021 Final card detail views
#5 Update: 28th June 2021 Final actions / settings popups
#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?
#7 Update (18th August 2021)
? Final board concepts
1. Being guided by our feedback loop, the final concepts for board and list views are now complete. We have spent a lot of time continuing to understand how we can overall improve the experience without impacting our existing customer base. Here are the results.
2. All supporting designs such as assigning, color-coding, etc are complete also.
Figma files are now at a stage that they are going into production with front-end engineers which is a really exciting step.
? Here is a video update on the final concept of Drag’s new boards.
Here are the final concepts for the new Drag boards. They maintain the existing design conventions (and feel) of our current live product, however, provide more flexibility and consider our upcoming features also.
Updates on board design ? please feedback here.
Expanding a Drag card
Expanding cards allow you to perform simple actions like marking a task as complete from board view.
Adding a new Drag card
Both adding and editing a card are simpler. Editing is now inline so faster for our users.
Dragging a card
Our dragging experience has always been cumbersome. Now, users will clearly understand where cards are being dragged from, and to, with indicators. This is more important that ever given the upcoming merge cards functionality where a user will now drop between cards or on top of.
Linking a card
Cards can be linked. This refers to our merge cards feature. Users have a clear way to drop cards in order to group them together.
Merged cards are grouped together in a clear way. They are expandable, collapsible and can be associated and disassociated by dragging onto or away from a merged card.
Page space is now optimized by being able to expand and collapse entire columns.
#6 Update (21st July 2021)
? Final card detail views
1. Card details are where it all happens. These new designs overhaul the current experience and consider upcoming features in the new designs.
Here are the final concepts for Drag’s card/detail views. This view maintains a similar style to our current live version, however, has improvements within each of the tabs to include things like merged cards and file upload.
Updates on card views ? please feedback here.
Card notes are the same as live version. They are simply an empty space for note-taking. Future developments (post-live) will evolve this into something even stronger.
Card tasks can now be edited inline. Previously, editing a card meant you needed to scroll to the top to amend.
Card activities are now searchable and allow you to find specific activities with a click.
The technical development of files is being worked on in conjunction with this new front end. Attaching files is really important for our customers and an exciting feature to get live.
Merged cards can be viewed from inside the card detail page. From here you can view all, and associate / disassociate.
#5 Update (28th June 2021)
? Final actions / settings popups
1. Final actions have evolved since the initial draft. These new designs are now more aligned with the overall product.
#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.
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.
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.
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.
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.
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.
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.
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.
#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.