UX Design- Task 4

 

26/06/2024 - 25/07/2022 (Week 09- Week 14)

Yong Kai Yi (0352826)

UX Design

Task 4

---

PROGRESSIONS

Task 4: Final Project (Prototype)

fig: community page Hi-fi in progress

For the community page, based on the mid-fidelity wireframe, there weren't many changes needed. We just had to add more details, such as text, images, and tidying up all the elements.

Halfway through creating the wireframes, we realized the need to standardize many assets. Hence, we had another online meeting to standardize all the assets. This included the usage of colors, rounded edges, drop shadows, the size of each text element (heading, title, normal text), the size of buttons, search bar, cards, placement of the logo, icons, and more.

fig: assets

This is our asset section, where we copy these components to apply in our respective pages. 

fig: homepage Hi-Fi in progress

For the homepage, I planned to go for a more playful and visually appealing approach to catch users' eyes immediately. I utilized all the colors from our palette and played around with the 'planner' theme, using bookmarks as toggles. After trying a few versions and gathering opinions from members and the lecturer, I finalized the design and content.

fig: check-in page

While working on Travello points, we used the Zus Coffee app as a reference for their complete and appealing points system. I used the compass from our logo and a ticket-shaped icon for the check-in buttons to make it more travel-like. I experimented with a few planner-themed elements but found the ticket icon worked best.

fig: adding OTP in the login page

Initially, we received positive feedback for the login page, so there weren't many changes since the mid-fi stage. However, after further research and development, we realized we needed verification to enhance the app's security, one of our main focuses. As a user, I sometimes find multiple verifications annoying, so I aimed to keep it simple with a pop-up window requiring just a 4-digit code sent to the registered email or mobile phone number.

fig: linking

We started by linking components within our pages, then linked the navigation bar component so it was consistent across all pages. We had a meeting to link everything at once, briefly reviewed the flow, and fixed any bugs. We also addressed some missing element issues and learned how to do horizontal scrolling from other group members who shared their tips and tutorials, which we greatly appreciated.

Usability Testing Questions:

fig: usability testing questions

After completing the prototype, we designed questions for the usability test. For faster results and accessibility, we used Google Forms and sent it to our friends, potential users, and previous respondents, gathering six valuable responses.

We combined quantitative and qualitative methodologies using a Google Forms questionnaire to conduct usability testing data collection. The questionnaire comprised four sections: User Demographics, Features & Functionality, Features & User Experience, and Usage & Recommendations. There were a total of 17 questions. For quantitative questions, we used linear scales, multiple-choice grids, and multiple-choice options. For qualitative data, we included short answer and paragraph questions to gather open-ended responses. 

Usability testing Google Form: https://forms.gle/zqq78DVeJKCDSuN76

Form responses sheet:

fig:  form responses sheet

The yellow highlighted are the changes made after we clarified the responses with the respondents, as they might faced some confusion while answering the questions.

Usability Testing Data Analysis:

fig: Usability Testing Data Analysis

The document above includes the analysis and summary of responses for each section. Based on the comments, suggestions, data, and feedback, we made amendments to the prototype via online meetings, focusing mainly on the itinerary, budgeting, and services pages.

Usability Testing Report:

fig: Usability Testing Report

Then, we compiled everything in the report, including the questions, data analysis and interpretations, conclusions, suggestions, potential refinements, limitations, and appendices.

additional progression

video demo editing:

fig: audio editing

Denoise and maintain the tone, and volume for all the voiceovers. Ensure smooth voiceovers, and cut all the unnecessary parts. 

fig: sync

Finally, compile the screen recording of the prototype with the voiceovers in Premiere Pro, and try to make it as short as possible, adding BGM to make it less boring.

Final Compilation Slides:

UX Design - Travello Final Presentation by Jiahui Leong

The slides above document this task, including all the recaps, changes made, and findings from the usability test.

Video demo:

Final prototype:

---

REFLECTIONS

Experiences

This stage of the project was intense and fast-paced, as everything needed to be rushed in one go. It was a crucial phase involving the execution, prototyping, and testing. In nearly four weeks, we completed the prototype, fixed bugs, gathered users to test it, made necessary changes, and organized all the information into a report. I particularly enjoyed designing the homepage and check-in page because I love working with colors and visuals, which made the process fun and playful. Despite the time constraints and stress, our teamwork, communication, and mutual support helped us finish everything successfully. I also enjoyed editing the video demo and doing some audio editing for documentation purposes.

Observations

I noticed that this stage required a lot of quick decision-making and efficient execution. The process of designing the homepage and check-in page allowed me to experiment with colors and visuals, aiming to make the app engaging and attractive to users. Positive reviews for the overall app and user engagement confirmed that our design choices were effective. The community page, though a bit less exciting for me due to its structured rules, was still an important aspect of the project.

Findings

Through this experience, I learned that even under tight deadlines and high pressure, effective teamwork and clear communication are key to successfully completing a project. The importance of prototyping, testing, and iterating based on user feedback became evident. Additionally, designing with the user in mind, focusing on visual appeal and engagement, can significantly enhance the user experience. I also realized my preference for working with visuals over text and enjoyed the creative aspects of video and audio editing.