Atlantic Business Technologies, Inc.

Author: Annie Tudora

  • Figma’s Remote Collaboration is the Future of Design Tools

    Figma’s Remote Collaboration is the Future of Design Tools

    Sketch has long held the title of “industry standard” for user interface design. However, the global pandemic has shifted countless companies to work remotely, creating a slew of difficulties with online workflows and processes. 

    Like the Google Doc of design tools, Figma offers an antidote to online collaboration pain points. Additionally, it helps preserve a sense of togetherness and teamwork in a time where remote work is the norm. 

    In this increasingly online environment, Figma found a place in the Atlantic BT family. Here’s why we love it.

    Figma makes online collaboration easy and fun.

    1. Real-Time Interactions

    Unlike Sketch, which is a Desktop app that runs on Apple computers only, Figma is a web-based app that runs on almost any operating system. You could even choose to run it as a desktop app if that’s your preference. 

    Anyone can quickly share a project board, prototype, or mockup with a simple Figma link. We often share a link right on slack in order to collaborate with developers, clients, and other team members. 

    In the past, designers would have to export drafts of a design minutes before a meeting to ensure all the latest changes are incorporated. With Figma, designers can change elements on the fly. Collaborators can drop comments and feedback anywhere on the design and receive responses from the designer in a back-and-forth chat. 

    2. Observation Mode

    Clients and team members are able to watch the designer’s cursor as they work on projects in real-time using Figma’s “Observation Mode”. Seeing everyone’s cursors moving around the project provides a proud sense of teamwork that was often missing in early stages of the pandemic. Observation Mode has several other use cases, including:

    • Design Critiques: Give a live demonstration to stakeholders and team members.
    • User Testing: Observe with users as they flow through prototypes. Users will be able to use their own equipment, and we gain better insight into their experience early on in the design process. 
    • Presentations: When audio or visual issues become a problem in Zoom or Google Meet, Observation Mode can be a good work around to keep clients synced to a presentation. Additionally, observing in Figma can help offset the Zoom fatigue of virtual meetings and presentations. 

    3. Design Systems

    Figma’s online collaboration also boosts productivity and cooperation between design team members by enabling design systems. Together, these design systems are stored in cloud-based libraries. 

    For example, Figma allows designers to create styles for fonts, colors, grids and other presets that anyone can apply to their designs. As components are designed, they are stored in a library that team members can easily search and drag into their own file. 

    When it comes to developer hand-off, Figma maps its components to code that developers can use when building out the application. 

    Screenshot of a UI toolkit in Figma

    4. Whiteboarding With Figjam

    Adding to Figma’s collaborative capabilities, they recently released a collaborative whiteboard tool called Figjam. We have quickly learned that a good whiteboard tool is a must when communicating remotely with clients and other team members. 

    Before the pandemic, client ideation workshops involved filling out sticky notes and writing on whiteboards. These workshops are crucial when it comes to discovering clients needs, wants, and pain points for their application or website. Online whiteboard tools provide a remote and user-friendly alternative to analog workshops and with it a few advantages. 

    With online whiteboard tools, it’s no longer necessary to take up wall space with sticky notes for affinity mapping and data gathering. Furthermore, the information from these sessions are saved to reference and edit later if the need arises. Tools like Figjam and Miro can be used to create personas, user journeys and flows, site maps and other deliverables all in one place. 

    As an extension of Figma, Figjam offers some unique capabilities that other whiteboard applications do not. Figjam allows users to copy and paste both their low-fidelity and high-fidelity designs directly from Figma. This makes it easier to create wireflows, user journeys, take notes and make annotations on the designs. 

    A screenshot from Figma's Figjam

    Since Figjam comes with Figma, your experience design toolset is complete. So pull out some virtual sticky notes in Figjam and rearrange them to your heart’s content! 

    Figma vs. Sketch Cloud

    Following Figma’s lead, Sketch developed Sketch Cloud in order to share designs and prototypes among anyone with a link. While Figma was designed with online collaboration as the goal, Sketch Cloud is limited. Designers must upload their designs into the cloud before sharing them, which inhibits real-time changes and participation. 

    Going forward, programs like Sketch will have to adopt a “remote first” approach, lest they lose their coveted title of “industry standard”. 

    Embrace online collaboration tools as the new normal.

    Even as offices reopen, online collaboration will likely remain an integral part of the design process. It is possible that a hybrid system of in-person and virtual interaction will be the new norm going forward. 

    At Atlantic BT, we are always testing new tools to streamline collaboration and quickly prototype. It’s impossible to ignore the advantages that online collaboration has afforded software and web development processes – with the right tools, that is! 

  • Streamline Web Design, Content, and Development with PDDs.

    Streamline Web Design, Content, and Development with PDDs.

    What are PDDs and what is their purpose in web design?

    PDD stands for Page Description Diagram. It’s used to outline the content and elements on web pages and can improve the overall web design process. The elements are organized into low, medium, and high priority. 

    Showing wireframes too early on can trigger premature discussions around layout and design, no matter how bare-bones the wireframes appear. PDDs offer a solution. They come before wireframes to keep the focus on  taxonomies, functionality, and prioritization. After all, web design should support desired content – not the other way around.

    Outlining PDDs can also make the wireframing process much faster since everything is already outlined for the UX designer. 

    In special cases, it is even possible to skip the wireframes and hand PDDs straight to the designer. The drawback is that skipping the wireframes may inadvertently skip the UX designer’s interpretation of layout, flow, and interactions with the user in mind. 

    What does a PDD look like?

    PDD’s can be created in several different ways, from a simple Google Doc list to a Sketch or Figma file with basic graphic elements. Atlantic BT prefers to use Trello, a kanban style list application, because it is easy to move elements around and collaborate with our clients.

    No matter the tool, each list will represent a single page or type of page. Individual cards or bullet points within the list represent a component on the page. 

    Trello allows for tagging cards, which we use to identify the type of content of each card (call to action, metadata, search field, etc). Furthermore, the tagging can be used to indicate priority.

    PDDs facilitate web design collaboration.

    Collaborating with clients.

    The ability to easily collaborate with clients is one of the benefits that make PDDs so attractive. Involving stakeholders in the web design process creates a shared sense of ownership and helps develop the list of components in more detail. 

    With Trello, clients can add comments and examples in real time to elicit discussions. Clients are empowered to include feedback from key players in their organization without having to schedule separate Zoom meetings. 

    Collaborating with web developers.

    Making PDD’s available to developers early on is crucial, especially on website redesigns. Developers want to get a head start on migrating the content from the old website. 

    If it’s difficult for developers to translate a PDD to backend fields, it is important to agree on terminology to identify key elements. 

    For example, we collaborated with our development team to create a spreadsheet that contained what they needed for migration, most of which were copied straight from the PDDs. 

    Avoid common PDD pitfalls.

    Don’t be vague with prioritization.

    It may be helpful to develop definitions of high, medium and low prioritizations to stay focused on essential features. An example of these definitions are:

    1. High – These elements are essential to the user’s understanding and functionality of the page. 
    2. Medium – These elements are useful to most user’s understanding and functionality of the page. 
    3. Low –  These elements are nice to have but they do not contribute to the user’s understanding or functionality of the page.

    During a website redesign, make sure that there is discussion around which elements stakeholders want to keep and remove from the original website. This will make handing off to development a lot easier.

    Don’t focus on visual web design.

    It may be tempting to add graphics to the PDDs to show stakeholders what pages might look like from a low-fidelity perspective. However, adding these visuals runs the risk of people getting stuck on the look and feel of the graphics, overshadowing the content. 

    Don’t let the nitty gritty details prevent progress.

    Don’t spend too much time laboring over the details of the PDDs and going back and forth with stakeholders. Once there is enough information to start wireframes, move on. Lest you get stuck in an endless cycle of minutia. 

    Should you always include PDDs in a web design?

    PDDs are a great way to prioritize and collaborate on the essential elements of main pages without getting bogged down by design details. 

    PDDs may also save time by skipping wireframes, avoiding some of the wireframe pitfalls. Inevitably, you’ll also lose the benefits that go with wireframes, so this is typically not recommended. 

    The great thing about PDDs is that you can spend as little time as possible or go into a lot of detail. They can fit comfortably into any system!

    Need help streamlining the web design process?

    Atlantic BT is well-versed in the strategy, UX, and technical aspects of a web design and development. If you need help planning your next web project, reach out for a free consultation.