06.05.2024 - 28.05.2024 / Week 3 - Week 6Yung Siew Weng / 0339847
Collaborative Design Practice /
Bachelor of Design (Hons) in Creative Media
Task 2
Task 2
MODULE INFORMATION
TIMELINE
Collaborative Design Practice - Task 2 : Brainstorming to Ideate a Solution for the Problem Statement
INSTRUCTION
We are required to use the defined human-centered problem statement to think creatively and explore new solutions. Choose an ideation technique like Brainstorming, Brainwriting, Worst Possible Idea, or SCAMPER to stimulate innovative thinking and expand the problem space. After ideating, present the findings to your selected expert for review.
EXPLORATION
Week 3 -
Mood-board Creation, Art Direction & App User Flow
During #Meeting 3 of Task 1, besides rehearsing and finalising details, we decided to create a mood board to help us establish a potential art direction for our project, providing visual inspiration and a cohesive vision to guide our direction.
Fig 1.1 My Mood-board Creation
In summary, my mood board emphasized minimalism as the primary brand direction. I lean towards using line art or abstract logos to create a design that is both simple and meaningful. Regarding colour schemes, I prefer options other than the client's choices of orange, beige, and peach as I believe that these colours, while soft, may not convey professionalism, especially for accessibility functions. And, yet I believe that a more vibrant colour scheme could offer better contrast for both light and dark modes.
<-- imma breaking lines -->
Since everyone was busy with own responsibilities in task 1, I took the initiative to analyse our previous contextual research. I identified and listed some potential features that we can integrate into our app design to showcase during the consultation slot.
Fig 1.2 List of Potential Feature
#Team Meeting 4 @
Mood-board & Art Direction Discussion
After our Task 1 presentation and Task 2 consultation, we had a quick discussion to finalise our mood board and art direction :
Fig 1.3 Mood-boards - Progression, Group
Based on the mood boards, it was evident that all our members were leaning towards a minimal, simple design direction. However, finalizing the art direction, particularly typography and color schemes, proved challenging. To tackle this, we decided to create rough sketches for the logo and mascot before finalizing the art direction. Jun Zhe and Jiahui will focus on rough sketches for the mascot design, while the rest of us will work on sketches for the logo design.
<-- imma breaking lines -->
As there was a time limitation for creating the logo, I did some rough sketches and explorations in Adobe Illustrator :
Fig 1.4 Logo Ideation - Progression
Fig 1.5 Logo Ideation Sketch
From my logo ideation, the rationale was to showcase a combination of a house and a spanner in a more abstract way, leaning towards a design style that incorporates line art. Throughout the 9 designs, my focus was on how to seamlessly combine the two elements into one cohesive design. I also considered how the design could work effectively as a motion graphic, which aligns with the team's ideation.
#Team Meeting 5 @
Mascot & Logo Design Discussion
Fig 1.6 Mascot & Logo Ideation - Progression, Group
Yeap, a quick meeting again to discuss our progress. Following #meeting 5, we had finalised some potential outcomes and decided to combine them with rationales in order to send the potentials to the client for feedback and suggestions. After the discussion, I assigned tasks to each team member based on their preferences and expertise which I believe that this approach will not only benefit our project but also make the "project user journey" to be more "user-friendly" and powerful.
<-- imma breaking lines -->
Continuing with my assigned part, which is the UI/UX for the app design, Pei Yun, Carmen, and I scheduled a meeting to finalize our focus features and potential questions before we kick-start the wireframing and user flow stage.
#UI/UX Progression Week 3 @
User Flow Creation (Homeowner)
Fig 1.7 Progression, Week 3 UI/UX Meeting 1
We had our meeting on Sunday night to create an overview of the user flow from the homeowner's perspective. We anticipate that the contractor's part might be more complex, so we decided to first analyse and establish a clear direction for the homeowner's flow before moving on to the contractor's side.
Week 4 -
App User Flows & Prototype, Art Direction
Fig 2.1 CDP @ UI/UX Team Schedule Timeline
Noticing that the timeline would be tight for the team, especially the UI/UX team, I created a spreadsheet for UI/UX team to make our journey easier and more guided. This spreadsheet outlines our tasks, deadlines, and milestones, helping us stay organised and ensuring that we meet our objectives on time.
<-- imma breaking lines -->
#UI/UX Progression Week 4 (1) @
App Direction & Visual Identity
After last night's discussion, we continued our progress by determining an art direction. Since the three of us might have different design styles or ideas, we wanted to ensure we are aligned in the same direction. To achieve this, we decided to give ourselves 1 hour to each create a landing page (home page) mockup. The idea is to help us capture our individual ideas and evaluate which direction best aligns with our overall vision for the project. By comparing our mockups, we can select the most suitable design approach and ensure a cohesive and unified design moving forward.
Fig 2.2 Mockup Structure Direction
Based on our experience creating mockups, we noticed that the structure of our sections was quite similar. We spent some time discussing and sharing our insights, providing feedback to each other. For my mockup, I took references from our mood board and drew inspiration from some of the elements. I aimed to implement the ideas we gathered, incorporating my minimal design style to create a sense of simplicity and modernity. Additionally, I proposed the typeface "Gotham" for our app design. The team agreed on this choice, and we decided to use my wireframe and direction as the foundation for our future creations.
After we confirmed our direction, I suggested creating a visual brand identity for the team based on our app design to ensure that the branding remains consistent and aligned throughout the project :
Fig 2.3 Potential Brand Identity
Based on Figure 2.2, we experimented with a variety of potential logos using the proposed color scheme. During the creation of our visual identity, we aimed for a logo mark that was both aesthetic and modern, paired with a simple font. Carmen proposed the font "Clash Display," which complemented our art style perfectly. The font worked well, enhancing our overall design direction and contributing to a cohesive and visually appealing brand identity.
<-- imma breaking lines -->
#Team Meeting 6 @
"Progression" Check
Fig 2.4 Team Progression
We had our "Team Progression" check meeting 30 minutes before our consultation with Ms. Lilian to share our team insights from the week. During this meeting, each member took turns sharing their insights and outputs from the past week. Other members provided feedback and comments throughout the discussion to ensure everyone was on the same page and to improve our collaborative efforts.
Fig 2.5 Team's "Focus Area"
We then determined the ongoing tasks and discussed each member a "focus area" to concentrate on throughout the project to ensure everyone had clear responsibilities and could focus on their specific tasks to maintain steady progress.
<-- imma breaking lines -->
In addition to the team and UI/UX meetings, I needed to ensure everything was on track. I prepared potential questions and organised the logos, typography, and all the branding assets that we intended to propose, in order to bring those questionsss to the client :]
Fig 2.6 Potential Question to be Ask (02)
After summarizing all the potential questions, I reached out to Fazle, the client of QuantoCube, and scheduled a meeting to ask these questions and resolve any confusion.
Fig 2.7 Recording - Proof of Meeting with Client
As I was the only representative from our team attending the meeting, I recorded the session to ensure I could accurately relay the information to the team and to prevent any details from being forgotten. Since the meeting minutes were quite extensive, I requested Jiahui's assistance in transcribing the recording to facilitate better understanding among the team. Additionally, I provided the UI/UX team with a recap of the brand direction and other relevant details.
<-- imma breaking lines -->
#UI/UX Progression Week 4 (2) @
App Prototype Creation
For this particular week (Saturday and Sunday), the UI/UX team primarily focused on creating the wireframes for the app. I created a list and assigned responsibilities to each team member to expedite our progress:
Fig 2.9 To Do List - UI/UX Team
However, we approached this task a bit differently. Alongside the wire framing, we experimented with various potential colour schemes to determine the most suitable ones for the application.
Fig 2.10 Progress of the week @ UI/UX Team
Fig 2.11 Progress of the week @ Individual
This week, my progress was somewhat limited as I faced challenges with the design direction. Based on the client's feedback from our last meeting, I made some adjustments to the homepage, adding extra touches to better align it with the business direction. I also increased the overall font size, finding the original too small, to enhance readability and make it easier for me to navigate the team's process. Additionally, I conducted research on potential layouts for geofencing to implement in our design.
For the team, progress was not as efficient as we hoped due to time constraints and direction issues. Despite this, each of us did our best to complete what we could. However, it became clear that we need to speed up and possibly sacrifice some of our personal time to meet the task requirements.
Week 5 -
App User Flows & Prototype, Art Direction, Presentation Preparation
Fig 3.1 Template Design - Slides
Before the @Team Meeting 7 of the week, I reflected on our progression and realised it has been somewhat "uncontrollable". The tasks related to UI/UX have been particularly challenging, making it difficult for me to guide and manage other tasks from my teammates. Knowing that I will be busy with development in the next few days, I wanted to streamline our process to make it easier for the entire team to function efficiently. To facilitate this and ensure brand consistency, I created quick templates for both the upcoming presentation slides and the project document in order to have a better discussion for the coming discussion.
<-- imma breaking lines -->
#Team Meeting 7 @
"Progression" Check
Fig 3.2 Team Progression
During this week’s meeting, I observed that our progress and direction were somewhat misaligned. It is crucial that we spend more time unifying our efforts to ensure everything is cohesive. To address this, I assigned specific tasks to team members with the goal of completing them before our next meeting on the coming Friday. I am hopeful that these steps will lead to greater consistency and ensure that all progress is on the right track.
<-- imma breaking lines -->
Following the meeting, I received a request for help from the team regarding the alignment of the logo design and I provided support to assist with this task :
Fig 3.3 Progression of Logo Creation / Amendments in Grid
After some exploration, I compiled all the potential logo designs and requested feedback from Ms. Lilian before reaching out to the client for direction.
Fig 3.4 Logo Exploration Outcome (1-3 by team, 4-7 by me)
Based on Fig 3.4, Ms. Lilian mentioned the potential of 6b and 7a as the logo direction. However, she noted that some refinement is needed. Specifically, the thickness of the handle should match the hexagon stroke, the area where the spanner crosses the outer hexagon should be refined, and the handle end should be aligned with the bottom of the hexagon.
And, I continued on the refinement :
Fig 3.5 Logo Final Idea
By refining the stroke of 6b and 7a, Fig 3.5 presents our final idea for the branding. We have decided to push the final output to Collaborative Design Practice / Task 3 for further development.
<-- imma breaking lines -->
#UI/UX Progression Week 5 @
Prototype Creation, User Flow, Microsite Research & Wireframe, Wireframe Creation for Presentation
Fig 3.6 Week 5 Progression
Fig 3.7 User Flow Creation
This week, our main focus was on prototype creation and defining the user flow. We took a somewhat reverse approach by initially working on the color schemes and other design elements in a more "low-fi" method. Instead of finalizing these elements first, we decided to integrate them into the wireframe as we already had the basic flow for our app design, which would also be beneficial for our Task 2 presentation.
For the website, I conducted research and gathered a mood board before diving into the design, while the rest of the team focused on the application :
Fig 3.8 Mood-board of Microsite
The microsite's main purpose is to serve as an "About Us" page, so the challenge lies in aligning the interface with our overall direction and design principles. From my observations and previous internship experience in web design, I attempted to define a potential layout :
Fig 3.9 Rough Sketches
The primary focus is to promote the service, highlight the QuantoCube app, its unique selling points (USP), and explain how the application works. To enhance user-friendliness, I suggest implementing customer support that includes a virtual chatbot for user assistance.
After discussing and agreeing with the team, I proceeded to transform the sketches into wireframes, providing a clearer direction for our presentation on ideation :
Fig 3.10 Microsite Wireframe
<-- imma breaking lines -->
After we had done for the wireframe, we depart into the stage to organise our presentation slide and the outcome will be shared under #Final Outcome. Before that, we have a meeting with the team in order to keep all of us in the right track before the coming presentation :
#Team Meeting 8 @
"Progression" Check
Fig 3.11 Team Progression
During the meeting, it became clear that the team was struggling to achieve a cohesive design, particularly with the social media posts. To address this, we held an effective communication session within the team, turning it into a feedback session to discuss improvements. After this constructive discussion, we were ready for our presentation. We assigned each team member specific responsibilities for inserting content into the slides and aligning the design of our templates to ensure that our final presentation would be unified and visually consistent.
#Final Outcome
Fig 4.1 Task 2 @ Presentation Slide by G3 / MBTIC3
Fig 4.2 Task 2 @ Project Document by G3 / MBTIC3
Fig 4.3 Whiteboard by G3 / MBTIC3
To be continued in Collaborative Design Practice / Task 3.
FEEDBACK
Week 3 / 07.05.2024 @ Mood-board & Potential Features
1. The visual references in the mood board seems to align well with the client's desire for a simple and minimal style, which is great. Continue to develop those ideas and finalise a solid art direction by next week.
2. There seems to be a lot on the potential feature list. Determine what is the most important feature and try to avoid making the app too complex and decide whether the app design can be completed within your boundaries and time limitations.
Week 4 / 14.05.2024 @ Logo, Mascot, App Direction
1. Logos 1, 2, and 3 seem to have potential, using methods of negative space and abstract placement. Perhaps we can implement this concept into Logo 4 to enhance its design.
2. The random mascot looks really cool and energetic! You can further explore how the mascot can work, probably incorporating interactions with cubes to add a playful element.
3. The proposed colour scheme is very contrasting, which is suitable for the contractor-focused design.
Week 5 / 21.05.2024 @ Progression Check
1. For the logo, ideas A and D were preferred, with A featuring a geometric shape and D requiring some adjustments to the strokes. Conversely, idea B was not well-received at this point, and ideas F, G, and H were noted to resemble a graduation hat, which was not desirable. It was suggested that we incorporate the word-mark into the logo to enhance its identity.
2. Regard the mascot, it should not differ too much to maintain a cohesive "twin" appearance. The color palette used works very well with the mascot, but the key element was deemed too detailed and could easily get lost; it should be made bigger and more significant.
3. For our social media strategy, we need to check with the client regarding their template preferences. The current color palette and typeface have been positively received.
4. When designing icons, it was noted that translucent designs are not practical, perhaps a simple and curved with rounded corners would work, avoiding perspective. They should align with the mascot and overall art direction.
Week 6 / 28.05.2024 @ Task 2 Presentation
The pacing of the slides was well-considered, making the presentation flow smoothly. However, it was noted that the app, being the most important outcome, should be presented first. The user flow was highly conceptualized and extensive, with particular praise for the addition of the community page. However, the graphic elements were not strong and need development from the brand identity. The pitching video idea was very brief and needs expansion. While the merchandise is a good outcome, consideration is needed on how the client can present it. Overall, the sense of togetherness in the presentation is still uncertain until the prototyping stage, with the primary focus needing to be on the app design.
REFLECTION
Throughout our journey up to week 6, it has been challenging to maintain direction and cohesion within our team. Working together online presents its own set of difficulties, particularly in a field as nuanced as UI/UX design. With a large group, managing ideas can become overwhelming, leading to prolonged discussions and slower decision-making processes. This experience has certainly had its pros and cons, reflecting the typical dynamics of group work. At times, it has made my role as team leader quite difficult. Balancing the team and ensuring everyone feels heard and valued has been "always" one of the most challenging aspects for me, especially when it comes to managing assignments.
One of the key learnings from this journey has been the realisation that holding oneself in high regard can be counterproductive. Continuous communication and effective collaboration are crucial for success. I'm grateful that, despite our challenges, the team has stayed supportive. We've faced difficulties and moments of imbalance, but positive communication has kept us on track. It's clear that being real and speaking up about concerns, rather than ignoring them, is essential. Addressing discomfort and unspoken tensions can improve team dynamics and project outcomes. This journey has shown me the importance of honest interactions and making sure everyone feels comfortable voicing their thoughts.
In summary, while this experience has been challenging, it has also been incredibly educational. It has taught me the importance of effective communication, genuine collaboration, and the need to address issues head-on. As we move forward, I am hopeful that these lessons will continue to guide us towards a successful project completion.
Comments
Post a Comment