Our Creative Process

Every project we do is centered around the UX. What happens when users come to your site? What do they see? What thoughts does it trigger? How does it make them feel? Do they know where they are? Do they know what they should do? (What they can do?) Who’s using the site? What do they need? How tech savvy are they? What do they like? Are they searching for something? Or someone? Do they have a task in mind?

Beautiful design succeeds with useful functionality. Great functionality is defined by a great User Experience.

Iteration 0: Project Requirements and Planning


iteration 0

Goals

We start with your goals, explore them, see where they may lead. What do you need from the site? What does the site need? What kind of results are you after? What are the Key Performance Indicators (‘KPIs’) to watch after launch?

We focus on the specifics of the workflows, content management, and other needs in the revised system. We will be especially interested in what works and must be reserved, if it is modified.This entire process takes place in rapid iterations, with regular communication between teams. Through this, we become experts in you!

Discovery

What do you have now? We start by analyzing the existing site. Pingv architects and web designers examine the system structure, architecturally, technically, and in terms of user experience. Is the code forked or of the commons? In what condition is the database? What modules are used? Which versions? Is there custom code?

Does the theme include business logic? What menus are there? Content types and fields? Are there complicated Views? How is taxonomy utilized? Is there non-standard content stored in the database? How much content of what kind? How many users? What third-party integrations are necessary? Are there existing solutions for Drupal? If not, how complicated is the API?

Once we complete this analysis, we present our findings and use them to inform our design process.

Requirements Prioritization

While every feature is important, we work with you to develop a prioritized list of requirements. This prioritization is essential to help ensure the Project’s successful implementation. The uncertainties inherent in development raise the imperative that the most critical tasks are completed first. This prioritized “backlog” is then queued up in order – taking into account dependencies and prerequisites. When stacked up against the budgeted hours allocated for the Project, these items then fall into place, with realistic assessments of each item leading to an overall picture of the Project development, based on best estimates – all the while recognizing the uncertainties inherent in scheduling work involving a degree of undeveloped design. This makes the end-result of the development process more predictable, and ensures that the final Project incorporates the most important elements according to your own prioritization.

User Experience

What happens when you come to your site? What do you see? What thoughts does it trigger? How does it make you feel? Do you know where you are? Do you know what you should do? (What you can do?)

These questions are at the heart of the user’s experience (‘UX’).

Personas

We work up Personas, archetype users, to explore the types of typical users. Who’s using the site? We interview your staff and review available analytics and demographic studies you may have, and work up profiles of archetypical users of your website.

For each of these people, what do they want? What do they need? How tech savvy are they? What do they like? Are they searching for something? Or someone? Do they have a task in mind? These Personas provide our starting basis for how to understand this project: through the users’ experience.

We will want to talk to all kinds of people on your team – not just site admins, but many different kinds of people who use the site. We will devour any available user feedback and use metrics, with glee.

The key here is not to get lost in a hodgepodge of feature requests, but to develop a deeper understanding of who’s using the website and find commonalities in what they want and need. From this work, we start to flesh out User Stories.

User Stories

User Stories frame the key functionality of the site and provide an experiential-centric framework for the site architecture. An example User Story:

As a member, I want to update my account profile with new information.

We will be generating dozens of these, and mapping them back to the Personas and Prioritized Requirements. In addition, we will define the acceptance criteria for each.

Information Architecture

While the users have needs, so do the data. We will work with you to define the Information Architecture (‘IA’) that accommodates the data structures. Content types, taxonomies, and navigation result directly from the underlying data relationships. We look at how we can consolidate content types, rationalize taxonomy, and structure menus without overly complicating how content gets to where it has to be.

Wireframes

Drawing on the UX work done so far, we start roughing out your site’s page layouts with Wireframes, focusing on arrangement of the website’s content, interface elements, navigational systems, and how they work together.

These Wireframes are low-fidelity representations of the site, and do not include typographic style, color or graphics, so we can better focus on functionality, behavior, and priority of content without prematurely finalizing design decisions, which would bog down the process, increase time, and add to cost.

Developing Wireframes is an iterative process involving our designers and developers, with regular feedback from you. These wireframes address both mobile and desktop interfaces.

Interaction Design

Mood Boards

We facilitate the visual design discussion through the use of Mood Boards, in which we create, with mostly found art and design, broad stroke collections of look and feel, free from structural distractions. Mood Boards are quick to produce, and as such are easy to set aside once we’ve figured out a design path to start pursuing. Using these for reference, we work with you to flesh out the new website’s palette, typography, and visual ethos. It’s also a very efficient way to rule out ways we don’t want to take the design.

Visual Design

In an iterative process, we finalize ideas on color palette, typography, textures, and interface elements for mobile and desktop displays. The visual look and feel of the site comes together here, with representative mock-ups for main pages to guide development.

The design process continues during the development phase, focusing on the user experience and functional components of each sprint.

User Testing

An important component of a successful project is user testing, not just post-development, but early on, while design and architecture are still being worked out, when essential changes and improvements can be made and tested quickly and easily, without heavy investment in recoding.

Iteration 0 Deliverables:

  • Final prioritized backlog for approval
  • Description of user roles/personas, content types, taxonomy, navigation
  • User stories to describe key features and outline user permissions
  • Wireframes of primary pages and views
  • Mood boards
  • Mock-ups/prototypes of primary pages and key layouts
  • Preliminary technical architecture
  • Implementation plan

Our Engineering Process


diagram of agile cycle

Our development process runs in a series of 2-week timeboxed iterations, set by velocity. Each iteration takes on a subset of the prioritized Project backlog, including varying elements of Drupal module installation and configuration, custom software development, import of existing content, and integration with third-party systems.

We want to work with you!