Abstract in the FanDuel UX & Design team
Abstract’s versioning, file management and workflow tools have enabled the distributed UX & Design team at FanDuel to collaborate, share, and present work, with one single source of truth. It’s become a core part of the product development workflow for us.
The dark ages
Prior to adopting Abstract the team were stuck with the age old problems that plague every product design team:
- File storage and organisation
Finding the right file, spread across countless folders, with no consistent naming was a painful task. Made worse by files being split between Dropbox and individual designer’s laptops. - Versioning
Every designer handled versioning differently, coming across files with names of project_v14_final_copy_final_really_2.sketch was a daily occurance. - Documentation of design decisions
Without a single tool integrated into the day-to-day workflow, the friction of documenting why a decision had been made was easily lost or skipped over. Notes appeared in Confluence, Google Docs, text files on laptops, and paper notebooks. - Presentation
Presenting design work and thinking was largely done through screen sharing Sketch files, and exporting specific artboards to share with the rest of the team over Slack or Wake, or documented for stakeholders in Confluence. - Sharing specs/handoff with engineers
Our product designers work closely with engineers throughout the process. Historically we used Zeplin as the main tool for sharing specs, but its standalone nature meant that any edits had to be manually synced back, so it was never a source of truth. - Visibility of work in progress
While the team shared to Wake throughout their process it was always a manual task, took extra time and required additional time adding context to what should be a quick task. It also added yet another place to gather feedback from.
Abstract to the rescue
The move to Abstract took a bit of time, and is a continual work in progress. However, having every designer storing files within one location, using commits to version work, and having a single place to look at what the team’s working on showed the immediate value of Abstract.
Our initial setup was to have an Abstract project per stream, and each designer creating a branch and a new file for every project they picked up. This solved the most pressing pain points, but there was more that Abstract could offer us.
Doubling down on Abstract
The next evolution was to create a project for each product that the FanDuel UX & Design team works on. The Fantasy Sports product, and the FanDuel Sportsbook were given their own projects and the team specific projects archived.
Each product is broken down into Sketch files containing specific user journeys across Android, iOS and Web. Designers work on existing artboards within those existing Sketch files.
The Fantasy Sports product’s project is made up of 12 Sketch files including:
- lineup-entry-management.sketch contains user journeys for picking players, building a full team, the editing interface, and more complex team management functionality.
- account-management.sketch covers managing your account, password change, account verification experiences, notification preferences, etc.
The Sketch files in the master branch contain fully built artboards for every user experience. This allows designers to focus on solving user problems rather than spending time rebuilding the same user interface in Sketch, being that designer and stitching together a load of screenshots before adding in their work on the top.
The day to day process in Abstract
Branches for everything
All new projects within an existing product start with a branch, and then sub-branches for individual pieces of the larger project if needed. For example when looking at how users find contests, the parent branch was called “Contest discovery” with sub-branches including “Contest cells” and “Sport specific cell styling.”
Commits instead of version14_final_really
The team is encouraged to commit regularly as they work through ideas and progress designs forward. By committing regularly it also allows designers to step back in time through past designs, potentially reinstating elements which were previously discounted, or to understand what exploration work was done by other designers in the same area of the product.
Documenting decisions through commit messages
As well as committing changes as they work, they make use of the commit summary as an overview of what’s changed in the commit. The description field is used to expand on the thinking behind the change. For example a change driven by user feedback is noted, and linked to Lookback’s record of the user test. A change based on a decision made in a meeting is noted with some info about the meeting, people involved in the decision, etc.
Using Collections to share and present work
The team makes heavy use of Collections within Abstract. Sharing work in progress early, showing flows, and gathering feedback from across the UX & Design team, product, engineering, and the wider FanDuel organisation.
Our workflow often starts with sketches on paper or at a whiteboard, by taking photos of those sketches and placing them on artboards in Sketch it’s possible to build out the initial flow in a Collection at the start of a project and use the same Collection all the way through to delivery.
As designs progress from sketches to wireframes and high fidelity designs the same artboards are built upon and updated live within the Collection. It’s also possible to view how ideas and concepts have evolved based on user research and feedback, and the decisions made throughout the process.
One link that is passed around various teams and stakeholders will hold the latest version of the work throughout the whole project, giving everyone confidence that they’re looking at the latest.
Handling handoff through Inspect
Thanks to Abstract’s Inspect tool we now have an automatic handoff link for every artboard, and through Collections it’s easy for engineers to get straight to the latest version and view dimensions and specs through Inspect. It’s the same link that is used by everyone viewing the the work at any time, so again everyone can be confident that they’re viewing the latest.
Sketch files, the master branch, and reviews
With a large team, spread across a number of products and projects it’s important to be able to pick up any file and work on it. We make use of Abstract’s reviews process to check over files before merging them to the master branch and ensure they follow our defined standards:
- Artboards are named in the same format:
State-Feature-Location-Platform - Artboards start at 0,0 and spaced 100px apart. They’re arranged that flows between artboards is clear.
- Layers and groups are named based on what the element/group is.
- Components from the design system’s Sketch library are used through out.
Linked libraries and the FanDuel design system
Alongside FanDuel’s user facing products, our design system has its own Abstract project. The Sketch libraries within the design system project are linked to each product’s project. Linked libraries allow the team to build interfaces using the system components, and pull in updates to components as the system team rolls out library updates.
What’s next
We’re continuing to evolve our overall process and Abstract’s place within it. The upcoming Abstract API offers some interesting possibilities, one of the first things on our list is to look at creating a high level overview showing what’s in progress in each product.
If you want to discuss Abstract and how we use it at FanDuel get in touch with us on Twitter @fandueldesignux.
We’re hiring! If you’re a product designer, UX writer, or UX researcher in Edinburgh, Glasgow, or New York, there’s info on our website or talk to us on Twitter.
