.png?ixlib=gatsbyFP&auto=compress%2Cformat&fit=max&q=50&rect=43%2C0%2C990%2C990&w=80&h=80)
.png?ixlib=gatsbyFP&auto=compress%2Cformat&fit=max&q=50&rect=0%2C43%2C2600%2C1526&w=2304&h=1352)
Shortcut for Designers and Creative Teams
How the Shortcut design team uses Shortcut to design Shortcut
We talk a lot about how product and engineering teams use Shortcut but we know it takes a village to bring a product to the finish line. In this new series we'll take a peek into how other teams at a software company can use Shortcut.
This post puts the spotlight on designers and creative teams! At software companies, designers work cross-functionally, whether they focus on product or visual design. Designers are critical in making sure the products experience is intuitive and the brand visually appealing. I sat down with our design team to hear how they like to use Shortcut to design Shortcut :) Here's a quick intro to our wonderful design team:
- Andrew Childs: Co-Founder & Chief Design Officer
- Connie Chau: Product Design Lead
- Kieron Keenan: Senior Product Designer
- Al Power: Senior Visual Designer & Illustrator
General Design Workflow in Shortcut
The design team works across two Story Workflows:
- Engineering: Enables the design team to collaborate with Engineers and the Product Team on product updates and new features
Project: Design
Workflow States: Spec Needed, Ready for Dev, In Development, Read for Review, Ready for Deploy, Completed - Marketing: Allows the design team to collaborate with the Marketing team on initiates like Events, Website, Programs and more.
Project: Visual Design
Workflow States: Ideas, Spec Needed, Ready to Start, In Progress, Ready for Review, Complete
- Labels: When designers get assigned or create a Story they will usually add a Label to their Stories. This allows them to create Spaces in the Story View that are view-able by initiative or type of request. Some the examples of Labels the team is using are: mobile, blocked:design (great for prioritization!)
- Milestones & Epics: Making sure that important Stories and Epics have Milestones assigned makes filtering work in Spaces easier.
- Spaces for Design Stand-ups: Each designer builds their own customized Space that they pull up to review during weekly Design Stand-ups. The aforementioned Label "blocked:design" is a very helpful Label to use when reviewing work during stand-up and to ask for extra help.
- Notifications: Each of the designers on our team likes to interact with notifications differently. Connie likes to check her Email and has set up her Notification as such. Where as Al checks the Activity Feed. The notification system is flexible enough to customize it to the way you want to be notified work.
Working with Product and Engineering
Async Communication in Stories
Whether they're working with the product team on design iterations or helping to fix a Bug with engineers having design iterations, details, and comments in relevant Stories makes it great for async communication. It also makes it really easy for other members on the team to jump in and help out.
Prioritization with Iterations
Having Iterations has made async communication with Product much easier and smoother. Kieron says the ability to know exactly what the squad needs to work on helps him pick up work that needs to be done right away. Or if he's sped through all the design work in the current iteration he can look forward an Iteration or two to get ahead.
Visual Design Requests
One of the challenges as a designer is getting the proper context in order to deliver a design that hits all the notes the requester is asking for. I'm sure designers often feel like they have to be mind readers! Al's proactive solution was to create a couple of different Story Templates to help prompt requester provide better context when requesting creative assets or illustrations or projects. Here's an example of the Design Brief Template:
Using Shortcut to create a Design System
Andrew and the design team are kicking off a neat project- creating a Shortcut Design System, in Shortcut! The System will be a a living, funded product with a roadmap & backlog, serving all product ecosystems which will cover Style guides, Visual Language, Pattern Libraries, Voice & Tone, Branding Guidelines, Accessibility, Animation & Interaction across all platforms; web, mobile, iOS, Android.
The team is implementing a Design System to scale the team, address Tech/design debt, Increase ownership and knowledge sharing, reduce implementation decisions, reduce time and waste, and more. We'll share more from the design team as the Design System initiative moves forward!
In this first phase the team is tackling:
- UI/UX Audit of the Web App, mobile apps
- Sitemap Audit
- Brand Audit
- Choosing and rolling out one collaborative design tool company-wide (Figma)
Tips from our Designers
- Try Crazy8's to get input from your entire team. We did it during our team offsite and we sourced lots of great ideas from Housemates!
- Upload custom Loading Icons in Shortcut to infuse some fun and personality into your team's day to day.
- Take advantage of the expanded Story view! It makes it a lot easier to add images into the Description and share that
- Follow important Stories to get Notified of PRs when collaborating with engineers. This way when code is ready for review or deployed you get a notification
- The team often get's ask what other tools they use with Shortcut are Figma for designing and prototyping, Adobe Suite for design, Slack for team communication, and FullStory to better understand customer behavior
Want to see what the Shortcut design team is up to? Check them out on Dribbble!
Have a question for the Shortcut design team? Leave a comment below or join the Slack Community to get in touch directly!
Build what’s next
