Collaborative Design Practice / Task 4 / Testing the End Product and Iterative Designs
18.6.2024 - 2.7.2024 (Week 9 - Week 11)
Takuto Hozumi / 0354047 / Bachelor Of Design (Hons) In Creative Media
Collaborative Design Practice
Task 4 / Testing the End Product and Iterative Designs
INSTRUCTION
Task 4 Outline
Your group will rigorously test the complete product using the best
solutions identified during the prototyping phase. This is the final stage
but in an 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.
To manage, document and present the findings from your tests; your group
will need to design a prototype testing strategy to first identify what to
test and who to test. Document what worked, what could be improved upon
and further questions and ideas that arose during discussion. You should
also consider using video to capture the tests for clearer analysis. To
conclude, present your findings and propose if the next iterative design
is required and plan for that to be done.
1. Points of improvement to our project based on feedback
After the W9 presentation, our project received some feedback from lecturers
and clients. I write details about the application design, which is my
responsibility. For feedback on other outcomes, please refer the "Given
Feedback List" below.
Firstly, about the unity of the project as a whole. This was a concern of ours
at the time of Task 3, but we regret that we were not able to make sufficient
improvements as a result. A client suggested that we incorporate our
illustrative elements into our common designs. One concrete idea for
improvement would be to have the characters that appear in the pitch video
also use in the app design and microsite.
Next, discussed the contractor main page. The business overview will be
removed. And then we apply a common design to the contractor side as well as
the homeowner side so that the entire application has a unified design.
Given Feedback List
App design
- Xie Yi suggests to not have the overview for the main page for the contractor's side. He suggests to have a main page similar to homeowner and have contractors be able to see their competitions
- Try to implement the fun style in the app like in the microsite and pitch video
Microsite
- More emphasis on the download button (Make it big?)
- Have more clarity on the sign up and log in section as it isn't clear on the microsite
Pitch Video:
- Have the narration follow through the actions in the animation
- Some colors like the yellow for the light bulb seems out of place as it wasn't use in the app, be more creative with our palette
Billboard
- The design doesn't really tell that it is promoting an app
2. Brush up on application design
One of the shortcomings of our project was the weak unity of design style
within the group. Therefore I decided to listen more to the ideas of the
other members of the group in order to unify them with the other outcomes.
Fig.1: Suggestions from Group mates 1
Fig.2: Suggestions from Group mates 2
Several members helped and provided images with ideas on how to reflect feedback from clients and lecturers.
The following is illustrated with images taken from the slides introducing
how the brush-up was done.
Fig.3: Log-in Page
The common application for all pages is that this prototype should be
designed for devices on iOS. Therefore, the placement of icon areas, etc.
have been changed.
The login page has been brushed up to differentiate homeowners and
contractors by placing characters, as recommended by group members.
In order to seamlessly connect the character and UI, the character vectors
are split and the hands are designed to cover on the UI. When actually
coding, simple animations could be added with svg.
Fig.4: Main Page & Header Design
In the header open/close panel, the size and spacing of the text and icons
were adjusted. In addition, the size of the category icons was set slightly
larger.
Fig.5: Profile Page
On the profile page, I placed a real image of person so that it is easy to
imagine in actual use. In addition, character illustrations were placed in
the background.
On the referral code page, the illustrative elements used in the pitch
video were incorporated to unify the overall style. The spacing of the
text was also adjusted slightly.
Fig.6: Chat
When I had several friends evaluate the design, the problem they identified
with the chat window was the weak contrast between the chat callouts and the
background. Visibility and readability were improved by changing the
background gray to a darker color to increase the contrast.
The illustrative elements are used in chat list page.
Fig.7: Modal Window Design
Homeowners and contractors are each represented by a character that is used
in the screen design. The modal window is one of them, which has been
modified so that the character appears after confirmation. The following
video shows this.
Fig.8: Confirmation Modal (Video)
Fig.9: Payment Flow
The same concept, added character to the final page of the payment flow.
Fig.10: Contractor Main Page
Due to client feedback, the Service Insight has been removed and redesigned
to be similar to the Homeowner. A search function for other services has
also been added.
3. Final App Design & Prototype
The final, finished design is as follows.
Fig.11: Final Screen Design (Figma)
Fig.12: Final Prototype (Figma)
4. Optimization for Innofest
We had a competition in W9 for this project, and as a result, a our video for
website was selected from our project.
Chosen Design
Social Media - Kooky Kreators
App, Microsite - MBTIC3
Website Video - Hungry Step Family
Main Video - MBTIC3
Fig.13: MBTIC3 Characters
App, microsite, and main video were selected from MBTIC3 (another group), so
the style of our video will be adapted to their project.
Fig.14: Final Pitch Video
Fig.15: Website Video for Innofest
FINAL OUTCOME
Week 11 Final Presentation SlidesIdeation
Miro Board:
App Design
Screen design (Figma):
Prototype (Figma):
Microsite
Laptop size: https://xd.adobe.com/view/67030c52-401a-4208-afef-bb5e14a2da0d-3250/?fullscreen&hints=off
Mobile size: https://xd.adobe.com/view/dd957980-46c1-40ac-aa82-2b3bc03303ab-88c6/?fullscreen&hints=off
Video
Final pitch video:
https://youtu.be/R8lRj5DTw1k?si=qkZEhN1HlDOmqpyy
Innofest website video:
https://youtu.be/HIHWzPZPA7U?si=T8YwkG_8xJ_zGxdm
REFLECTIONS
ExperiencesIn this module, we were required to propose a comprehensive proposal for a given app business idea "Quantoqube", which is user and installer matching for home improvement services, art direction setup, research, prototyping, and promotional measures such as microsite, billbord and video. Starting with the analysis, we set the design style reflecting the client's desired design style and the research results of the survey, with the usability of the users as the first priority. I learned that the selection of design regulations was particularly important and played a major role in the subsequent brand image, including the logo and website.
Observation
Throughout the module, characterized that we do presentations in everytask by each group, which was held 4 times during the 12-week period, and for me it was a chance to see the progress of the other groups and get inspiration for new ideas, both design and technical. My reflection this time was that in the first half of the module, I was concentrating only on my area of responsibility (in this case, the app design) and a bit neglected to check the harmony with the video and billboards, etc. In order to improve this from Task 3 to 4, I actively sought input from the other members, and the final draft was a little better than the previous one. I believe the final design seems to have a better sense of unity throughout the project.
Findings
Based on the lessons learned in this module, I have learned that the next time we work on a similar project or real work, it would be beneficial to act as follows.
- Listen to the client's requests clearly. What are they looking for, what style do they prefer, and are there any reference examples of similar products or services? Or I think creating a listening sheet also works.
- Conduct sufficient research before actually producing the design. Advantages, attractiveness, and other benefits of the products to be handled, targets, potential customers, etc. In this case this was done by the business team, but we needed to do it too to determine the design style.
- The final design should integrate the above information and multiple ideas should be created. Spare parts in case our proposal is not to the client's liking, so that the discussion can proceed smoothly.
- Be friendly. This is the hardest thing to do, but I think it is important for the work to go smoothly. Especially in a group project, each member's contribution will vary. This creates discord within the group, but not much creativity can be produced in an unpleasant mood. It would be good to keep the atmosphere friendly, but not too playful. Balance is important.
I would like to conclude by expressing my gratitude to the members who worked with me and to Ms. Lilian, the lecturer in charge.
Thank you all very much.
Comments
Post a Comment