In this task, we must develop an experience design
project based on a chosen topic, focusing on either
screen or physical space. We are required to create
a professional proposal that includes user
experience analysis, comparisons with existing
solutions, sketches, and mockups from the user’s
perspective. The goal is to demonstrate creativity,
a clear understanding of experience design, and the
ability to effectively communicate and break down
our ideas.
Week 5 In today's class, we continued
learning Unity by focusing on the coding aspect. I
learned how to link a button to the code so that
clicking the button triggers specific effects
based on the script written.
fig 1.2 Week 5 Class Exercise
We also learned how to insert a video as a pop-up
AR object. When the image is scanned, the designated
video will appear on the camera view.
fig 1.3 Script in Visual Studio
The coding is done in Visual Studio. It controls
the effect of the play button—when isPlaying is
false and the button is clicked, the video starts
playing. Then, the isPlaying will become true now.
This is the basic concept behind the logic.
fig 1.4 - 1.7 Script Screenshot
Here is a sample screenshot of the script and the
warning effect shown in Unity. When the click count
exceeds the predefined limit, certain effects that
we’ve set will be triggered.
fig 1.8 Graph Editor in Unity
We can also use the graph editor in Unity to
control and design specific effects for certain
objects. This provides an alternative method to
scripting for creating interactions.
fig 1.9 Week 5 Class Exercise Video
This video demonstrates that after clicking the
button three times, an explosion effect will be
triggered.
Week 6
This week’s class was held online. I followed Mr.
Razif’s instructions to learn how to create different
screens in Unity and navigate between pages by
clicking buttons.
fig 1.10 Week 6 Class Exercise Video
First, we learned how to navigate between
different screen pages. An important thing to
always remember is to add the screen page to the
build settings in Unity; otherwise, the page will
not appear.
fig 1.11 Week 6 Class Exercise Video Part 2
After that, Mr. Razif taught us how to create a
button that, when clicked, displays information.
He told us to make a button that closes the
information. Once we finished, we had to
demonstrate it to him as proof of attendance for
that day. I implemented two different methods: one
where clicking outside the information closes it,
and another using an 'X' button within the
information. When the 'X' is clicked, both the
information and the 'X' button close
together.
Task 2 Progress
fig 1.12 Progress in Google Docs
First, I wrote the project proposal based on my chosen topic, which is an AR road sign learning app. I conducted research on the topic and used the findings to write the introduction.
fig 1.13 News related to Road Sign
I discovered that some accidents in Malaysia were caused by confusing road signs. Therefore, I included this information in my proposal as part of the problem statement for my project.
fig 1.14 Road Sign Knowledges
Before creating the design style and app mockup, I researched the common road signs used in Malaysia. This helped me categorize them more easily and gave me a clearer idea of how to incorporate them into the interface of my AR app.
fig 1.15 Road Sign Categories
I listed down the six common categories of road signs in my project proposal to organize the content more clearly and support the structure of my AR app design.
fig 1.16 Progress in Canva
Based on my three target audiences, I created a user persona for each and designed a user journey map using Canva. After that, I identified the problems and pain points they faced, which helped me develop a new user journey map aimed at improving their overall experience and addressing those issues.
fig 1.17 Color Palette
For the color palette, I chose purple and yellow as the main colors for my app. I tested this combination using Color Hunt.
fig 1.18 Final Color Palette
However, after applying the color palette in Figma and testing it in the mockup, I made slight adjustments to improve the overall look of the interface. The original colors appeared too bright and were uncomfortable to view, so I refined the palette to create a more visually pleasing and comfortable user experience.
fig 1.19 Test font in Figma
I decided to use the Sora font for the app and tested it in the Figma mockup. Sora is optimized for digital screens, making road sign information easy to read. Its clean and modern appearance also complements SignAR’s AR-based and innovative concept, which is why I chose to use it.
fig 1.20 References in Pinterest
I researched on Pinterest to find inspiration for the AR app. The images I gathered reflect the style and concept I hope to use as references for my design.
fig 1.21 Wireflow in Miro
I noticed that previous seniors had created wireframes and user flows for their apps. Therefore, I decided to create a wireflow using Miro, based on what I had learned before. This helped me understand the structure of the app more clearly and allowed me to refine it before developing the final mockup in Figma.
fig 1.22 - 1.23 Below navigation bar
For the bottom navigation bar, I wanted to make the current page more noticeable. Initially, I tried using yellow to highlight it, but it looked out of place and didn’t match the overall design. So, I switched back to purple and added a yellow dashed underline to give it a highlighted effect while maintaining visual harmony with the rest of the interface.
fig 1.24 - 1.25 Comparison between real and illustrated images.
I used illustration images in my mockup instead of real-life photos. However, for the final version, I may consider using real-life images to provide users with a more authentic road experience.
fig 1.26 Mockup Progress in Figma
Here is the mockup for my AR Road Sign App created in Figma. I used the Android Compact frame to match the screen size of my phone.
Final Experiential Design Project
Proposal
AR Document Proposal
Click
here
to view the AR Document Proposal in Google
Docs.
fig 1.27 Project Proposal in Google Docs
Presentation Slide
Click
here
to view Task 2 Presentation Slide in Canva.
Click here to view Task 2 Presentation Video in YouTube.
fig 1.31 Task 2 Presentation Video
Feedback
Week 6
General Feedback Create a
single user journey map for the app
proposal without separating it by
different personas.
Reflection
Experience
Since I have experience
working on proposals before, I
already had a basic
understanding of how to
approach this project. By
referring to previous work
from seniors, I was able to
list down all the essential
components needed for the app
project proposal. This gave me
a clearer direction and helped
me identify the areas that
required further research.
One of the most important
aspects of this project was
developing the mockup. Before
starting the design, I
carefully considered the color
palette, typography, and
visual style. I followed a
step-by-step process that I
had previously used when
creating an app, which helped
me stay organized and
efficient throughout the
project.
My familiarity with Figma also
gave me an advantage. Since I
was already comfortable using
the tool, I was able to spend
more time exploring transition
effects between pages and
adding creative touches to the
interface design.
Observation
I observed that tackling
different design topics often
leads to new ideas and
perspectives. Each project
encourages us to think in
unique ways and helps us
develop new skills that will
be valuable in future work.
This continuous learning
process is something I truly
appreciate.
Learning to use new
applications also gave me more
opportunities to experiment
with different design outcomes
and expand my creative
thinking.
Findings
Through this project, I
realized that Augmented
Reality (AR) is becoming
increasingly popular and has a
lot of potential in the design
field. As technology continues
to evolve, AR is being
integrated into more user
experiences, creating new ways
to interact with digital
content.
From a design perspective,
this trend opens up exciting
possibilities. Designers now
need to think beyond
traditional screens and
consider how users interact
with 3D space and real-world
environments. Understanding AR
not only enhances our design
capabilities but also prepares
us to create more immersive
and innovative solutions in
the future.
Comments
Post a Comment