Yung Siew Weng / 0339847
Collaborative Design Practice / Bachelor of Design (Hons) in Creative Media
Task 3
Task 3
MODULE INFORMATION
TIMELINE
Collaborative Design Practice - Task 3 : Produce Rapid Prototypes, Test & Iterative Design
INSTRUCTION
We are required to produce a number of inexpensive, scaled down versions of the product or specific features found within the product, so we can investigate the problem's solutions generated in the previous task. Prototypes may be shared and tested within the group or on a small group of people outside the design team.
EXPLORATION
Week 5 -
Logo Design Digitalisation
As we need to prepare our Task 3 development aside from our presentation for Task 2, we decided to shift some "final" elements to Task 3 to showcase our progression during the Week 6 tutorial slot.
Continuing from the Collaborative Design Practice / Task 2 final logo exploration :
Fig 1.1 Proof of acceptance from Client
We received feedback from the client regarding the acceptance of our logo design. Great news — it has been approved as the final logo and is ready to proceed! :D
Fig 1.2 Final Logo Design, Progression
Since the final logo needed a more guided format, I assisted the team by working on it in Adobe Illustrator using a "non-professional" graphical design format. I utilized the shape builder tool and maintained the same thickness for the "rectangle" as a guide to ensure all lines and elements were equal and neat. Afterward, I made some refinements to perfect the logo for final use.
Fig 1.3 Final Logo Design, Progression
Fig 1.4 Final Logo Design, Colour Variation
To provide clear direction to the team, especially for social media posting, I created a version using our color scheme. This will ensure better consistency in the use of background and text colors, making the process easier and more streamlined. Our main colours include dark green, white, orange, and light green, which are derived from our logo colour palette.
Week 6 -
Final Logo Design, Cohesive Direction, Application Exploration
01. Final Logo Design
In refining the logo design, I noticed the initial version felt a bit small and the logo mark (symbol) and wordmark (text) seemed unbalanced. To address this, I made adjustments to create a more balanced and cohesive composition :
Fig 2.1 Before Vs. After
Furthermore, considering the logo's potential applications, I developed three versions : horizontal, vertical, and a sub-mark. This versatility will make the logo more adaptable for various uses, such as on websites, business cards, or even social media profile pictures.
Fig 2.2 Final Logo Design, Ai
<-- imma breaking lines -->
02. Cohensive Direction
Following feedback from the Task 2 presentation, it became clear that our social media and pitch video lacked a cohesive direction. To address this, I facilitated open communication to gather everyone's honest feedback on the current state of the project to allow us to identify areas needing improvement and solidify a clear direction moving forward.
Fig 2.3 Team Progression @ Week 6
Based on the team's input, I suggested the possibility of changing the font for social media posts from Clash Display to Golos Text. And, yes, the change demonstrably enhanced the overall aesthetic. However, further adjustments were needed regarding color combinations. The initial combination of an orange border with black text proved too strong and hampered readability on social media platforms. As a result, Viola will take the lead on refining the social media elements with a focus on improved aesthetics and readability.
Jiahui's approach to the mood board and ideation for the pitch video resonated strongly with the team. We've entrusted her with further development of the video concept, recognising her strong vision for its overall mood and style. On the other hand, the concept of a mascot representing the homeowner remains a possibility. Jun Zhe has been actively exploring mascot possibilities and colour variations, potentially injecting a dose of personality and spirit into the project.
Overall, this week's progress highlights the need for effective communication boost and a more collaborative approach to speech up our direction and progression.
<-- imma breaking lines -->
03. Microsite
Fig 2.4 Microsite Progression by Carmen
In developing the microsite, we gave Carmen creative freedom to delve deeper into different ideas. Her exploration resulted in a very interesting folder outline structure. We saw potential in aligning this approach with our social media strategy to create a more cohesive direction across both platforms, so we also suggest Viola to involve mirroring the folder structure's organisation or thematic elements in our social media content.
<-- imma breaking lines -->
04. Application @
Dark Mode Exploration, Prototype Creation Flow Enhancement
This week, before diving into the prototype, we decided to get creative and explore potential dark mode color schemes for our project. Knowing that dark mode might not be a common request after graduation, we saw this as a great learning opportunity to experiment before entering the industry. We each took 45 minutes to develop a unique colour direction for the product page, playing around with different colour combinations to achieve an appealing dark mode aesthetic.
Fig 2.5 Dark Mode Exploration
After exploring various dark mode colour schemes, we opted for a direction that aligned closely with my initial approach. My concept drew inspiration from research on dark mode best practices, emphasizing white and grey shades for text while reserving contrasting colors for buttons and key elements. However, we didn't stop there! We incorporated elements from all three team members' ideas. Carmen's valuable UX insight led us to move away from a pure black (#000) background, which could be too dark for users. Additionally, Pei Yun's suggestion of using "+" and "-" icons to represent expandable content in the product description was a great way to improve usability.
Continue then, all of us been start exploring on the application :
Fig 2.6 Progression
This week, my focus was mainly into the user experience (UX) by mapping out key service flows. This included researching and designing processes for :
- What is the flow after the users hit the "hire" button
- How a quotation maker looks?
- How to make the messaging system to be the central hub for both users to connect?
- What is the main flow from the users request service to project completion?
Fig 2.7 Team Application Progression @ Week 6
This week, our efforts centered on the homeowner site, tackling several key areas : onboarding, service flow, QuantoMall integration, and the initial stages of the messaging system. Additionally, Carmen provided invaluable assistance in refining the complex booking flow. Her initial direction offers a solid foundation for me to continue exploring and building upon the application's functionality.
Week 7 -
Cohesive Direction, Application Exploration
This week, I had a productive progress update meeting with the client to gauge their reaction to our current direction. It was fantastic news that they were on board with most of our ideas, including the wireframes and the application's dark mode design.
There was a moment of surprise, however, when we presented the merchandise design and QuantoMall integration as I am meeting with a new client representative who wasn't familiar with our previous discussions. Overall, the meeting was a positive step forward, and we're excited to continue building upon the client's approval.
<-- imma breaking lines -->
Prototype Creation, UX Flows for Booking, Quotation, Calendar Flow, etc.
This week presented some challenges in terms of maintaining a consistent direction for the project. While this approach aims to improve efficiency, I encountered difficulties in providing individual guidance to both the UI/UX and graphic design teams simultaneously. In response, we decided to implement a new workflow where team members (UI/UX) take ownership of specific areas.
Fig 3.1 New "GAME" Plan for UI/UX's
Looking at Fig 3.1 (our new "game" plan), we're splitting things up a bit to move faster. Pei Yun will rock the app and icon creation, so she might need to bug the other teams for some assets there. Carmen, with her microsite and social media expertise, will handle that whole world, plus the community stuff in the app and the mascot guidelines. As for me, based on what's needed, I'll be jumping in to smooth out the UX flow. Basically, if what the flow needs, that's my zone, but more on service flow, activities page, messaging flow.
<-- Giving Sticky Note : giving feedbacks for app and microsite as well as sticky note on potential help from the team 🤣 -->
After consulting with Ms. Lilian, it became clear complex that the social media strategy and microsite direction are more aligned. However, we are advice to ensure that the application aligns with the social media strategy as well. Reflecting on the project, the main focus is the application, which has significant screen space for modifications. Therefore, a better approach would be to ensure that the microsite and social media posts align with the application's direction, which was the initial plan.
My thoughts here was : "Social Media is tend to promote Application; but not Application to promote Social Media". 💦
However, continue to my progression in App. This week journey was all around the service flow :
Fig 3.2 Service Flow Progression
This week, I primarily focused on developing the service flow and ensuring the system's functionality. I concentrated on what happens after a user hits the "hire" button, leading to a service request. I also worked on various aspects of the quotation flow, including creating quotes, editing quotes, sending quotes, and drafting quotes. This detailed planning aims to make the system intuitive and efficient for users.
Fig 3.3 Activities Page Progression
And, thinking about the service flow might issued from the activities page, where the history and each section are interconnected. Through research and exploration, I categorised the activities into four main sections: default, request, quote, and jobs. This categorisation allows users to track and filter their activity history more effectively.
<-- imma breaking lines -->
02. Team Progression @
Mascot Design, Logo Motion Graphic, Pitch Video, Icons
Fig 3.4 Team Progression Week 7
This week, the team's progress has been steady, though a bit slow. However, we are moving in a positive direction. Given that the mascot team needs more time to build the mascot in 3D, we decided to transform some of the icons into 2.5D designs to reduce the workload. I also appreciate Jiahui's initiative in volunteering to help with the icon creation.
Week 8 -
Cohesive Direction, Application Exploration, Presentation Preparation
With our presentation for the task coming up next week, I created a structured version of the presentation slides to help my team proceed with slide creation :
Fig 4.1 Presentation Slides Structure Creation
<-- imma breaking lines -->
01. Application Final Prototype Exploration
This week, I've been working on various complex flows, providing support, and finalizing tasks to prepare for our upcoming presentation. It has been stressful and overwhelming, especially when, during the busiest time, the client suddenly provided a list of features they deemed compulsory. These features are 50% different from what we previously discussed. Although the client acknowledged their internal miscommunication, we are doing our best to accommodate their new requirements. Despite feeling frustrated about having to bear the consequences of their mistakes, we have no choice but to adapt and deliver.
<-- HELO, my presentation coming in 7 days, and I still thinking on the complex flow - service category and yet adding stuff?? -->
Below are some overview of my progress on the application this week :
Fig 4.2 Service Flow Creation - Homeowner Site
Fig 4.3 Service Flow Creation - Contractor Site
The main focus of this week has been finalizing the service flow. I experimented with different layouts and flows to make the process more user-friendly and less complex. Here’s a brief overview of the final flow :
- Homeowner requests service
- Contractor accepts or declines
- Schedule meeting (if necessary)
- Contractor sends quotation
- Homeowner negotiates or accepts
- Project confirmed and homeowner pays in full
- Contractor receives 40% payment
- Project in progress (schedule timeline)
- Project completed by contractor
- Homeowner verifies and project is closed + Remaining 60% payment to contractor
<-- imma breaking lines -->
Fig 4.4 Geofencing
Based on the Low-Fi in previous task, I created a dark mode version to align with our application's new direction. The dark mode significantly enhances the interface's appeal compared to the light version.
<-- imma breaking lines -->
Fig 4.5 Notifications Structure
For the notifications, I drew inspiration from the Grab app, which separates reminders and alerts into different categories. I categorised our notifications into four sections :
- Offer : Deals, promotions, or relevant information from QuantoCube.
- Project : Project reminders.
- Feedback : Alerts for users to provide feedback.
- Transaction : Payment and transaction updates.
<-- imma breaking lines -->
Fig 4.6 Community Flow
Initially, Carmen was in charge of this, but due to time constraints, she’s now focusing on the microsite. Our initial plan was to have three sections: Job Forum, Discussion, and Inspiration. However, due to time limitations, I modified it to focus on Inspiration and Discussion only. Carmen had the idea of creating a Tinder-like layout, but I didn’t have time to explore this further. Instead, I opted for a TikTok-style layout for the Task 3 presentation as the current main goal is to showcase a version for our presentation.
<-- imma breaking lines -->
Fig 4.7 Navigation Structure
For the contractor site, I think the navigation needs to be simplified as contractors require more dashboard settings. A floating navigation bar, like the one used for homeowners, wouldn't be beneficial. Instead, a left navigation bar has been implemented to facilitate easy navigation and task management.
<-- imma breaking lines -->
Fig 4.8 Calendar Flow
As the client requested a feature allowing contractors to schedule their time and manage their jobs. Drawing inspiration from Google Calendar and Apple Calendar, I created a calendar flow that includes search functionality, event creation, job listing, and different calendar views.
<-- imma breaking lines -->
Fig 4.9 Home Page, Homeowner Site
Fig 4.10 "Hardcore in Flight Back to KL ✈️“
As the numerous changes to the screens, I redesigned and modified the homeowner site's homepage to make it more cohesive and offer "quick access". While the initial idea included service categories and a brief overview of QuantoMall, the new design allows users to directly view products instead of selecting categories.
Additionally, the 3D icons for "Find Pros," "QuantoMall," and "Gamification" were completed at the last minute. Due to team constraints, we initially shifted from 3D to 2D icons. Thanks to Jiahui for rushing the 2D icons, though they were eventually replaced by the 3D versions. I deeply appreciate her effort and support throughout despite the tight deadlines and constant changes.
<-- imma breaking lines -->
Fig 4.11 Home Page, Contractor Site
For the contractor site's homepage, I aimed for a more dashboard-like design, which suits contractors' needs better. Initially, the plan included features like Quick Access, To Do, Matching Job, Ads, QuantoMall, and Inspiration on the homepage. However, after further consideration, I concluded that focusing on planning and scheduling time, To Do tasks, and Inspiration would be sufficient and more efficient for contractors to navigate on the Home Page.
<-- imma breaking lines -->
Fig 4.12 Elements Modifications / Try-Ons
While UX flows were my main focus, I also provided suggestions and guidance to my UI/UX team to ensure cohesive application design. Fig 4.11 showcases the various logo colour options and ideas we discussed to make the design more energetic. While thinking the orange border with the white icons seems to be too contrast in the application, 2e decided that the middle option, with balanced padding between text and sections, was more cohesive and enhanced user experience.
<-- imma breaking lines -->
Fig 4.13 Icons Modification by Pei Yun
As we encountered difficulties with the 3D mascot team needing more time to produce their work. To address this, we decided to replace 3D icons with 2.5D flat designs, with Jiahui's help. However, the 2.5D icons were limited in color and didn't align well with our overall design direction. Inspired by Agoda's use of stock images for icons, I shared this approach with the UI/UX team. Pei Yun explored this further, and we found that stock images provided a more balanced and interesting UI. The team agreed, and we decided to use stock images moving forward.
<-- imma breaking lines -->
Fig 4.14 Interactions
Interactions were a mess before the presentation. We worked non-stop until 8:00 am on the presentation day. Many interactions were incorrect or unconnected, especially I did not mange to link my contractor service flow. Due to time constraints, we presented in the working space, which wasn't ideal for showcasing our UI/UX work. However, the main goal was to convey our ideas effectively.
// But now, I've organised the interactions to ensure better engagement and usability for the team to "embed in their blog".
<-- imma breaking lines -->
02. Microsite
Fig 4.15 Microsite Progression
For the microsite, due to time constraints, I took responsibility for refining Carmen's layout and requested her to replace images with more suitable ones to create a cohesive and relevant look. Initially, the layout seemed "not connected" from my perspective. Drawing from my experience as a website intern, I typically build structures using a storytelling approach where each section connects seamlessly, encouraging users to continue scrolling.
By applying this concept, I made amendments to my original low-fidelity sketch and incorporated some of Carmen's ideas to create a more collaborative structure for the project. The modifications focused on enhancing the original ideation, which included sections like Hero Section, Target Audience, Problem Statement, Why We Created It, USP, Promotional, Testimonials, and Footer. Additionally, I implemented more white space, particularly in the margins between sections, to make the structure more user-friendly and comfortable to scroll through.
<-- imma breaking lines -->
03. Social Media
Fig 4.16 Social Media Progression
When considering the social media layout, I noticed it wasn't very aligned with the application's direction. The main issues included the color usage, such as a dark green background with orange text, which seemed dull and hard to read, and an orange button with dark green text. Additionally, the hexagon shape in social media posts didn't fit well with our application, potentially pushing it to a critical point. This issue had been mentioned earlier in the semester but remained unaddressed. To avoid a disconnect between the application and social media, Ui/Ux team decided to take responsibility for making amendments, even though it was two days before the presentation.
Given Viola's idea of creating template designs, I suggested we create a version layout that she could continue to develop. In Fig 4.16, there are two versions : the middle one is from Carmen, and the right version is my modification of Carmen's layout. I found the cross-over orange and white layout unattractive and somewhat messy from the first glance, so I played around with the structure and produced a new version. Reflecting on it, I realized the social media posts didn't effectively promote the app, lacking relevant and direct content describing the app's structure. To address this, I created a post on "Explore Community" to better integrate the idea. The creation throughout was to combine their ideation but don't modified much as I don't want to deleted people's effort, just some suggestion on the sequences and colour usage.
Unfortunately, none of our "effort" was not used in the presentation. 🙄️
//Luckily, client skipped our social media and I AM VERY HAPPY :) Was Happier than application had been chosen. This might sound strange, but it feels like a relief and a victory in my inner. It's the first time I'm proud of not being chosen, which is a bit unusual but yea.. But, somewhat I did not managed to check the slides too before presentation too as all UI/UX team stay overnight for the particular day and just stop our progression on 8am. However, thinking back if I managed to do so, is that the conclusion will be better? But now, I am happy for this result. -- this should not be a good lead look like, but I had did my best, but there is lots of difficulties that I had struggled throughout.
<-- imma breaking lines -->
04. Team Progression @ Mascot & Pitch Video
Fig 4.17 Team Progression
While I didn't contribute directly to the Mascot and Pitch Video, it's important to credit Jiahui for her incredible efforts. Despite having a very short period to work with, she created a 2D illustration as a backup, which was eventually replaced by the 3D version. Her quick and effective work ensured that we had a solid fallback option.
The final outcomes of both the Mascot and Pitch Video were quite impressive and appreciated by the team and stakeholders. The 3D mascot added a dynamic and engaging element to our presentation, enhancing the overall appeal of our project.
02. Logo Design
Fig 5.2 QuantoCube Logo
Fig 5.3 Logo Animation
03. Pitch Video
Fig 5.4 Pitch Video
04. Merchandise Design
Fig 5.5 Merchandise Design
05. Application
Fig 5.6 Figma Application Prototype
06. Microsite
Fig 5.7 Figma Microsite Prototype
To be continued in Collaborative Design Practice / Task 4.
FEEDBACK
Week 7 / 05.06.2024 @ Progression Check
1. The current 2D mascot design doesn't effectively convey the initial characteristics of playfulness and relatability.Exploring a 3D perspective and emphasising the mascot's key traits are recommended. Focus should shift towards developing a strong 3D representation, potentially moving beyond the initial 2D concept.
2. While the colour palette of pitch video needs refinement (particularly the blue shade), it's not necessary to utilise every colour for the logo. Consider utilising background colour changes to indicate movement within the video.
3. The improvements of social media made this week are a positive step forward. The overall look is strong, but further exploration of possibilities using the finalized mascot design is encouraged.
4. The second logo animation concept shows a more developed and thought-out approach.
5. Inspiration for the microsite's look and feel can be drawn from the successful social media posts. Introducing colour blocks into different sections could further enhance the design.
6. While the light mode should be explored to showcase the app's versatility, feedback indicates the app currently lacks the personality present in the social media elements. Consider how to best present this information to the client moving forward.
5. Inspiration for the microsite's look and feel can be drawn from the successful social media posts. Introducing colour blocks into different sections could further enhance the design.
6. While the light mode should be explored to showcase the app's versatility, feedback indicates the app currently lacks the personality present in the social media elements. Consider how to best present this information to the client moving forward.
Week 9 /18.06.2024 @ Task 3 Presentation
The app was praised for its cohesive design, which provides a seamless and user-friendly experience. The mascot was noted as being particularly cute and engaging, with suggestions that it should be utilized more extensively throughout the application. Additionally, the geofencing feature was seen as a valuable addition, enhancing the app's functionality. It was also recommended to give the mascot more poses to further engage users. While the Quantomall feature was recognized as having potential, it was suggested as a long-term consideration for future development. Lastly, there was concern regarding the portfolio feature, specifically about how to screen the quality of the photos uploaded by users.
REFLECTION
This task has been particularly challenging and overwhelming for me, despite only having two modules this semester. I've found myself sleeping less than 24 hours a week due to the immense pressure and disappointment associated with this task, especially during ELW, week 8. Reflecting on my initial plan to balance the team's feelings, I realise now that I neglected my own well-being. It's disheartening to feel that my workload is disproportionately higher than that of my teammates, yet we receive the same marks. This has been a recurring issue throughout my degree, but I got used it.
This time, the pressure became unbearable. It seems to push me to my limits. I struggle with rudeness, especially from those whose work does not meet expectations. Throughout my degree, I've managed to let my work speak for itself, but this task has been different. People have been deleting my contributions, disregarding my credit, and being rude. For the first time, I've encountered individuals who judge my efforts and test my patience. Normally, I worry about how my attitude might affect others, but during this task, I've learned that I need to prioritise my own happiness. I won't allow myself to be treated poorly or disrespected and it's the forth time, people said "things should not go beyond 3 - 事不过三".
Having a strong design background is never an excuse for arrogance. Despite extensive design experience, I've never used it as a reason to be arrogant. These experiences have built my confidence and may make job hunting easier for me, but they are never an excuse for rudeness, unless someone is being excessively disrespectful. After this task, I am more persisted with my thoughts and I hope my team really understands that experiences should not be a source of pride and disrespectful as well as being responsible.
I'm grateful for the opportunity to voice my thoughts, and I hope that after this conflict, everyone will be more supportive and collaborative, but I appreciated on those support throughout. This experience has taught me that it's important to stand up for myself and ensure mutual respect within the team. And, I wish that the continue collaboration would be more smooth after this issue and thanks for adding a new experience to me : "Direct Conflict in Meeting" in my degree. :D
// At least this task only took away my sleep and didn’t sprain my hand again, otherwise my doctor really wouldn’t believe that I don’t throw my mouse. 😅
Comments
Post a Comment