Yung Siew Weng / 0339847
Collaborative Design Practice /
Bachelor of Design (Hons) in Creative Media
Task 4
Task 4
MODULE INFORMATION
TIMELINE
Collaborative Design Practice - Task 4 : Testing the End Product and Iterative Designs
INSTRUCTION
We are required to rigorously test the complete product using the best solutions identified during the prototyping phase. This is the final stage but in a iterative process, the results generated during this testing phase will be used to redefine one or more problems form an understanding of the users, the conditions of use, how people think, behave and feel, and to empathise. Alterations and refinements are made in order to rule out problematic solutions and derive a deep understanding of the product and its users as much as possible.
EXPLORATION
Week 9 -
Effective Communication and Refinement
After the presentation for Task 3, we received confirmation from the client regarding the selection of our app, microsite, and video. However, they mentioned that we need to implement more of the mascot into the microsite and video to strengthen the identity. However, although our social media was not selected, we still need to produce and refine it for the Task 4 submission.
01. Application
Regarding the application, we face limitations from the IT team, as they currently have only one manpower available to code for Innofest, which is quite challenging. Despite this limitation, the client provided a spreadsheet listing the features they can and cannot implement. However, the spreadsheet was quite messy and unstructured, making it difficult to understand which specifics they were referring to. To address this, I suggested a meeting with them to confirm the structure and proposed creating a new, more organised list of our application's information architecture :
Fig 1.1 Application's Information Architecture
Throughout the meeting, the important parts were :
- Implementation towards gamification is challenging; use a dummy version instead.
- For Innofest, pitch QuantoMall as "coming soon" rather than removing it.
- Replace the "Featured Contractor" section with contractor faces instead of their work.
- Provide a brief dashboard and display monthly rankings (monthly stats).
- Add an AI chatbot (FAB).
- Develop documents for the IT school to reference.
- Increase the use of the mascot in the app, pitch video, and website. Consider using the mascot for user guides.
After the meeting, I began developing the document outlining the service flow for client clarification before moving forward with the modifications of the application. Meanwhile, the team continued with their own responsibilities for Task 4 :
Fig 1.2 The Service Flow
After the service flow was confirmed by the client, I had a discussion with the UI/UX team about the necessary modifications and amendments. We outlined the key changes required and proceeded with distributing the workload. Some examples of the modifications made are illustrated below :
Fig 1.3 Modifications
Given the client's concerns about the portfolio visuals for contractors, especially in fields like plumbing where the portfolio might not be as visually appealing as interior design, we decided to make several adjustments. We revised the sequence on the contractor profile page, changing it from "work, about, review" to "about, portfolio, review." This aligns better with the client's idea, making it more intuitive for users to navigate.
Additionally, we updated the terminology, referring to the section as "portfolio" instead of "work" across the platform, including on the homepage and the "find pros" main page. For the "featured contractor" section, we replaced the original portfolio or cover images with their profile pictures and avoids the use of carousel events, creating a more streamlined and consistent user experience while highlighting individual contractors more effectively and aligned to the client's desire.
Week 10 -
Modifications and Final Touch Up
Throughout the week 10, it was mainly focused on the app modifications and some discussion stuff with the other collaborate team. However, for my own focus was primarily on making final modifications to the app, refining interactions, fixing UX issues, and updating documentation.
01. Application
@ Modification, Interactions, UI/UX
Fig 2.1 AnalyticsRegarding Fig 2.1 Analytics, the client requested monthly statistics for the contractor site. I explored various layout possibilities and experimented with different designs. Initially, I considered using pie charts for clear visual representation, but found the colors too overwhelming when used extensively. The second design attempt appeared too plain and less intuitive for contractors to understand the stats effectively. Finally, the third attempt, which included list views and line graphs, enhanced the clarity and interest of the statistics.
To improve color differentiation, I experimented with combining different colors within a single line or separating them into distinct bars with visual cues. Once the layout design was finalized, I collaborated with Pei Yun to integrate badge icons into the service revenue trend.
<-- imma a break line -->
Fig 2.2 Community Page Modifications
For the community page modifications, the initial layout had a white active button on the left and an orange active button on the right. This inconsistency in button types and unclear functionality made it difficult to determine if both buttons could be clicked. To address this, I adjusted the color scheme for consistency, changing the white button to orange to align with the brand. Additionally, I enlarged the view button to ensure it clearly indicated that clicking it would change the view type.
On the post page, the initial intention was to add an "add title" feature. In this round of modifications, I adjusted the layout to make navigation more intuitive and user-friendly. I also added a visual cue when users click the "like" button, indicating that the post has been collected and saved to a board, similar to the user experience on Xiaohongshu.
<-- imma a break line -->
Fig 2.3 Filter Page
Regarding the filter page, I made some minor adjustments to Pei Yun's layout to enhance alignment and smooth out the layout. This included improving the drop-down/up button functionality to maximise and minimise content more effectively.
<-- imma a break line -->
Fig 2.4 Customer Support Modifications
The modifications were based on Pei Yun's layout design. When I reconstructed and checked for the final touch-up, I noticed that the interaction was somewhat off, so I did some reconstruction on the page. However, I felt that the major issue in customer support was the header alignment and design. The back button on the header seemed redundant in this UX experience since we already had an "end" button that served the same function. Therefore, I made adjustments to the buttons and fine-tuned the padding and margin of the layout design.
<-- imma a break line -->
Fig 2.5 Dummy Template
The initial idea was to have a printable quotation and a preview of the agreement. I conducted some research on how an agreement should look, considering that the layout and design of an agreement might need to adhere to legal standards. I created a dummy agreement to illustrate how I would place it in the UI design. For the quotation, based on the original screen view, I created a "printable" version in a white paper format to showcase how would it look in "paper".
<-- imma a break line -->
Fig 2.6 Calendar Modification @ Label
For the calendar, I figured that adding labels would be more beneficial and enhance the user experience. Initially, the calendar interface was quite plain and lacked clarity in distinguishing different types of events and tasks. By incorporating labels, users can easily identify and differentiate between various categories such as meetings, deadlines, personal reminders, and project milestones.
<-- imma a break line -->
Fig 2.7 Light Mode
As the client requested, I also explored the light mode design. Our dark mode was designed to be modern, minimal, and clean. Simply converting the dark mode to light mode by using a white background with orange elements made the orange appear too stark and gave it a "Shopee" look, which deviated from our intended design direction.
Due to time constraints, I made quick adjustments, deciding that a combination of white and grey would best align with our design principles but maintained the same button colors to ensure consistency across both modes.
<-- imma a break line -->
Fig 2.8 Interactions
I refined some of the screens and interactions to ensure a cohesive user experience while the others focused on their specific responsibilities. The journey took a few days to determine and fixed, as lots of interactions and screens having issue and need to be modified one-by-one in order to make the presentations to be smooth.
<-- imma a break line -->
02. Application @ Documentations
Next, I shifted my attention to documentation creation. The goal was to clearly outline the UX flows and journey for the business and IT teams, ensuring a smooth handoff and minimizing miscommunication. I believe comprehensive documentation is crucial for this purpose :
Fig 2.9 Documentation
I requested Pei Yun to document the visual design concepts for the application, detailing her sections such as QuantoMall, Gamification, and Profile. Afterward, I reviewed and aligned her contributions with the overall structure. Additionally, I documented the remaining sections that I had worked on, ensuring consistency and clarity throughout. My perspective is that those in charge of specific sections are best suited to document the flows and construction, as they have the deepest understanding of their work.
To enhance understanding and documentation, I also created some UX flows in FigJam to make the user journeys clearer and ensures that the flows are well-documented for the team. The following flows were created :
01. Service Flow
Fig 2.10 Service Flow
This flowchart details the steps a homeowner goes through to hire a contractor. It starts with the homeowner sending a service request, followed by a series of decision points and actions, including quotation negotiations, signing agreements, and making payments. The flow ensures both the homeowner and contractor are in sync throughout the project, from initiation to completion and final payment.
02. QuantoMall Flow
Fig 2.11 QuantoMall Flow
This flowchart describes the process a user follows to navigate the QuantoMall, starting from selecting a product category to completing the payment. Users can view products in different modes (full view or grid), customize their product view, add items to the cart, view seller profiles, and proceed through the payment process. The flow ensures a seamless shopping experience within the application.
03. Find Pros Flow
Fig 2.12 Find Pros Flow
<-- imma breaking lines -->
03. Application @ Walkthrough Video
After completing the application modifications and interactions, I had to shift my focus to editing the walkthrough video. Initially, Carmen proposed the idea of adding a voiceover to guide users through our application. We assigned this responsibility to her. However, on the day of the presentation, unforeseen difficulties arose, making it necessary for me to take over the task.
At 5:30 AM, I stepped in to edit and voice over the video clips. I aimed to accommodate everything within my capabilities to ensure a smooth presentation :
Fig 2.13 Walkthrough @ Script
Fig 2.14 Proof of Progression
Utilising the prepared clips from Pei Yun, I undertook a quick yet thorough edit. Within three hours, I wrote a script and recorded the VoiceOver. To ensure clarity and brevity, I trimmed some parts of the video, resulting in a concise and effective walkthrough.
Fig 2.15 Application Walkthrough Final
#Final Outcome Submission
Submission Link : Link
01. Presentation Slide
Fig 3.1 MBTIC3 : Task 04 Presentation
02. Application
Fig 3.2 Figma Application Prototype
Fig 3.3 Application Walkthrough
Fig 3.4 Visual Design Concept
Fig 3.5 Application Document Compilation
03. Microsite
Fig 3.6 Figma Microsite Prototype
04. Pitch Video
Fig 3.7 Pitch Video
05. Social Media
Fig 3.8 Social Media
Fig 3.9 Teaser Video
FEEDBACK
Week 10 / 25.06.2024 @ Progression Check
During the Week 10 progression check, it was noted that the overall deliverables were nearly complete. Just a few modifications regarding the mascot implementation, as requested by the client, needed to be added. Overall, the feedback was very positive, indicating that the project was progressing well and meeting the client’s expectations.
Week 11 / 02.07.2024 @ Task 4 Presentation
The documentation created was highly praised. The feedback highlighted that the documentation demonstrated a designer's thinking, which was appreciated and seen as a great outcome to showcase. The team’s ability to work with a designer's mindset and attention to detail was particularly noted, reinforcing the quality and thoroughness of the work.
REFLECTION
Throughout the journey of Task 4, I experienced both challenges and valuable insights. Since the pitch video, social media, and mascot teams had their tasks relatively confirmed and didn't require much modification, I found myself primarily focusing on the UI/UX team. Although it might seem that Task 4 was just about necessary modifications, balancing the team and addressing the complexities within the UI/UX domain presented significant challenges.
I encountered some disappointment and frustration during Task 4, but I approached these challenges with resilience and acceptance. This time, I faced the issues head-on without tears or complaints, ready and prepared for potential setbacks. I realized that complaints or dissatisfaction are not always effectively resolved through frustration, but rather through acceptance of reality and proactive problem-solving.
Being selected by the client didn’t lead me to believe that our work was perfect. In terms of UI design, I believed that other groups might have had better visual designs. However, what set us apart and gave us an edge was our focus on UX design, the overall completeness, and the detailed presentation of our project. This experience provided me with valuable insights, revealing that I am more inclined towards UX design than UI design, which gives me a clear direction for my future career, guiding me to focus more on UX design.
Comments
Post a Comment