UX Design : Task 3 & 4 - Project Proposal & Final Project Prototype
27.06.2024 - 25.07.2024 ( week 09 - week 14 )
Len Hoi Yee / 0353430
UX Design / Bachelor of Design in Creative Media
Task 3 & 4 - Project Proposal & Final Project Prototype
Instruction
Task 3: Project Proposal
Fig 1.1 Branding and Typography
We have also discussed among our team about our brand idenitity. We have decided to opt for blue colour as it gives trust and loyal meaning. Grey is for a more formal and corporate vibe, and yellow is a complementary colour to make things pop.
Fig 1.2 Mid fidelity
Finally, after all the research work is done, the design work starts. I began to design my sections, since we are tasked to design a low fidelity prototype and present together with our proposal idea. I referred to the references i took, and applied them on my designs. However, I was not quite satisfied with the outcome because it is not what i expected. When i m done, i realised there was a lot of flaws.
Fig 1.2 Proposal slide
Task 4: Final Project Prototype
Execution
During the proposal presentation, we have already made a high-fidelity wireframe, then we began to refine our own sections after receiving feedback.
Fig 1.2 Assets
Fig 1.3 Extra wireframe on the service page
I have added an extra frame to this page is due to convenience for users to search for their preferred tour guide or instructors. I think it would make much more sense for users to pick their location of their desired travel location then search for the tour guide or instructors available in that location.
Fig 1.4 Tour Guide overview page
By taking inspiration from the reference I researched, I have come up with this layout which will display the most recommended tour guide on this app and the rest at the bottom.
Fig 1.5 Tour Guide profile page
Once they tab on the tour guide's button, the details of the tour guide will reveal. All the information about the
Fig 1.6 Instructor profile page
Fig 1.7 My profile page
Fig 1.8 3rd time refining
After receiving feedback, me and my team helped amending the service page, as it had a few refinements to make, especially the discount column.
Fig 1.9 Payment page
Fig 1.10 Linking icons and pages
After refining, we started linking pages, icons, and buttons that are needed within our page. Then, we linked the ones that are connected with other sections.
Usability Test Questions
Fig 1.11 Usability Test Questions
After refining the app, we have moved on to the last step of the project, which is the Usability test. We are ought to let uers test our app, and be open to critics and suggestions, so we can improve our app better. Here is the list of questions we have listed for the users to answer after they have done the testing.
Usability Test Questions Google Form: https://forms.gle/DLujR2ceTEesCGk2A
Usability Test Questions Analysis
Fig 1.12 Usability Test Questions Analysis
After analysing the videos, we have compiled the suggestions and complaints provided by the respondents in the report and concluded the respondents comments and feedback for each question. We also made amendments to the app immediately once we analysed the feedback.
Fig 1.13 Usability Test Report
In this report we have included, the analysis, and the conclusion of the usability test, limitations, Suggestions and potential refinements, and appendices. Then, We did a test run on the app again, ensuring every button and icon, are well linked, and made sure the app flows run seamlessly.
App flow Video demo script
Fig 1.14 App flow video demo script
To allow audience to have a glance of how our app works, we recorded a video of the app flow together with a narrator to guide.
Final Outcome
Travello Final Prototype
Travello Figma Board
Travello Figma Board
Fig 1.15 App flow video demo
Travello Final Presentation slides
UX Design - Travello Final Presentation Reflection
Looking back to the past 14 weeks in this semester, I have become a person who knows how to create an app prototype, and also filled with knowledge of UIUX design. I never thought i would be able to complete this prototype with a satisfactory feeling as we had limited time to carry out this project, especially the usability test, it was such a rushing task. It is also due to our slow paced work and constant refining the prototype. I especially spent a lot of time on the services page as it requries a lot of information and to input all the information in 1 layout is not easy. The more I continue the page, the more flaws and insufficient information in that page. Then, I have to create a new page, just like the first page of the services page, I tried to look at the page from a user's pov, and I realized, it's better for users to choose their desired travel destination before they hire the tour guide or instructor service. Besides, I spent a lot of time in designing the services' profile listings because it actually requires a lot of information for the users to understand and urge them to hire the person. So, there's a lot of back and forth work, refining the payment page part too. One of the challenges in this project is also, we are working in a group and we have to maintain the consistency throughout the app, whether it is the size of the box and columns, the colour of the icons, the length of the nav bar, it was a struggle for me to make sure the layout is the same within my page let alone the entire app. Hence, there is a lot of details to take note and to make sure the information are fully input.
All in all, I am greatful that we have successfully produce our prototype and all our hardwork has paid off. I would like to thank my lecturer and my teammates who have been given me support and guidance in the designing process of this project, i wouldnt have made this far without you guys. I have truly learnt a lot form this module and will put into good use in the future.
Comments
Post a Comment