BranDesign

Creativity Support Tool Prototype

Languages and Tools

  • Draw.io
  • Sketch
  • Flinto

Teammates

  • Kiki Zhang
  • Zoe Zhang

Duration

January - April 2019

Overview

I was assigned to design a creativity support tool prototype with my two teammates, Kiki Zhang and Zoe Zhang. We decided to design a tool to support the ideation of branding packages because we saw an inefficiency with how designers created them with existing software.

Branding packages are a combination of digital or physical items where a brand is applied to it, typically a logo or company name. They may include business cards, letterhead, flyers, and email templates. Products like t-shirts and hats as well because they may be included in goodie bags companies give away at conventions or similar events.

An inefficiency we noticed with existing software was the separation between the design process of products and branding packages. For example, a product can be designed in Photoshop first and then the packages in Illustrator. When products are imported into Illustrator, it would be tedious to duplicate and reposition the products to design and compare the branding packages

Contributions

I researched the branding domain to discover any problems we can solve through designing a creativity support tool prototype. I helped come up with the tool we proposed to design and then wrote and diagrammed its use cases.

These use cases are to show how users interact with the system in a black box manner. This means that there are no details about how the user interface looks like and what the system does before it responds to the user's actions.

Use case example
Use case example

Diagramming use cases involved activity diagrams and sequence diagrams. I also contributed in the development of the tool's class diagram, user interface, and evaluation of the tool.

Class diagram
Class diagram

Challenge

Designing Branding Products

We noticed that each product type has a common position and size for the brand's logo. If designers use software like Photoshop to design their products, it would take a significant amount of time to manually position and size the logo onto each product.

To expedite that process, we designed a feature that generates products quickly. The designer must first import a logo and then the system will generate a colour palette based on it. They can then choose some product prototypes from the tool's library and choose which logos to apply to them. Each product prototype will have a pre-set space for the logo to be in, so when the system generates the products, the chosen logos will be applied there. If the product prototype has any colour accents, colours from the palette will be applied there. If the designer is not satisfied with the logo's position, size, or colours, they can edit the product prototype within the tool itself.

Generating a t-shirt product prototype with combination logo
Generating a t-shirt product prototype with combination logo

Branding Package Creation

A similar inefficiency with software designers use is evident when creating branding packages. Designers must duplicate products and drag them near each other to represent a package. We believed that there was a quicker way to create them.

Our solution involves the branding products designed in the previous step. An overview of all those products is provided for the designer to scroll through and choose which ones should be a part of a branding package. They can repeat this until they are satisfied. The created branding packages are recorded in the system's storage and shown at the bottom of the user interface.

Creating branding package
Creating branding package

There is another more detailed view in which they can choose products in a different manner. There are openings for product categories where they can choose whichever products they designed previously. This view allows designers to get a closer look at the combination of products for each branding package.

Detailed view for creating branding package
Detailed view for creating branding package

Comparing Branding Packages

Comparison is an important aspect of creativity support tools, but we found that existing software did not support this well in the design of branding packages. Existing software could show the appearance of the products for each branding package and designers can compare them that way. The products would probably not be organized neatly while rapidly prototyping. We believed that more details such as colours, weight and materials, should be also available to aid in the comparison.

To that end, our creativity support tool organizes products by category and lists details below each thumbnail. The products of each branding package are listed in a column, which aligns with products of the same type in the other packages adjacent. The designer can remove branding packages to help finalize the ones they want to order.

Comparing branding packages
Comparing branding packages

Reflection

We received feedback that our tool's features would also be useful in shopping websites. For example, customers can personalize multiple products rapidly, create packages of them, if necessary, and then compare them to see which ones they want to purchase.

Our design was based on our research of what tools are available and how they can be used to create branding packages. So if I could do this again, I would get feedback from professional designers who create branding packages to make our tool more viable to them.

I learned about what creativity support tools are and how beneficial they can be. For example, creativity support tools should help users collaborate and branch their work into many paths and styles. I plan to continue using that knowledge to incorporate into any tools I design in the future.

Other Projects

Citi Bike
Citi Bike thumbnail
Citi Bike

Data Visualization

Bubbly
Bubbly thumbnail
Bubbly

Project Management Web App