• User Journey Map – Brief
    • Detailed Interaction Map
    User journey maps and more detailed interaction maps track our users’ tasks, goals, and emotion throughout various workflows – helping to establish user-empathy, and identify specific opportunities to optimize workflow.
  1. Product Requirements and Feature Definition

    With a clearer understanding of our users, we create user stories describing the user, the problem, and the goal. These stories are then prioritized based on business need, user need, and interdependency, to form our backlog of work to complete, and help define the product roadmap.

    Establishing a set format for how we talk about features and user needs, establishes a common language for the team to communicate feature definition, and helps distribute the design thinking cross-functionally, ensuring that the “why” is communicated and considered at each step of the process.

    Sample Task List
    • Real-Time Collaborative Deck Editing

      As an Editor, I would like the ability to collaborate on decks in real-time, so that I can quickly share ideas with team members, and have a tighter iteration cycle

    • Project Empty States

      As a Sky User, I would like descriptive empty states, so that I might better understand product intent on first-use.

    • Invite Team Members

      As a Customer Admin, I would like the ability to invite team members, so that I can build my team in Sky

    • In-App @mention Notifications

      As a Sky User, I would like a subtle notification when I have been mentioned in a comment, so that I am aware of when I may need to respond to a colleague

    • Image Selection Dialog

      As a Sky User, I would like a standardized image selection dialog, so that I can select images from my local filesystem, Dropbox, or Unsplash

  2. Opportunities to Innovate

    Through this process – as well as thorough research of existing industry solutions’ conventions, card-sort exercises, and design sessions – we identify new high-impact opportunities to innovate.

    • Real-Time Collaborative Deck Creation

      Real-time in-browser remote collaboration helps to unify the team, and pushes Sky beyond deck creation to become a central hub for teams to rally around developing campaign strategy.

    • Project Boards

      Intentionally ambiguos in intent, Sky’s boards provide a channel for teams to gather inspiration, assets, and brand collateral, to be easily accessed throughout campaign strategy development.

    • Rich Interactive Decks

      The original value prop of Sky – creating rich strategy briefs and idea boards, to unify teams around a central strategy throughout the lifecycle of their campaigns.

  3. Design Challenges and Principles

    • Process as a Product

      Selling process and behavior change can be a lofty goal. Conventional industry tools focus on more rigid time-based methods of tracking progress. Sky’s collaborative nature encourages more open free flowing workflow.

    • Trust and Accountability

      A key component to the Sky product was establishing and maintaining trust between the team members using it. With Sky, we wanted users to want accountability, not fear it.

    • Time Well Spent

      With the ease and number of channels technology is available to us today, we wanted to be mindful of users’ work/life balance. Extra consideration was given to ensure our approach to notifications reflected this.

  4. Wireframes and Flows

    We create low fidelity wireframes – in collaborative sketches, whiteboarding sessions, or as Sketch files – to communicate structure and demonstrate the steps and navigation required to complete specific tasks. These flows, as well as additional artifacts, such as clickable prototypes, give us the opportunity to validate our assumptions and hypotheses with our test users and industry contacts.

    1. Sky Login Screen Wireframe
    2. Sky Projects View Wireframe
    3. Sky Notificaions UI Wireframe
    4. Sky Deck Comment Wireframe
    5. Sky Deck Comment Reply Behavior
  5. HiFi Mocks & Implementation

    Working with a small team afforded us the opportunity to complete much of the high fidelity UI work in-browser. Implementation often began at the wireframe-level, which provided the additional benefits of a quicker iteration cycle, earlier testing, and getting feedback from current beta testers at lower-cost lofi functional prototypes.

    • Sky Inline Deck Editor Mockup
      Inline Deck Editor
    • Sky Activity Feed Mockup
      Activity Feed
    • Sky Project Boards Mockup
      Boards View
    • Sky Board View Mockup
      Individual Board
    • Sky Board Detail View Mockup
      Board Item Detail Modal