Colaborative Design Project - Task 2: Art Direction

 

 Week 3 - 6

Justin Averill Prasetya / 0355048
CDP / BDCM / The Design School
Task 2 - Art Directions

---

INSTRUCTIONS

---

Art Directions

Color

First of all, we've decided on the color palette we came up with several possible color pallete that suit our theme and client's preference, and after narrowing down the colors into 3 color schemes, the turquoise one is the client's preference but considering it was too light and bright we decide to choose otherwise

Fig 1.1.1

we decided on 1 that had a formal feeling yet was colorful, the orange and dark navy gave a feel of boldness while the rest complimented it. The main colors were orange and navy

Final Color

Fig 1.1.2

Font

We decided on a much more structural and blocky font, with a futuristic and dystopian feel (San Serif) while for the body we chose inter because it suits the criteria as well 

Fig 1.1.3

Final Font

Fig 1.1.4

Logo Design

The logo would be square-ish and geometrical, referring to the GameCube logo Rachel came up with several sketches

Fig 1.1.5

After implementing the color and after discussing we decided to go with option 6 which has a gestalt effect of a wrench head as well

Final Logo

After implementing several possible color schemes with darker gradients which gave a bold and formal feeling we and Ms Lilian decided to go with color number 4 

Fig 1.1.5

Pitch Video

For the pitch video, we going to combine motion graphics and cinematography at once, here's the idea 

Fig 1.1.6

Final Storyboard and Sequence

Fig 1.1.7

And for the Motion Graphic art style it would be like this

Fig 1.1.8

App Design

MVP

For the MVP we decided on several features that we're going to implement into the app, I worked on the contractor page meanwhile Jia Hsuan worked on the homeowner page and Jenni worked on the rest, After we gathered the MVP, we decided which on is necessary and which one is don't

Fig 1.1.9

The highlighted part is the key feature of every contractor and homeowner's page. The next step was to plan the user flow, this one is challenging because we will implement the feature and make sure the placement of the feature is clear.

User Flow

The user flow would have an onboarding page, Login Page, Home Page for both homeowner and contractor, Project Overview page, Notification page, and Profile page with features that we want to implement and also how to implement them, Here's where we try to resolve the issue with the navigation clarity and also we adding a complimenting feature according to the company objective

Fig 1.2.1

After we decide the best way to fit the feature into the app we finally could finalize the user flow

Fig 1.2.2

We discussed the app style afterward, and we ultimately decided on a blocky style app considering the font and logo were going the same direction, But we going to make it more futuristic or dystopian so that it will be more interesting

Fig 1.2.3

The app will be minimalist so that it won't be overwhelming and we try to reduce the cognitive overload. also, we match with the brand identity. In the process of making the wireframe we had some troubles due to the lack of a competitor app so we needed to start pioneering several breakthrough features and apply the layout for the features ourselves.

Fig 1.2.4

I have some trouble implementing the visual for the features such as project overview and monthly statistics, I'm afraid that the feature inside it will be too overwhelming. Also, we finally decided on the ornament or design element that we're going, to manage consistency in design.

Fig 1.2.5

It's hard to apply color because after we try to fit 5 of the colors into the app they clash with one another, so we decided to go with 3 colors first that weren't over-contrasting

Fig 1.2.6

Key Visuals

Fig 1.2.7

Client Presentation

Project Documents

---

FEEDBACK 

Week 4

1. Logo Design:

   • Experiment with grey tones to create shapes.
   • Highlight colors: Incorporate turquoise and yellow with sufficient variation.
   • Differentiate the blues: Consider changing one blue and integrating turquoise.

2. Content & Storyline:

   • Verify alignment with the client's needs, especially regarding SDG inclusion.

3. Storyboard:

   • Complete by next week.

4. Graphic Style for Pitch Video:

   • Ensure it matches the overall art direction.

5. Layout Wireframes:

   • Develop for a robust app idea.

6. Outcome Framework:

   • Establish a framework for every outcome.

Week 5

1. Color Palette Testing:

   • Apply the palette to wireframes to evaluate app potential.

2. Logo Feedback:

   • The logo appears interesting once incorporated.

3. Consistency in Illustrations:

   • Maintain consistency across all outcomes (video, app, etc.) as per client’s preference for illustration-based design.

Week 6

Presentation Feedback:

• Ensure a cohesive and conceptually strong brand identity.
• The idea remains solid and consistent.
• Critical thinking skills are evident and commendable.

Progress Review:

1. Dark Mode:

   • Prioritize dark mode development, using main colors effectively and highlight colors judiciously.

2. Illustrations:

   • Increase illustration use in social media and pitch videos.

3. Photography and Art Direction:

   • Maintain current coherence but add more illustrations.

4. Key Visuals:

   • Simplify to avoid an overwhelming look; use shapes, colors, and photo masking thoughtfully. Current shapes are too random.

5. Pitch Video:

   • Ensure clarity and consistency in illustration style, color palette, and typography.

6. Social Media & Videography:

   • Align the photography style in social media with the videography style in the pitch video.

Reflections

Experience - Working on Task 2 was both fulfilling and challenging. A significant obstacle was maintaining a clear direction while integrating the client's continuous feedback. We had to constantly adjust our design to match the client's vision, appeal to our target audience, and stay visually engaging for the design team. This demanding process of iteration was crucial in developing a unified and attractive brand identity. Through this experience, I learned the importance of flexibility and teamwork in design. The repeated revisions were essential for refining our art direction, resulting in a polished and cohesive final product.

Findings - The insights from Task 2 highlighted several important points: Close collaboration with the client was vital to ensuring the final design matched their vision. Regular feedback allowed us to stay aligned with their expectations and make timely adjustments. Keeping the target audience in mind was crucial. Balancing the client's feedback with audience appeal required careful consideration. The ability to adapt to new feedback and make changes swiftly was a key factor in the project's success. Flexibility enabled us to meet the client's needs while preserving our design integrity.

Observation - During our brainstorming sessions, we realized that effective team collaboration was essential but came with its own challenges. Ensuring design consistency across the app required diligent communication and a shared vision of the project's goals. We occasionally encountered inconsistencies in the wireframes due to different interpretations of the brand concept and design elements. As the leader of the UX/UI team, I found that regular check-ins, establishing a fixed design system early, and conducting collaborative review sessions were crucial. These strategies helped us address issues promptly and maintain a cohesive design approach throughout the project.