Design Constraints

SIUE URCA Educational Application

This program was the result of a student-funded project I was awarded by SIUE. For the project, I was to develop a teaching tool based on a dice game created by Barb Nwacha. I handled all aspects of the project from start to finish. The purpose of the application is to teach typography by limiting the choices and forcing students to work within their limitations to produce an assignment. This works in conjunction with the principles of Massimo Vignelli & Johannes Itten. I coupled this project with my study of the human-computer interface and created a drag-and-drop interface. It was released as a WebGL application in Unity that met our goals. The following is the process of developing this project.

Initial Concept

The initial concept was a teaching tool built around the idea of limiting the choices of students to force them to be more creative in their design approaches. During this time we discussed and studied much about the concept of how limiting choices can help designers and users alike come to their results more effectively. While the initial working title of the project was “The Dice Are Nice” we ultimately agreed on “Design Constraints” as the final title. 

Having a physical model of the game allowed us to experiment with the game before going onto a digital prototype. 

Goal Assessment 

After the initial interview, I was able to establish a focused goal for the project. I then also developed follow-up questions to help create a feature list. 

The next challenge became deciding on the platform to launch this product. We only had a couple of months to develop it and I was already learning and utilizing Unity for another project that I was developing alongside this. Using time to learn new technology would have taken valuable time from the UX design process so we agreed to publish the project as a WebGL application built on Unity.

With the collected information and assessment I began the documentation for the project. The goal of the documentation was to solidify our goal as well as our feature list. Due to the short development cycle, and to minimize the risk of failure, I wanted to constrain the major elements of this project to prevent feature creep. 

We would still be able to test and evolve the process to achieve the project’s goal but we would not be adding features unless we could argue they would help accomplish the goals of the project in a better way. 

Design Document

Description: Dice are Nice (working title) is an educational application that uses randomly selected parameters for students to apply to a design project. This program is built on the UNITY developer engine as a WebGL application. The program’s goal is to help students understand aspects of contrast in how they function in a graphic design composition under the guidance of a professor. The program provides a set of parameters that forces a young designer to use contrasts, size, typeface style, and serif vs sans serif in a composition.

Function:

The application will randomly generate a list of parameters for the designer.

• Two sets of 7 dice and 1 fortune cookie
• Typeset, graphic design set
• Cups work like Yahtzee

Dice components:

Uses the Johann Itten color wheel. Each color has a range of colors based on the wheel.
• (1) Color dice: Currently has 3 color schemes. The outcome is 1/3
• (2) Typestyle dice: Both dice each have a single style. Outcomes are 1/6
• Dice 1 (light, black extra bold, condensed/extended) Outcome is 1/3
• Dice 2 ( Italic, bold, regular) Outcome 1/3
• (4) Size dice: 2 small size groups (12, 20, 16) (24, 36, 48) 2 large size groups (75, 100, 150) (175, 200, 225)

The graphic design set is similar but has tint instead of a color scheme

• Has the same style and form die
• Has type face die. ( Helvetica, Futura ) ½ (Badoni, times new roman, century) 1/3
• Cups work like Yahtzee

Each shake of dice result is for a section of the class. Not individual. (Can be used by individuals as well)

“Type faces are derived by Massimo Vinnela; that you only need 5 type faces your whole career.”

Persona

Harold is a graphic design professor at a small university who has been teaching for a few years. He enjoys the history of graphic design, strong coffee, and all things Apple. His favorite typeface is Frutiger. He learns about an online application that can serve as a teacher’s aide from SIUE. He wants to expand how he teaches typography, so he gives it a shot.

Harold – Graphic Design Professor 

He goes to the URL in his web browser and is greeted by a page from SIUE. It gives him the ability to log in or register. There is also a small section that explains the app and that registration is free.

He clicks on the register link and fills out his profile. It asks for his email, basic info, and to create a password. The next time he returns he will be able to log in using his email and the password he created.

After creating the account he is taken to the application splash screen. The splash screen says “Made with Unity” and has the SIUE logo.

After the splash screen, Harold is greeted with the main menu. The menu allows Harold to select the parameters he wants to randomly generate. Harold wants to see what this program is about so he decided to generate all the options.

Harold’s Results

Harold gets the following for weight: (12, 20, 16) & (75, 100, 150). He could have also gotten (24, 36, 48) or (175, 200, 225). Weight returns two groups, one small group, and one large group. Both size groups have a 50/50 chance of being selected.

Harold gets the following results for color: purple. He could have also gotten orange or green. 

Harold gets the following results for style: light & bold. He could have gotten black extra bold or condensed/extended and italic or regular as his two options. Each set has a 1/3 chance of being selected.

Harold gets the following results for font: Helvetica and Badoni. He could have also gotten Futura and Times New Roman or Century. The top face has a 50/50 chance and the bottom is 1/3. Typefaces are derived from Massimo Vinnela’s concept that you only need five typefaces in your design career. 

Harold gets the following results for the phrase: “I knew him well”. The generator will have a small library of royalty-free quotes that it will render for this option giving enough words and verbiage for use in an interesting composition in student designs.

Harold is then able to take his results and made a demo assignment. He later returns to the application during his next class to have his students generate their own results and do a design assignment he has based on this concept.

Exploring use through a persona lets us get into the heads of a user and consider how they may experience the app and how that process might be thought-out to help them reach their goals. 

“The colors are based on the Johann Itten color wheel and give him a range of colors he can use as a color scheme related to the color he was given. Under purple the program shows swatches of the colors to use for his color scheme.”

Visual Styling

With the concept of interaction tested and coded, we wanted to make the application visually interesting. The game’s creator was interested in finding influence from the early Apple designer, Susan Kare. In addition, I sought out the influence of old machines. 

The Machine

In Adobe Illustrator I designed a machine in parts that could be animated. The goal was a call to action that relied on the visual affordances of this machine. The gears turn, the dial moves back and forth, and the machine chugs up and down as if it is producing something. I wanted this machine to also have some character. The dial and gear rest where the eyes might be, and the keyboard is in the place of a mouth. 

My approach is to allow for user discoverability. I wanted to invoke wonder and curiosity in this experience. To help guide the user I added a flashing text that says “insert parameter “and this empty port that would indicate something is to be placed in this area. 

The machine was then implemented into Unity and tested to perfect the animation as well as the interaction itself. 

Repeat

With an app that is largely done we comb over it to resolve anything that we thought could help the user accomplish their goals easier. We worked on the look of the app as well as the interactions needed to help them meet their goals. But what about after those goals? If someone was teaching with this tool they may want the flexibility to produce more results. They could do the process over and over again, or we can add a regenerate button. This button takes the parameters they had selected and then processes them again to generate a new set of random results, so they gain the option to start over and select new parameters or choose to run the same ones again. While this may not be needed it adds a useful tool that can save time in case they come up with a way they want to use this we may not have accounted for.