Labels

UX Design - Final Project / Prototype & Concept Testing

13.6.2025 - 25.7.2025 (Week 8 - Week 14)
Chong Hui Yi / 0363195
UX Design / BDCM
Final Project / Prototype & Concept Testing


TABLE OF CONTENT


LECTURES

Click HERE to view the lectures



INSTRUCTIONS


<iframe src="https://drive.google.com/file/d/1EYvr1G06s6Om4qImGGAXBcnukOjhsgEv/preview" width="640" height="480" allow="autoplay"></iframe>


Final Project: Prototype & Concept Testing

Instruction

"After finalizing task 2 and 3, based on the ideations, students are required to develop a prototype of a given project. Upon completing the product, students are required to conduct several iterations of user testing to specific target group in order to finalize the product or service."

Low-fidelity Prototype

In Week 8, we had an online group discussion to identify the key features of our app using the MoSCoW prioritisation matrix. Here’s what we selected:

  • Real-Time Classroom Availability Map: Colour-coded with green for available and red for occupied rooms.
  • Basic AR Navigation: Ground arrows and building labels to help first-time visitors find their way.
  • Crowd Tracking: Heatmaps that help users avoid crowded routes in real time.
  • Schedule Integration: Automatically suggests empty classrooms between classes.
  • Highlight Campus Map: Make the campus map more accessible through the Taylor’s app to raise awareness.
  • Filter Space by Type: For example, filter spaces by “Relax” or “Food” categories.
  • Quick Feedback Button: Allows users to easily report map errors or overcrowded areas.
  • AI Chatbot for Navigation Help: Offers instant support when users get lost.
  • Saved Routes or Favourite Places: Lets user
    s pin their most-visited areas for quick access.
  • Group Study Space Matching: Recommends suitable rooms based on group size and availability.
In our team, we split up the design tasks. I focused on designing the main category and the place listing page.

Fig. 1.0 Task Distribution

I initially sketched the main menu and the place listing page, where each location card includes information such as crowd level, location, opening hours, and facility tags.

Fig. 1.1 Sketches


I was in charge of designing the second and third screens in the wireframe (Fig. 1.2). Since each of us worked on different parts individually, Dr. Wong pointed out the lack of consistency in our design. For example, the top bar and back arrow were not standardised. She also mentioned that we could redesign the homepage of the original Taylor’s Campus App, as the current version appeared too cluttered.

Additionally, we decided to remove the classroom booking screen, as we don’t have the capability to implement that feature. Instead, we realised we could use the user’s real-time location in the Taylor’s Campus App to indicate how crowded each place is.

Fig. 1.2 Wireframe

In our low-fidelity prototype, we also unified the layout for classroom availability and relax areas. Besides that, I added filter options for relax areas.

Fig. 1.3 Relax areas filter designed by me


Fig. 1.4 Figma Low-fidelity Design File

Fig. 1.5 Figma Low-Fidelity Mobile Prototype

High-fidelity Prototype

When moving into high-fidelity, I started by setting up colour and shadow styles in Figma to make it easier to apply consistent styles across the design.

Fig. 2.0 Colour and shadow styles in Figma

While we initially planned for each team member to work on the high-fidelity versions of the screens they designed during the low-fidelity stage, Iman and I stepped in to help complete Kiya’s part due to a delay, so we could meet the deadline.

Fig. 2.1 Figma High-fidelity Design File


User Testing

For our user testing, we prepared two scenarios and tasks for the participants.

Scenario 1: Finding a Quiet Spot in the Library
Emily is a first-year student looking to rest at the library between classes. She doesn’t know the way or which floor is less crowded.

Task
Use the app to:
• Check the heatmap on Level 4 of the library
• Navigate to that floor

Scenario 2: Finding a Group Discussion Room
Jason and his group of five are planning a discussion session for their group assignment on July 20th at 2:00 PM. They need to find a classroom that is available at that time, fits five people, has a Smart TV for screen sharing, and includes a round table for better discussion.

Task
Use the app to find a classroom that:
• Fits a group of 5
• Is available on July 20th, 2:00 PM
• Has a Smart TV
• Includes a round table

Later, during Week 14, Dr. Wong gave us feedback that made me realise I had mixed up the structure. What we called “scenarios” were actually “tasks”, while the background story should have been the scenario. But we couldn’t change it anymore at that point.

I invited my two interviewees back to participate in user testing—one alumni and one current student. After recording their screen and observing their interactions, here’s what I found:

ALUMNI:
Task 1
  • Took 10s to find the campus navigation button
  • Confused by the title “Relax Areas” because the library was actually under Room Availability
  • Checked the filter under Room Availability and didn’t see “Library”
  • Took 1min 50s to find the library in the listing page
  • Took 40s to reach the AR navigation page, but wasn’t sure how to use it since it was a mockup
  • Completed in 3min 10s
Task 2
  • Completed in 1min 30s
  • Clicked on unrelated areas in Figma and was confused by the blue hint that appeared
  • Initially thought “Group Discussion” implied round table, but later adjusted filter
Feedback
  • Quite easy to use and straightforward
  • Hard to find the library at first because “Relax Areas” wasn’t clear
  • A search button would be more efficient, but it didn’t work in the prototype
  • The homepage map looked like navigation, which was confusing
  • Area types in the “Relax Areas” filter (quiet study, nap & chill, group hangout, green outdoor) weren’t clear
  • Font size was readable when tested on mobile

STUDENT
Task 1
  • Took 12s to find the campus navigation button
  • Took 40s to find Level 4 of the library
  • Completed in 1min 13s
Task 2
  • Took 13s to reach the Room Availability listing
  • Checked the list first, then opened filter
  • Didn’t select “Round Table” in the filter
  • Completed in 1min 27s
Feedback
  • The “What is AR” section could be replaced with a clearer “How to Use” explanation
  • The app gives a good impression, the UI is clean and straightforward
  • Design matches Taylor’s branding well
  • The homepage map was a bit confusing—assumed it would lead directly to navigation
  • Thought “Group Discussion” already included round table, so didn’t notice the separate option
Fig. 3.0 User Testing Key Insights from All Members


 Fig. 3.2 Final High-fidelity Mobile Prototype 


FEEDBACK

Week 9:

  • Inconsistent design elements across screens.
  • Top bar and back arrow were not standardised.
  • Suggested redesigning the original Taylor’s Campus App homepage because the current homepage layout was too cluttered.

Week 14:

  • Avoid using sticky note images (the left side of the affinity diagram slide), as they are repetitive and hard to read.
  • What we called "scenarios" in user testing are actually "tasks", so we have two tasks, not two scenarios.
  • Tasks should not contain direct instructions like “Check the heatmap on Level 4 of the library.” A more appropriate version would be “Find a quiet spot in the library.” Task 2 is fine.
  • In the prototype, some pages have a top bar that scrolls with the content. It should be fixed in place.
  • The notification button on the homepage is in an unusual position, it’s more conventional to place it in the top right corner.
  • The homepage currently contains too much information. There are four sections, and based on hierarchy, the campus map should appear last as it is not the most important.


REFLECTION

For our final project, I think we didn’t manage our time very well. We ended up doing most of the work at the last minute, and that made me feel quite stressed. I felt even more anxious when one of our group members still hadn’t finished her part. I was really worried we might not complete everything before the presentation. Luckily, we managed to finish it just in time. Right after we presented, I felt so relieved and much lighter.

Through this, I realised how important it is for a team to set a clear timeline and divide responsibilities properly. That way, we can avoid rushing at the end.

Even though it was a bit stressful, I actually found this task interesting. Redesigning the Taylor’s campus app was quite fun, and it didn’t feel too difficult, especially because I had teammates to share the work with.
Labels:

Comments

Post a Comment

Popular Posts