Digital Product Design Workflow

In this section, we outline the complete workflow from start to end, including the technical description for each step involved in producing a Digital Design interface. This section regarding workflow reflects the overall management of the Digital Design process primarily by the project manager or team lead. Please keep in mind that it’s truly imperative to revisit the previous step, previous iterations and gather feedback from the QA team and/or direct feedback from users when new requirements enter the equation.

Each step in the process builds on the prior steps. If you change one, it may well likely have a snowball effect and impact all steps in the flow. So be careful and do your due diligence. This is common and expected in the workflow process and does not suggest your latest updates were poor by any means—different strokes for different folks.

General Workflow

Interview

The first step in the workflow is always the discovery phase, where you identify any requirements needed for the project, including timelines and deadlines, goals and intents, a review of existing materials so that the wheel doesn’t have to be reinvented, static images or pages that won’t be changing. During this stage, you will start setting preliminary goals and generating a list of discovery items you will want to consider, investigate or review. While your client is providing their requirements, such as a deadline and their overriding vision, the development team, including Digital Designers, should start generating a list of discovery questions and confirming the tools and technology used. Designers must keep the discovery topics relevant and realistic to start visualizing how the project will flow graphically.

For example, the following highlights some of the relevant questions that might be asked during the discovery interview regarding branding:

• What is the logo’s purpose, how will it be used, and to what do you attribute its value or meaning?
• What product or service does your business provide, and what are you solving for your customers? (ie. B2B product/service might provide efficiencies to clients, whereas a toy or game for kids on the B2C side might solve a period of fun.
• What do you bring to the table that distinguishes your product from others? What is your unique value proposition, and why?
• Describe your ideal client/customer. What is the primary message you want your product to convey to them? (i.e., saves time, resources, brings the efficiency of some sort?)
• If you have an existing brand/identity, what isn’t working now, and what do you think is missing?
• Please share three links of brands/logos that inspire you and that you would like to emulate in context. What attracts you to these brands? What do you like best about them? Using five adjectives or short phrases, please describe your brand’s demeanor. What do you foresee as the look and feel of your new brand?
• Do you have a favorite logo from a different brand that speaks to you that you would like us to review for inspiration?
• What type of logo do you prefer, textual or typography, a sole symbol or emblem representation, or both?
• Generally speaking, what is the company’s background/history? Where are the company’s roots, and do the early days still resonate through the company that we should consider including some reference in the brand identity?
• Who is your target customer? Have you done a deep assessment of your target persona and, if so, what do you know about them that makes them special or easy to identify?
•  What are the other use cases for the logos that may have a different timeline than this project? If so, what is the deadline for the logo?
• Who do you consider your direct competitors and/or peer universe? Are there other companies unrelated to a product that you’d like us to review for consideration?
• Are there any restrictions (e.g., PG-16, words, colors, images, or NSFW)?
• What formats do you require for delivery? Print, digital, or both?

Initial Feedback

Following the initial review of the discovery items provided, the design team will revert with additional questions and/or request confirmation of specific details to ensure the full scope of the interface has been considered from their unique perspective. During this stage, the design team will seek to clarify anything that remains unclear and inquire whether certain elements will or won’t enable the visual segment to complete as expected. It is always wise to have the client confirm things you may be unsure of early on to prevent future challenges or misunderstandings in any client service business.

Preliminary Itemized Estimate

Upon completion of the initial discovery, a preliminary estimate will be generated with itemized line items to reflect each interface build process element. As you might assume by now, it would have proved futile to provide a client an estimate in advance of this stage and with too many moving parts still in play. 

Research and Development

The first stage of conceptual understanding in any new creative process is to become educated; on the client, their customers, their industry, demographics, geographics, competitive insight, design trends in their industry and collect any analytical data that will be relevant towards creating the complete visual picture of the interface you are preparing to design. While the designer’s R&D is typically different from an engineer’s R&D process, the summary report generated from this effort usually includes valuable information that can and should be reviewed by all team members, whether they are part of the creative effort or not. This summary report may also be provided to the client should they have an interest.

Prototyping

The process of creating a prototype, a sample solution of the actual product, is called prototyping. Following the initial education process, a prototype of the interface will be developed. Concurrently, the team generates the itemized technical estimate and usability description (sometimes called a user story in agile development) for the design of the interface. During this phase, the timeline is flushed out, technical and creative requirements are detailed, and the project’s final scope is described in intricate detail. 

Design Referencing

Seemingly unusual, although not at all illogical, the best means for identifying a client’s likes and dislikes is to show them alternatives designs and interfaces. It is often difficult for non-creative people to provide examples of what they mean in creative terms. It is far easier to show and tell the same way we did as kids. In our process, we submit references to the client from external resources, whether websites or apps, and/or provide custom mock-ups for their review. Sometimes the client does the same and provides us with examples of their preferences to help guide us. This exercise helps determine the client’s taste concerning typography, color patterns, and overall style and design concepts to consider as we create their interface. During this stage, the references provided help the team update the prototype based on more precise client feedback.

Prototype Testing

The prototype is updated based on the previous stage’s findings, and the assigned Quality Assurance (QA) individual establishes the methods for testing. The QA team member then submits their results to the team with recommendations for improvement/corrections. In some cases, where the design interface is less complicated, this step may be skipped.

Prototype Performance Analysis

As with any business system where costs need to be assessed against revenue for actual financial reporting, you must take time to measure and analyze your metrics and KPIs against your original estimates. Is your creative development in keeping with billable fees, and/or have you over-invested time or resources on a project? At this point, we will review the confirmed prototype and finalize the technical description, including any additional requirements. 

Concept Production

With feedback from the client, confirmed against the technical requirements, designer references, and prototype features, the concept is finalized for production. 

Review and Confirmation

This is an all-hands-on-deck stage where all members of the design team make any final tweaks or revisions, and each segment signs off on their respective piece of the project.

Internal Page Construction

At this point, we produce the internal pages of the interface based on the approved concept. This is the construction of the actual mock-up according to the approved style.

Quality Assurance

During this stage, a thorough QA process is deployed for a final review of the mock-up. During the final QA review, we require a senior designer to be present if the QA team notices any design-related issues that need to be addressed immediately. It is often difficult for a QA person to look at an interface from a design perspective and a designer to see through an engineer’s lens, so we prefer to make sure a senior member of our team covers all our bases.

For example, the following highlights some of the relevant questions that might be asked during the QA of the logo:

The logo should be visible on:

• Mobile App
• Website
• Printed Materials - business cards, stationery, brochures, presentations, A0 posters
• Banners - both trade show banners and online advertising banners
• Social Media Platforms
• Black and White
• Near and Far Distances/Visibility 
• Pens
• Badges
• T-shirts
• Press Wall
• Flag
• Outdoor/Billboard/Public Transportation advertising

The logo must always meet the following quality attributes:

• Readable
• Scalable
• Reproductive
• Simple

 Your logo will be considered “good” if it meets with the following attributes:

• It’s accepted and acknowledged by at least three representatives of the target audience of the company,
• The name is easy to read for those unfamiliar with the brand,
• It is pronounced and lucid in black and white,
• Adaptable and adjustable into different pixel resolution sizes, 
• Without small and complex graphical elements,
• Harmonious- No one element should overshadow any other - all should be treated equally,
• Comprised of no more than two colors, fonts, or special effects,
• Brand = easy to read, easy to spell, easy to remember preferably with, .com domain extension available (if possible),
• Available in vector format (.svg).

Submitting Design for Development

Finally, the design concept is submitted based on the original agreement, in the required format, and with the final specs to the programmatic team for coding and internal page build. At this stage, the formal design process ends as the baton is passed on for code build. However, the design team remains on standby if the developers need assistance or edits that need to be made to suit better the code language they are building in. Your team might include a project manager who would remain the conduit between the design staff and the developers to ensure continuity.

Once the final interface mock-up is signed off and pushed to production, we give it a period of estimation to carefully watch the performance and results and tweak and/or make edits as needed. Our creations live in a constant state of development, feedback, upgrades, and change. The digital world is in a constant state of evolution, and today will certainly not be tomorrow. Expect the unexpected.

There are some project instances where time is essential, and the client requires an accelerated timeline. Naturally, it is important to note that rush fees are acceptable in these cases as resources will need to be removed from other projects and assigned to the rush order, which is a cost to the business. Clients are typically aware of this and don’t usually have a hard time meeting the agency’s demands in a timely fashion. In these situations, we defer to a condensed version of the workflow just discussed.

Abbreviated Workflow Suggestion

1. Interview

While a critical part of the workflow process, in the case of a minimized timeline, we do not skip this step but rather perform a curtailed version where much of the critical thinking is done individually, and then our management and marketing department meet with the client decision-maker and perform an abridged version of this process.

2. Preliminary Estimate

Based on the outcome of the interview session, we provide an itemized estimate knowing that elements are subject to change.

3. Prototyping

After confirming the preliminary estimate, we jump directly into the prototyping phase as we don’t have the luxury of research and development as we do in the standard workflow process. While this hastened process is not always the preferred methodology, sometimes using gut instincts works well for achieving a desirable result. As in the standard model, we concurrently generate the technical itemized timeline and usability description for the programmatic design of the interface during this phase.

4. Design Referencing

Similar to the previous steps, this step is of chief importance to the design process. It gives us a look into the likes and dislikes, tastes, preferences, and decision-maker’s suitability. This will help a designer create a model more in-line with the predilection of the client. Again, we provide the client with examples, samples, and references of external sources, other websites or apps, and/or a custom-made mock-up. This effort is designed to identify the client’s opinion concerning typography, color pattern, style, and approach to the overall design concept.

5. Prototype Performance Analysis

At this point, we will review the confirmed prototype and finalize the technical description, including any additional requirements.

6. Concept Production

With feedback from the client, confirmed against the technical requirements, designer references, and prototype features, the concept is finalized for production.

7. Review and Confirmation

A final review is performed from a variety of perspectives and checked for any remaining tweaks. 

8. Mock-up Design

The developers turn the design concept into the mock-up of the interface.

9. Quality Assurance

Senior members of the team review and test, inspect, and scrutinize to ensure the interface is perfect before delivery to the client.

10. Mock-ups Submitted to Development

After client approval, the final specs are prepared and passed on to the programming team for implementation based on the previously agreed-upon requirements.