Collaborative Design Practice / Task 4: Testing the end product and iterative designs
Derin / 0354969 / Design in Creative Media
INSTRUCTIONS
TASK 4
Pitch Video (Hungry Step-Family)
There were feedback given by the client's which was adjusted by Sejin while my part was okay yo go with. Additionally, there have been changes made to the app showcase section. We decide to create a storyline for the app navigation with the updated UI/UX.
STORYLINE
HOMEOWNER
Homepage
Click
on the arrow and go to "Notification". After exploring it, go to "My Booking",
then go back to home. Scroll through the categories.
Services
Click
on the HVAC, click the filter, and scroll through the services. Click on the
first service option. Click on the contractor profile, then go back. Go to the
Reviews, click on the filter, scroll through the ratings, click 'Back to Top'.
Press back and click buy from one of the lists.
CONTRACTOR
Homepage
Click on "Edit Service Page", scroll down and click on
"Page Preview". Then, press "Back" and "Save". Click "Notification", go back.
Click on "Customer Reviews", go back. Click on your profile on top right
corner, then go to Edit. Scroll, save,go back to menu. Then, go to message
box, click on the first one and..........
END
Sejin was in charge in our group's app prototype while I focused on the MBTIC's.
Website Video (MBTIC3)
The clients have informed each team of their selected outcomes for finalization. Our pitch video has been chosen to serve as the website video for MBTIC3 groups' microsite. Consequently, for the final task, we will collaborate among the three teams to finalize the selected outcomes for the client by week 11. This collaboration aims to ensure cohesiveness and consistency in the client’s brand, despite the outcomes being prototyped and designed by different teams.
We have contacted the MBTIC3 team, and based on my understanding, the changes for the pitch video are as follows:
- Replacement of the current app showcase with MBTIC3's app
- Adjustment of the logo to MBTIC3's design
- Incorporation of MBTIC3's mascot into the video
Additionally, we have received suggestions from MBTIC3's website PIC.
Fig 1.0 MBTIC3's Suggestions
One of the initial changes I made was integrating the mascot into the pitch video. While this addition wasn't part of the suggestions, we found it fitting to include. Our concept involves having the mascot narrate the pitch video.
|
|
Fig 1.1 Implementing the mascot |
I also made changes to the hand vectors originally holding the phone, replacing them with MBTIC3's vectors. I used the vectors from MBTIC3's resources (which were used for stickers) and adjusted them to fit the scene appropriately.
|
|
Fig 1.2 Hand vector |
|
|
Fig 1.3 Hand vector 2 |
As for the app showcase section, we had prepared a storyline for the app navigation as well as a script:
STORYLINE
h = homeowner, c = contractor
Homepage [ h&c ]
Starting from the homeowner's homepage, it
scrolls all the way down. Afterwards, it switches to the contractor's homepage
and scroll down, then open navigation bar.
Find pros [ h ]
At homeowner's side, showcase the algorithm and click find pros
afterwards, which leads to its own page. From there can navigate through the
contractor's services and check their profile as well as the abouts and
reviews.
Profile [ c ]
Showcase the overall page then
go to 'Public Profile', then go back to the Profile menu to go to the
'Portfolio' section.
Project page [ h ]
From the
homepage, click on the second navigation button which leads to the project
page. Scroll a bit and press 'Service Requested' and then, to 'Preview'.
Community [ h&c ]
From the inspiration section, click on the first post, then go back,
switch to discussion panel.
SCRIPT
Homepage: QuantoCube, your one stop to the best for your home, connects
homeowners and contractors seamlessly.
Find pros: We
streamline the entire experience, ensuring transparency in pricing and service
quality!
Profile: Homeowners can learn more about the
contractor's expertise and connect easily.
Project page:
Managing ongoing projects and requests is easier on customers and service
providers alike!
Community: It's a place to connect, learn,
and collaborate with others in the QuantoCube community.
After finalizing the storyline, I proceeded to record the app showcase and
imported the videos into After Effects. I adjusted the Region of Interest to
scale the composition to fit the screen size. This step was crucial for later
exporting and adjusting the composition to fit the screen of the phone mockup
using the 'Corner Pin' effect, which only works on unmasked compositions. To
have the recording composition move with the phone mockup, I used the Parent
& Link feature.
|
|
Fig 1.4 Recordings of the app showcase |
|
|
Fig 1.5 Parent & Link |
I also added the mascots to this segment of the video. Additionally, I
replaced the handshaking sequence with their mascot and removed our final
vector animation scene to achieve a cohesive closure for the website video.
|
|
Fig 1.6 App showcase |
|
|
Fig 1.7 Handshake |
Final Outcome
Pitch Video
Fig 2.0 Hungry Step-Family's Final Outcome for Pitch Video
Website Video
Fig 2.1 MBTIC3's Final Outcome for Website Video
Presentation Slides
FEEDBACK
- Considering changing "Best Technician / Trusted Technician in Koogle" to our 2D / 3D contractor’s for better engagement.
- Bold styling may enhance the impact of "Don’t Worry."
- The final scene where the mascots shake hands appears too dark against a white background. The PIC has updated the PNG and uploaded it to the same drive.
- A smaller final logo animation could be more engaging.
- Perhaps avoid abrupt transitions; instead, stack elements together and use opacity for smoother transitions.
- The transitions between scenes can be smoother; viewers should easily follow the transition to the next scene, possibly making the mascot smaller to focus more on the app.
- The mascot could gradually shrink while emphasizing the problem at hand.
- The jump at 0:57 seems abrupt, possibly due to the absence of a soundtrack, but I enjoyed the transition from our sticker to the 3D mascot.
General Feedback:
We seem to be able to take criticism well and use it to improve our work and come up with good solutions, although the billboard area seems busy.
REFLECTION
I understand the importance of aligning our outcomes with the schedule for INNOFES, yet I found it challenging to adjust our work within the limited timeframe. With only one week available and multiple modules to manage simultaneously, adapting our initial art direction to match another group's direction was time-consuming and presented a significant challenge. Despite this, I successfully navigated through these obstacles and gained valuable insights during this intense period.