Collaborative Design Practice / Task 3 / Produce rapid prototypes, test and iterative designs
4.6.2024 - 18.6.2024 (Week 7 - Week 9)
Takuto Hozumi / 0354047 / Bachelor Of Design (Hons) In Creative Media
Collaborative Design Practice
Task 3 / Produce rapid prototypes, test and iterative designs
INSTRUCTION
Task 3 Outline
Your group will now produce a number of inexpensive, scaled down versions of
the product or specific features found within the product, so you can
investigate the problem’s solutions generated in the previous task.
Prototypes may be shared and tested within your group’s members itself, or
on a small group of people outside the design team.
1. Division of roles in Group Members
Continuing with Task 2, I will be responsible for the screen design of the
application. The member of the Animation major was assigned to work on the
pitch video, and the other member of the UI/UX major was assigned to work on
the website.
In Task 3, I shared the completed app design with an other member and
received feedback before creating the design.
2. App Design Further Development
Fig.1: Homeowner Main Page
In the prototype as of Task 2, the homeowner side had bottom navigation that
followed over multiple pages, while the main control UI on the contractor side
was the panel on the main page.
However, after receiving feedback that the application as a whole lacked a
sense of unity, and after considering the vertical width of the content area,
the bottom navigation was eliminated and the homeowner side was changed to
panel design too.
Panels can be displayed with open and closed headers.
Fig.2: User review and Star rating feature
A new review page has been designed. This will allow reviews to be viewed in
detail as well as from a card on the services page. A sorting function has
also been added.
Fig.3: Purchase pages
The purchase page is designed in a four-page flow; 1. Check the availability
and booking time 2. Payment methods 3. Order confirmation, Applying promo code
and Comment for request 4. Completed.
Fig.4: Payment Methods
For now, we are assuming cards and online banking for payment methods.
The card includes the following features; 1. Pay with the card registered in
your account 2. Register a new card in your account.
Fig.5: Extended chat functionality
Feedback from other members recommended that a feature to send photos and
videos be installed in the chat. This is intended to be used by homeowners to
share details of problem areas in their homes with contractors, by homeowners
to help workers when they get lost, or by contractors to share with homeowners
where work has been completed.
Fig.6: Profile Setting & Referral Code
When changing profiles, a confirm page has been added that asks for the
password in a modal window. In addition, a display frame for referral
codes and accompanying promotional codes was established in profile page.
Fig.7: Contractor's Profile Page
Several items on the profile page are different for homeowners and
contractors. Contractors can set their service categories here.
Fig.8: Booking Page
The reservation confirmation page was an area that was left out of the
wireframe during our initial conception. We decided this was essential and
eventually added it.
Bookings are shown as Upcoming, In Progress, and Completed. In Progress, a
progress bar is shown for construction that takes place over multiple days.
(If single day construction, no) In the Completed section, buttons are
provided to add and remove user reviews.
Fig.9: Contractor Main Page
Icon style was unified and insights were fleshed out. *Later, feedback was
received that the Service Insight indicator was not needed after W9
presentation.
Fig.10: Chat Page
The functionality has already been shown in the Homeowner section, but the
look of the screen design for the contractor side chat is shown in the figure
above.
Fig.11: Service Page Information
The service page will also cite information, not only from the editor screen.
The above slide shows a visual representation of the internal system.
Fig.12: Notification
Notifications are messages sent to the user from the app manager or system.
Specific content includes; promotional information, apologies in case of
problems with the application, messages received when users inquire about the
application, changes to the application specifications, etc.
Fig.13: General Settings
Initially we had envisioned English, Malay, and Chinese, but we added Tamil in
response to a suggestion that we should add Tamil, just in case.
Initially, toggle button was used to set access permission to the smartphone,
but it was concluded that it would be simpler and better to set these directly
in the privacy settings on the smartphone side, rather than within the
application, and this is how it came to be. It is assumed that the transition
is made directly from the text link.
3. Final Screen Designs
4. Final Prototype
FINAL OUTCOME
Week 9 Final Presentation SlidesMiro Board:
App Design
Screen design (Figma):
Prototype (Figma):
Microsite
Website:
https://xd.adobe.com/view/67030c52-401a-4208-afef-bb5e14a2da0d-3250/?fullscreen&hints=off
Mobile:
https://xd.adobe.com/view/dd957980-46c1-40ac-aa82-2b3bc03303ab-88c6/?fullscreen&hints=off
Video
Pitch video :
REFLECTIONS
ExperiencesThe areas that were indeterminate in Task 2 were detailed with a more specific expectation that users would use them. In doing so, we realized that some necessary parts, such as the reservation system, were missing, and we were able to improve the overall quality of the system. As for the design, we added a little play by rounding the corners within the range that did not violate the art direction set at the beginning.
Observation
What I strongly felt through this assignment was the difference in the atmosphere of the final product when several people worked on different parts of the project. Even though we were working according to the style determined by the art direction, I felt that the atmosphere of my app design and the pitch video, microsite, and billboard design created by the other members of the team were different, and there was little impression that they were one cohesive project.
Findings
The larger the project, the more likely this variance will occur, but this is not acceptable in a real job. Of course, there are differences in each of our abilities, and I'm aware that my sense of design is not perfect. However, I think each group member needed to be more aware of the need to create in accordance with certain guidelines, in this case, art direction and regulations.
Comments
Post a Comment