Labels

UX Design / Final Project: Wayfinding - Vortex Lab


27.4.2023 - 29.6.2023 (Week 4 - Week 13)
Takuto Hozumi / 0354047 / Bachelor Of Design (Hons) In Creative Media
UX Design
Final Project (Group, Individual)

LECTURE

Week 6 UX/UI Empathy

Fig.1-1: UX Design Process

UX Design Process
1. Research = "MEET THE USER"
  1. User demographics
  2. Define user goals
  3. Define user challenges
  4. Define metrics & form hypothesis
2. Empathize = "BE THE USERS"
  1. User personas
  2. User scenarios
  3. User testing
  4. User experience map
3. Create = "DATA DON'T LIE"
  1. Usability tests
  2. Track usage
  3. Review metrics
  4. Inform next iteration
4. Test = "MAKE IT SIMPLE"
  1. Wireframes
  2. Moodboard
  3. Mock-ups
  4. Style guide
5. Develop = STICK TO THE DESIGN
  1. Usability tests
  2. Review metrics
  3. Track usage
  4. Inform next

User Analysis
Users can be identified in the following ways;

Fig.1-2: Target Users
Fig.1-3: Empathy Map
Fig.1-4: Persona Setting

User Persona Goals
  1. Context
  2. Humanizing Data
  3. Data informed instead of driven
  4. User focused experience
  5. Return and Retention

Fig.1-5: Customer Journey Map




INSTRUCTION

Week 4 Brief Explanation for Final Project

What is Wayfinding?

Wayfinding is the process of navigating through physical spaces, such as buildings or public areas. In UX design, wayfinding is used to help users navigate through digital interfaces in a clear and intuitive manner.  It involves using visual cues and environmental information to orient oneself and move from one location to another. Wayfinding can be aided by signage, maps, landmarks, and other navigational aids. It is an important aspect of urban design and architecture, as well as event planning and other fields that involve organizing and managing large gatherings of people. Wayfinding is also an important consideration in UX design, where it is used to help users navigate digital interfaces in a clear and intuitive manner.

Wayfinding is an important aspect of UX design because it helps users navigate and understand complex environments more easily. In other words, it is the process of providing clear and concise information to users to help them find their way to a specific destination. Effective wayfinding can help reduce frustration, anxiety, and confusion, and increase user engagement and satisfaction.
 
In the context of UX design, wayfinding can include a variety of elements such as visual cues, maps, signs, and labels that guide users through digital interfaces, websites, mobile apps, and physical environments. By incorporating effective wayfinding principles into the design process, designers can create intuitive and user-friendly experiences that enable users to achieve their goals quickly and easily. Ultimately, this can lead to increased user satisfaction, loyalty, and retention.

For Wayfinding Implementation

Here are some ways wayfinding can be implemented in UX design.

Clear Navigation: A clear and intuitive navigation system is essential for helping users find their way around a digital interface. Navigation elements should be easy to find, well-organized, and labeled in a way that makes sense to the user.
 
Consistent Design Language: Consistency in design helps users understand and navigate a digital interface more easily. Elements such as color, typography, and iconography should be consistent across the interface.
 
Feedback: Users should receive feedback when they interact with elements of the interface. Feedback can take the form of animation, sound, or visual cues, and helps users understand that they have successfully completed an action or reached a new page.
 
Information Architecture: The organization and structure of content within an interface should be intuitive and easy to navigate. Information should be grouped logically and labeled in a way that makes sense to the user.
 
Accessibility: Wayfinding should be accessible to all users, including those with disabilities. Designers should consider factors such as color contrast, font size, and screen reader compatibility when designing interfaces.
 
Overall, incorporating wayfinding into UX design can help users navigate through digital interfaces with ease, creating a more pleasant and efficient user experience.

Final Project Outline

Scenario
Visitors to Taylor's University often get lost or confused while trying to find their way to the Vortex Lab, which is located on campus. Despite the presence of signage, many people have difficulty navigating the maze-like corridors and locating the lab. This can be frustrating for visitors and can lead to delays in meetings or appointments.
 
Project Brief
The objective of this project is to improve the user experience (UX) for visitors to Taylor's University who are trying to find their way to the Vortex Lab. The project will involve designing a signage system that is clear, concise, and easy to follow. The signage should be visible from a distance and provide clear directions that are easy to understand.

Group Formation

I was assigned to Group C. The members are as follows.
  1. Chan Meiling 
  2. Chang Jia Yee 
  3. Yong Li Qing Vernice 
  4. Lim Jia Yet 
  5. Takuto Hozumi

Assignment Progression

W4 - Interview 1

We would interview in W7 as a qualitatively research to professionals. Therefore, as a preliminary step, we interviewed students and non-teaching university staff in W4. This also serves as an interview practice.

Fig.2-1: W4 Interview Question

We actually went there and investigated why it was so hard to locate.

Fig.2-2: Vortex Lab (Actual Place)

It was under construction that day, but even those of us familiar with college campuses took a bit of time to actually reach this location. First, if visitors proceed in order from the ground-level entrance of the university, they will generally reach the first floor, which is the main area in this E building. However, the lab is below farther. And what the logo on the door indicates will not be clear to those who are unaware of the fact that this is the Vortex Lab.

Fig.2-3: Question List based on 5W1H

Interviewee 1: Izwan
Fig.2-4: Interview Result 1

Interviewee 2: Lokeyan
Fig.2-4: Interview Result 2

We compiled the MIRO board after the interview, based on the recordings, as illustrated above. In the next class, their attributes will be analyzed and the data will be used to set personas, etc.

Week 5 - Public Holiday

Classes were not open for public holidays.

Week 6 - Interview Data (W4) Analysis and Prepare Question List for W7 Interview

We did the segmentation in four aspects such as geographic segmentation, behavioral segmentation, psychography segmentation, and demographic segmentation based on our interviewees from week 4.

Fig.2-5: Segment matrix - Interviewee 1

Fig.2-6: Segment matrix - Interviewee 2

A list of questions was prepared for interviews with professionals the following week.

Fig.2-7: New Question List for W7

Week 7 - Interview 2

This week, an interview was conducted with Mr. Faisal Athar Mohd Fadzil who is an XR specialist in the Vortex Lab. He gave us a detailed account of what the Vortex Lab actually does, based on his own experience with the lab.

Fig.2-8: Interview Auto Transcription

This is a transcript of the interview. Since this is an audio transcription extracted from the recording using Otter, many of the actual words are incorrect. I saved it as a record of the content. *The data for the analysis was compiled by listening to the original audio data and compiling the correct information.

Fig.2-9: Summarizing Key Points

The images are small in text, so the text is written below.

Q1. (show picture) Is this Taylor's Vortex Lab logo?

Fig.2-10: Figure for Q1

Mr. Faisal: Yes

Q2. If yes, should this visual elements included into the design?

Mr. Faisal: Yes, the design looks good but when it presented to me in the first stage, I was questioning like how it going to be use if i use it on the website, tab. If u see our logo that have lines and what not, very detailed, its look good when it is big enough, when it skill down become smaller, it become hard to render, and not that obvious. If you see like chrome logo, they make them like simplify even how big the scale of the icon it still retains its feel and look, like google drive basically the three colour triangle and apple logo. They are certain logo especially the logo with text, when you open your browser you see those text that typically icon, so you imagine our icon over there, it won’t looks nice, looks very noisy.

Mr. Faisal: So the sign cannot be too small because it wont look nice from the far, people won't recognise it from far. That why we will accompany the logo with the title, you can see infront of our studio, our main logo actually is the title itself, usually that icon accompany with text, so when they together will be more prominent because the typography itself is more prominent than the logo.

Q3. How frequently do you use Vortex Lab and its facilities?

Mr. Faisal: As the XR specialist, I'm at there everyday basically and technically depending on the booking, I will basically assist and lend a hand on how utilise the place. If there's no booking we would basically utilise it for our research or for our content creations, like basically utilise the XR stage for our own testing and doing our own conshows or why not even the VR headset we try to utilise it and explore experiences and we do assist in some developments with some of our interns and XR clubs members and what not....technically quite frequent in the nut shell.

Q4. How do you navigate to the Vortex Lab for the first time? Have you ever had to ask for directions or assistance when navigating to Vortex Lab or any of its facilities?

Mr. Faisal: Regarding the question, the first time I came here, I was using the open car park which is the student car park, so from there I was told it was on Block E. Technically when I started, Vortex was not even there, that was somewhere else, you won't really know, temporary office. Basically I will find the block first, find where is Block E then find where is the ground floor and then I was told after the engineering and beside the laboratory so I kind of finding that as my landmark.

Mr. Faisal: No, I think that question could not apply to me because i start before it was being build more or less

Q5. Does anyone come to visit the Vortex Lab out of curiosity?

Mr. Faisal: Yes, a lot.

Mr. Faisal: A lot of people do they either contact us asking where is the lab because they just want to visit and there's some people they just casually open the door out of curiosity for some reasons because every other doors have windows and our's door has no. So they were curious about this place, and we are doing shooting, I like what "yes, may I help you?" So there's that. Ya we tend to get visitors a lot everyday.

Q6. Have you ever had difficulty finding your way to the lab? If for visitor, can you describe the experience?

Mr. Faisal: I don't think I have encountered any difficulties finding it because I kind of like knows where is it.  

Mr. Faisal: For visitors, Yes. For some reason, even though there have a huge signage out there, they don't really see it because they are not looking for that, their eyes are not searching for that. I think they are finding the class name like D3.12 at every door. 

Mr. Faisal: Vortex Lab door have that, but for some reason it's unnoticeable. So for people who are not familiar with taylors, we would need to navigate them to the block depending on where they are, either they park their car on block A, or at the open car park.  

Mr. Faisal: Some people couldn't see the vortex lab even they are standing there outside , so yes there are difficulties for people on finding the way to the lab.  

Q7. Where do you think the signage of the Vortex Lab should be placed to be more visible?

Mr. Faisal: Basically at the hallway itself directing the way of the lab. It's like in front of the door on the top of the hallway that just pointing at the lab's door which some of the hallway has that too. I would say is the best position.  

Q8. What do you think of the current way finding system in the lab? Is it effective in guiding you to where you need to go?

Mr. Faisal: Current wayfinding, you mean existing signage. I don't think there are signages for Vortex lab. 

Mr. Faisal: The only time there are signage for Vortex lab is during open days, there has like the special signs that says 'Vortex over here' that guides people from the grand hall. And usually people would able to find Vortex lab through that.  

Q9. Are there any specific suggestions you have for improving the wayfinding system in Vortex Lab, or any other aspects of the user experience that you think could be improved?

Mr. Faisal: I would add all of our name on the signages, that would be one.  

Mr. Faisal: I think like the first floor has like those colour lines going wherever, I would like to have like one line for us, directly until our place (vortex lab), but obviously that's a personal request but why not, since we are kind of like the selling point, for promoting the lab.  

Q10. What factors did you consider when choosing the colours for the wayfinding system?

Mr. Faisal: Okay, that's a question. Because that depends on a lot of factors. Depends on like, where the signage is are on what Alou is the existing signages. Or like, if it's lying on the floor, or color of the line on the floor, because apparently, it's not exactly synchronized in tailors. Some floors are that Hello, some our floor is white. Some floors are not exactly those two colors as well. So there is that inconsistency. So if I were to choose a color, it would not look the same on all different surfaces. What if it's on the signage, I think roughly all of our signage is are the same backdrop, which is dark green, for now. So something light, no. Why would the handle red? That's basically a whole color theme. Because our logo is basically white, white and red. On dark. Yes, yeah. That light that comes back to the question of the logo design, like I said, because our logo is basically just full of lines, if it's a lot more solid on the edges, if it's then I have an outline I can work with I can place that out that anywhere. It's like basically you see the unreliable the you can literally anything, but because you have that it kind of makes placing it a lot easier for anybody. So it depends on the design.  

Mr. Faisal: So if it's like by stick Apple design, they don't really have an outline, or like a box or whatever but because the design itself is already simplified, like so it's kind of like it's still retains its identity regardless of where you put it as long as it's funny like on a clean surface and whatnot but compare that to like maybe I don't know Asus Toyota all of them basically share the same design message that is it has to be clean edges so that you want to put it anywhere it's a lot easier and because because I compare that with Galleria like this because gallery in this particular logo is why right so you need more space to put that logo right you can you need to consider like okay, do I have enough of what horizontal space for that but if it's kind of like just going to buy to ratio, whatnot it's a lot easier for you want to place it anywhere because you don't really have that much space. But because of that as well the design itself needs to be bold enough to be place even though it's if it's located in the small area. The outline outlook of it still obvious  

(Interview End)

Subsequently, analysis of the previously described methods was performed.

Fig.2-11: Target User

Fig.2-12: Empathy Map

Week 8 - Idea Exploration (Self-directed Task)

Based on the data collected and analyzed so far, students come up with ideas for a Way finding system. From this stage, the task becomes individual. Wireframe design, mood board, and mock-up are required. Below is my idea.

Idea Overview
QR code stickers will be placed in some locations in the university.
(*Locations where stickers will be placed will be determined by research results.)
When a visitor reads the QR on the sticker, a wayfinding system will be activated on their phone. (on a browser or App) 

Contents to be included on the stickers;
  • Name of current location
  • QR code to enter the destination
  • QR code for downloading the App (*low priority, if it's mobile app)
  • Explanation that it is a guide map

Stickers should be simple. Add a pin-like icon to indicate directions?

Mood board
Fig.2-13: Sticker Design Reference 1

Fig.2-14: Sticker Design Reference 2

Fig.2-15: Sticker Design Reference 3

Fig.2-16: Navigation System Design Reference 1

Fig.2-17: Navigation System Design Reference 2

System
  1. Scan QR code to get current location.
  2. Enter your destination.
  3. The system finds a route to destination.
  4. If the destination is on the same floor as the current location, direct guidance is shown on the map.
  5. If the destination is on a different floor from the current location, directs the user to the nearest elevator to the destination floor→shows direct guidance to the destination.
  6. If the destination is on the ground floor of a building different from the current location, the system guides the user to the nearest elevator and then to the ground floor→General map guidance→Direct guidance is shown when the corresponding building is reached.
  7. If the destination is not on the ground floor of the same building as the current location, the app will direct the user to the nearest elevator and then to the ground floor→General map guidance→Guidance to the elevator once the building is reached→Direct guidance from the desired floor is shown
  8. The app automatically exits upon arrival.

Of course, this system may not be the shortest distance for some routes. For example, it may be easier to take the stairs on some floors. However, the target user of this system is not the person who is so familiar with the map of the campus.

Would a program running in a browser rather than an app provide a better UX for visitors?

Application Architecture
  • Home (Includes QR reading camera)
  • Enter the Destination Screen
  • Floor Map Page
  • Entire Campus Map Page
  • Goal Screen (When you reach the destination)
Wireframe was designed based on the architecture.
Shown in Wireframe section below.

Points to consider 1
Pros of Mobile App
  • Mobile apps run quicker.
  • Mobile apps have a more flexible layout.

Cons of Mobile App
  • First-time visitors are required to download the application.

Pros of Browser Program
  • No need to download, it can be used as-is just after loading with any QRscan camera.

Cons of Browser Program
  • Program behavior is too dependent on the browser and OS
  • Possibility of errors

Points to consider 2
This concept is wayfinding for the entire college, and would no longer be a project limited to the Vortex Lab.
It will be a university-wide navigation app.
Need to confirm whether it is okay as this for the final project.

For example, Mr. Faisal answered white or green in the interview about the theme color of the lab.
However, I think that in this case the university's standards should be followed and it should be black and white and red.
Like this, there is a possibility that some contradictory decisions to the findings from the interviews could be made.


Mockup
Sticker design (placed on campus)

Fig.2-18: Sticker Design 1st Draft

Should contact number be included…?

App icon / Logo
Fig.2-19: Icon / Logo 1st Draft

The Taylor's logo was mixed and arranged with the arrow design (which means “Navigate”). There is room for consideration of fonts, etc.

Wireframe
Fig.2-20: App Wireframe

More details can be found on the MIRO board below.


Week 9 - Progression Check & Prepare Recorded Presentation

Based on the project ideas developed in W8, the following feedback was received.

Both mobile apps and browser programs can be used for way-finding, and the choice depends on various factors.

Portability: If you need to navigate while on the move, a mobile app is typically more convenient as it can be accessed directly on your smartphone or tablet. You can carry it with you wherever you go.

Accessibility: Mobile apps often provide better accessibility features, such as GPS tracking and turn-by-turn directions, which can be crucial for efficient way-finding. They can leverage the device's sensors and location services to offer real-time guidance.

Offline Capability: If you anticipate situations where you might have limited or no internet connectivity, a mobile app can be advantageous. Many navigation apps offer offline maps, allowing you to navigate even without an active internet connection.

User Interface and Experience: Mobile apps are designed specifically for smartphones, so they tend to offer a more user-friendly and optimized interface for touchscreens. They often have intuitive gestures and features tailored to mobile usage, enhancing the overall user experience.

Compatibility: Browser programs, on the other hand, have the advantage of being accessible from any device with an internet connection. They can be used on desktops, laptops, and even mobile devices without the need to install a dedicated app.

Cross-Platform Support: If you require your way-finding solution to work seamlessly across different operating systems (e.g., iOS, Android, Windows), a browser program with responsive design can be a better choice. It eliminates the need for developing and maintaining separate apps for each platform.

Ultimately, the best option depends on your specific needs and preferences. If you prioritize portability, real-time tracking, and offline capability, a mobile app might be more suitable.

Also, the following project exists as a similar case study for reference.


Final Project Proposal: Individual Project
After review, it was decided to propose the proposal in a mobile application. And accordingly, I completed the final version of the design and created a presentation for the proposal.

Visual Design
Fig.2-21: App Icon (Final)

Fig.2-20: Sticker Design (Final)

Presentation Video
Fig.2-21: Recorded Presentation (5/6/2023)

App Screen Design
Fig.2-22: Start Page

Fig.2-23: QR scan

Fig.2-24: Enter Destination

Fig.2-25: Search Results

Fig.2-26: Campus Navigation

Fig.2-27: Floor Map Navigation

Fig.2-28: Goal Page

UI created in: Figma

Survey for user test: Google Form

Week 10 - Design Critic & Progress

During the week, a progress check was conducted. Received feedback from the lecturer and will incorporate into my project. The received feedback is below;

"Outstanding progress! As always, you have done an excellent job. Your work continues to impress me, and I appreciate the effort you put into refining your project. With such positive progress, I believe you are now ready to share your work with a wider audience. Don't hesitate to distribute it among a larger group of people even though 15 - 20 participants were enough. Your findings and insights will surely benefit many."

On top of that, I also received some pragmatic feedback, such as changing the questions within the survey to a form that can be answered on a 5-point scale.

Fig.2-29: Survey Questions (Final Ver.)

Fig.2-30: 5-Point Scale Questions

This survey was sent to students attending Taylor's University through my acquaintances and to other interested parties. Beginning with the demographic study, then participants will see and evaluate the concept and flow in the prototype introduced earlier.

Although the implementation period was only about a week, it was able to reach a total of 24 people (over the minimum requirement of 20 for the assignment).

The results and interpretations are as follows;

Fig.2-31: Demographic Study Question 1

Fig.2-32: Demographic Study Question 2

Fig.2-33: Demographic Study Question 3

Fig.2-34: Demographic Study Question 4

Participants were primarily college students, with more than 90% in teenage to 20s. The male/female ratio was about even, mainly undergraduates.

Fig.2-35: Demographic Study Question 5

Fig.2-36: Demographic Study Question 6

The period of time attending the university varied from three months to a year, but interestingly, 66% of students said they had gotten lost on this campus. This result indicates that the structure of this university is complex, in other words, poor UX.

Fig.2-37: Design Study Question 1

In the survey regarding the app, I received high marks in almost all categories, including app concept, user flow, UI design, Icon/Logo design, and sticker design.

There were a few but low evaluations of the navigation system. This may be due to the unclear navigation design. Therefore, when moving this application to the implementation stage, we must carefully decide which API to use and what screen design to use.

Fig.2-38: Design Study Question 2

It also received high marks in many areas from a convenience standpoint. However, some respondents said they would not use this application even when it is released. In light of the demographic data, it was analyzed that the reason for this was that they have already been familiar with this university for almost a year, so they are already good at the campus map.

Although there were only 23 participants, because of the period of the module, still a small number to call statistical data, I hope I have proven the usefulness of my proposal.

Week 12 - Presentation & Feedback

Fig.2-39: Image of use

In Week 12, we did a presentation in the Vortex Lab with the Vortex team, including Mr. Faisal. I was chosen as one of its presenters.

I could have chosen to present a recorded version or an actual on-the-spot presentation, but I opted for a recorded presentation. The full version of the presentation video, which added the survey results and analysis to the Proposal Presentation, is below.

Fig.2-40: UX Design / Final Project: Individual Project Proposal Presentation Final ver. (21/6/2023)

In response, the feedback received was as follows;
If this feature were to be made into an application, it would naturally be downloaded to the visitor's smartphone. However, after a few uses, it is expected that they will stop using the app. App design should be considered for continued use. For example, as an idea, update information about events held on campus. If the app can be used to provide directions to the area where the event is taking place during the event, it could be a benefit for the user, and an incentive for users to use the app on a regular basis.

I'm writing my findings based on the feedback. This app could be considered for further development with the addition of event information. A function that displays a list of current events would be even more convenient for users, and would also contribute to attracting visitors to the events themselves.

My initial idea was to only include classrooms, halls, and facilities. However, it can also encompass all the various counters, restaurants, convenience stores, and other stores on campus. For example, suppose you want to make a reservation through Campus Central to visit the international student counter. By placing a button on the screen after making a reservation that links to Campus Navi and starts providing directions, smooth guidance will be possible. This could be an idea to enhance UX for students.

This presentation was a good opportunity to think more deeply about this project.

REFLECTIONS

Experiences
In this assignment, using the problems faced by the actual Vortex Lab location as a scenario, we discussed a navigation system that would enhance the visitor's UX, and each student proposed his or her own solution. In our initial research, we discovered that many people did not know where the Vortex Lab was located. In fact, even students in our class did not know the Vortex Lab existed. Therefore, we conducted further qualitative research with Mr. Faisal, who is familiar with the Vortex Lab, and analyzed it. In the end, I came to my conclusion that the directions for the Vortex Lab alone were not sufficient to improve the UX of the entire campus, and decided to propose an overall directions app. The lecturer allowed me to proceed with this idea, so I wireframed and designed a prototype.
    Observation
    The presentations showed the individuality of each student's ideas. I was able to see a variety of ideas that I had not thought of, ranging from orthodox signage design ideas to unique attempts to follow the Vortex Lab concept and include AR experiences through games in road guidance. Given that there are so many possible solutions to a single scenario of "clear directions to the Vortex Lab," one can only assume that the options for an actual product, app, and service development in real are myriad.

    Findings
    I believe that what we have learned throughout the entire module UX Design, is basically summed up in the first lecture, Usable, Equitable, Enjoyable, and Useful. Planners and designers give shape to ideas, but it is meaningless if they are the product of self-indulgence. They are required to obtain feedback from target users as appropriate and make it objectively useful. Before learning, I thought UX was a concept that applied primarily to the IT industry. Because it is often described as "UI/UX" and that is inevitably the impression I had. However, as I continued my research, I learned that it is a concept that can be applied to almost any field, not only from mobile apps, and websites, but to other non-IT related services, real products, buildings, and even food. Improving service leads to the pursuit of profit. It might be difficult to set the processivization of UX design because the measures to be taken are vary depending on the given topic. However, I intend to apply the "concept" learned in UX Design module hereafter.
    Labels:

    Comments

    Post a Comment

    Popular Posts