Collaboration Design Practice - Task 2

Jennifer Huang / 0352990
Bachelor of Design in Creative Media
Entertainment Design - Sem 4
Task 2 - Brainstorming to ideate the solution to the problem statement.

---

INSTRUCTION

---

WEEK 4 
(Finalizing Art Direction)

After last time we did problem statement and all, its time for us to finalize our art  direction which will cover all the design aspects such as color palette, overall design concept, app features, user flow, and etc.


COLOR PALETTE
 
Looking for THE perfect color palette is the trickiest part of all, since we want the overall app to be professional but also maintaining its youth vibe, also we picked out colors that resembles contractors. So here we came up with lots and lots of ideas.. This is the idk how many(th) attempt of us looking for color palette.

Fig. 1 Color Palette Drafts.

From each color palette, we also tried to generate it into a design to see how it'll look like and if thats the kind of vibe we want to have in our app.

Fig. 2 Testing out Color palettes.

After all the drafts we made, we then decided to have a meeting with the client to update them about our color palette, and the progression of our art direction. 

Fig. 3 Client Feedback

This is the color palette that the client initially proposes, but we test it out to see that it wont work as an app color. Somehow the turquoise and yellow look like a supermarket. I also remember that the other member dislike this color palette too for that same reason, and so we look for other color palettes. 

Fig. 4 Client Proposed color palette.

After all the fuzz, we then pitch out the colors we've picked [Fig.1} and finalize our color palette. 

Fig. 5 Finalized color palette.

LOGO DESIGN DEVELOPMENT

For logo design, it was done my one of our members Rachel, she did multiple sketches before finalizing the logo. 

Fig. 6 Logo Sketch

The client requested that everything be combined into a single design. In response, Rachel expanded and refined the concept, incorporating different variations and including a spanner in the logo. She also experimented with various color schemes. After discussing the options, we preferred option 6 and decided to finalize it.

Fig. 7 Finalized logo with color.

TYPOGRAPHY

We opted for more blocky, geometric fonts for our headings. For the body text, given that the main output is the app, we selected a simple sans-serif font to prioritize readability.

Fig. 8 Typography Compilation

PITCH VIDEO

Pitch video is done my Jamie and Hoi Yee, They drafted all the storyboard and also gathered references online. After discussing, we agreed to begin with a videography style and then transition to a motion graphic style to introduce the app's features.

Fig. 9 Pitch Video storyboard idea

APP INFORMATION ARCHITECTURE

For the App Architecture, we divide it into 3 person job since we think its going to be complicated, so Me, Justin and JiaHsuan were in charge of UI/UX part. We initially met separately to discuss the content outline of the app. Based on the client's requirements, each of us drafted the information architecture and potential features for both the contractor's and homeowner's UI screens.

Fig. 10 App Information Architecture

After we put out all the possible features for homeowner and contractor app, We decided that there would only be 4 main pages- Homepage, Project Dashboard, Notifications/Updates and Profile Page.

We then used sticky notes to card sort the information and features, organizing them under the main pages. Everything would be integrated into one app, but after the sign-in/sign-up pages, users would select their type, separating it into two different sections for contractors and homeowners. Both sections have the same main pages but with different features:

Fig. 11 Card Sorting 

- Orange sticky notes: common features

- Blue sticky notes: contractor-specific features

- Green sticky notes: homeowner-specific features

---

WEEK 5 
(Initial Design Execution)

Here are week 5's task distribution. 

Fig. 12 

FINALIZED TYPOGRAPHY

We felt that the initial heading font did not align with the brand's visual identity and image when placed beside the logo. Therefore, we decided to switch to a much bolder and blockier font with rounder curves compared to the previous one.

Fig. 13

- Heading : Techno From Fontshare
- Body Text : Inter

FINALIZED LOGO DESIGN

Rachel continued refining the logo, finalizing the design with colors. She added gradients to create depth and avoid a flat appearance. After receiving feedback from Ms. Lilian, we ultimately selected option 4 as our final logo design.

Fig. 14 Final Logo Design

FINALIZED KEY VISUAL

Key visuals refer to the main visual elements or images that represent a brand, product, or campaign. They are often the primary images used in marketing materials to convey the brand's message, identity, or key features. These visuals are typically distinctive and memorable, helping to create a strong visual identity for the brand and attract the attention of the target audience.

Using the shapes of the design elements, Rachel started creating the initial key visuals for our marketing materials. These brand images will be used on social media channels.

Fig.  15 Key Visual Drafts

Fig. 16 Final Key Visual

FINALIZED PITCH VIDEO & ILLUSTRATION STYLE

Jamie and Hoi Yee meticulously planned and outlined the storyboard, carefully selecting the app's special features to highlight in the motion graphic section.

Fig. 17 

They've also finalized the mood board. For the videography style, we opted for a darker neutral to cool tone background to allow the subject (warm tone) to stand out.

Fig. 18 

The illustration style needs to maintain consistency across both the pitch video and the app. After group discussion, we agreed to utilize line art-based illustrations to maintain a cohesive look. These illustrations will primarily use the brand's color palette, ensuring a unified visual identity.

APP USER FLOW 

We conducted three separate meeting sessions to address the complexity of the app's user flow, which was more intricate than initially anticipated. Additionally, we sought clarifications from the client regarding certain app features during the process.

Fig. 19

For the user flow, me, Justin and JiaHsuan had sleepless nights and multiple meetings deciding on these user flow for both homeowner and contractor. 

Fig. 20 User Flow

---

WEEK 6 
(Low Fidelity wireframe + preparing for presentation)

Fig. 21 

LOW FIDELITY WIREFRAMES

The UX/UI team started finalizing the low-fidelity wireframes of the app in Figma ahead of the presentation. Our layout design was primarily inspired by the references provided below.

Given the client's emphasis on a minimalist design, we recognized the risk of the app appearing similar to others. Thus, we opted for a distinct approach, incorporating "construction shapes" into the layout to infuse dynamism and playfulness into the app's background and cards. This approach aligns with Quanto cube's brand identity while also setting the app's design apart from others in the market.

Fig. 22 

We experimented with integrating our brand colors into the app to visualize its appearance. This allowed us to showcase it on the presentation slides, providing the client with a preliminary overview.

Fig. 23

Implementing the colors proved challenging as some clashed, leaving only the blue complementing the orange effectively. Following feedback from Ms. Lilian, we were instructed to exercise discretion in utilizing our colors, reserving the brand primary colors for prominent elements and incorporating accent colors sparingly. She recommended prioritizing the development of the dark mode version initially, as our color palette was better suited for it, facilitating an easier implementation process.

TASK 2 - CLIENT PRESENTATION SLIDES

TASK 2 - PROJECT DOCUMENT

---

FEEDBACK

Week 4

- Try out grey tones to form the shapes for the logo design 

- Turquoise and yellow could be highlighted color (need to have enough variation) 

- How the blues are going to distinguish it between the 3? Try to maybe change one of them and incorporate turquoise in it? 

- Need to check whether the content/storyline we have is what they want (SDG need to put in)

- Storyboard to be out by next week 

- Consider graphic style for pitch video- match with art direction 

- Come out with layout wireframes (solid app idea)

- Create a framework for every outcome

Week 5

- Try out the color palette on the wireframe to see the potential of the app

- The logo looks interesting after putting in the logo, 

- Since the client wanted illustration-based, consider the consistency throughout all outcomes (video, app etc)

- Check when to submit to ICT

Week 6

Presentation:

- Cohesive brand identity as a whole (conceptually strong ) 

- Idea is very solid and consistent 

- Critical thinking skills are good 

Progress Checking:

- Work on dark mode first?? Utilize main colors well, using only highlight colors whenever necessary 

- Try to create more illustrations in socials and pitch video 

- Currently, the photography is still coherent with the art direction, can keep it but try incorporating more  illustrations into it 

- Less is more for key visuals, at the moment it shows the whole art direction but it looks a bit overwhelming- use the shapes, colors, and masking of the photos well, shapes are a bit too random 

- Pitch video is much clearer this time, illustration style must be consistent throughout, usage of color palette and typography very important 

- Make sure the photography of socials is the same as the videography in the pitch video

REFLECTION

Experience - Working on Task 2 was a rewarding yet challenging experience. One major hurdle was maintaining a consistent direction while incorporating the client's ongoing feedback. We had to continuously refine our design to align with the client's vision, ensure it resonated with our target audience, and keep it visually appealing to the design team. This demanding iterative process was essential for shaping a cohesive and attractive brand identity. Through this experience, I learned the value of flexibility and collaboration in design. These repeated adjustments were vital for refining our art direction, ultimately leading to a polished and cohesive final product.

Findings - The findings from Task 2 reveal several key insights: Client Collaboration : Close collaboration with the client ensured that the final design aligned with their vision. Regular feedback helped us stay on track and make necessary adjustments in a timely manner. Keeping the target audience in mind was essential. Ensuring that the design resonated with them while incorporating the client's feedback was a delicate balance that required careful consideration. The ability to adapt to new feedback and make changes quickly was a key factor in the project's success. Flexibility allowed us to meet the client's needs while still maintaining our design integrity.

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