Experiential Design / Final Project
01.10.2023 - 09.11.2023 (Week 05 - Week 11)
Jacquline Lim Xin Ying / 0351304Bachelor of Design (Honours) in Creative Media / Games Studies
Experiential Design / Final Project
INSTRUCTIONS
Final Project
In the concluding task of the Experiential Design module, I need to
synthesize the knowledge acquired from prior stages to transform my
proposed AR app idea into a fully functional product. Building on the
conceptualization, design, and prototyping phases, this final step
involves integrating visual assets and refining the prototype for a
cohesive and immersive user experience. In order to improve aesthetics
and usability, I must strategically incorporate graphics, animations,
and user interface elements while addressing any identified shortcomings
through iterative improvements. The goal is to deliver a polished and
user-friendly AR application that embodies the principles of
experiential design, showcasing the evolution from concept to
implementation and a comprehensive understanding of design processes.
In the conceptualization of my design, I have structured it into three
distinct and significant sections, each serving a specific purpose:
Owner Info
It is dedicated to providing comprehensive details about the owner of
the profile or project, offering users a deeper understanding of the
individual or entity behind the content. This could include personal
or organizational information, fostering transparency and connection.
Social Media Profile Preview and Showcase
This the expansion of 'Owner Info' that is designed to offer a
snapshot of the user's social media presence. It aims to aggregate and
display key aspects of the individual's or project's online identity,
allowing users to quickly grasp the essence and relevance of the
associated social media profiles with the preview function before
actually going to the specific application or webpage. This not only
facilitates efficient information consumption but also encourages
cross-platform engagement.
Promote Project
It is geared towards highlighting and promoting a specific project or
initiative. This could involve showcasing visuals, descriptions, or
updates related to ongoing ventures, fostering visibility and
encouraging user interaction. By dedicating a section to promotion,
the design emphasizes the strategic intention of showcasing and
elevating specific content, aligning with the user's objectives and
enhancing the overall effectiveness of the platform. This section can
also be used for presenting the most proud artwork of the artist or
owner.
All designed component can be found in the section of 'Prototype in Figma' under
Task 3 (Creative Experience Design Project Prototype)
blog
[ Owner Info ]
|
| Fig 1 - Image Add |
An image that obtain a button component was added into the canvas which I have created earlier and insert the ‘owner info’ which include their name, title, contact number, and email address.
[ Social Media Profile Preview and Showcase ]
Fig 2.1 & Fig 2.2 - Icons Button Animation
Fig 2.3 & Fig 2.4 - Buttons Assignment & “SwitchSocialMedia”
C# Script
Through the three buttons, users may see a preview of the social media profile on click. By using the “SwitchSocialMedia” script, it allows me to change the preview screen when a different button(icons) is clicked. I assigned all the buttons and the game object which is the preview screen to the 'inspector' and each button will represent different game objects.
After running the app, all the game objects will be set to inactive,
but once user clicks on the
social media, the game objects
will be set to active and display the preview screen. To keep the the
interface clean, preventing from cluttered screen, I then apply
scrolling effect to do so. You may check out
my previous blog
for the details of the way to apply the scrolling effect.
Fig 2.5 & Fig 2.6 - 'Go Visit' Button Assignment &
'Linkmanager' C# Script
On top of that, I am also providing a button that directs users to
the social media platforms' official websites. Linking all social
media and blog sites utilizing the "Linkmanager" script, and call it in the
On Click() section for every
"View Sites" button.
[ Promote Project ]
|
| Fig 3.1 - 'Project' Button Assignment & 'Project View' C# Script |
In this section, I have a button labelled "View Project," which will show the project that the owner is currently working on that they wish to promote or showcasing their their most proud projects.
Fig 3.2 & Fig 3.3- 'Go Visit' Button Assignment &
'Linkmanager' C# Script
For the purpose of allowing users to navigate through the projects,
I have also included two buttons: the Next button and the Previous
button. Through the utilisation of the "C#" script, I will be able
to assign all of the images that we require to be displayed into the
inspector. By clicking the next button, the images will be displayed
in the order that they were created, beginning with index 0 (Element
0) and index 2 (Element 2).
|
| Fig 3.4 - 'view more' button and its linked panel |
|
| Fig 3.5 - 'view more' Button Assignment & 'Projectview' C# Script |
At the bottom of the project's interface background, there is a
hyperlink that says "view more." The hyperlink "view more" allows
users to view the project details. To create a preview that can
scroll to reveal the project details, I'm using an additional
canvas. (Write the previously written explanation regarding the
scroll view). In addition, to display the project details when the
"view more" button is clicked, I simply assign the "C#" script to
the button and call the Display() function in the On Click()
section. In order to enhance the usability, a "Close" script will
also be assigned to the close button that enable user to close the
project details panel.
[ Pinch & Zoom ]
The pinch and zoom feature was originally intended to help
users concentrate on the information they wanted to see.
However, since the user can simply move the phone closer to
view the content they want to read, the function was removed
from the prototype.
[ Printing ]
|
| Fig 4.1 - Business Card Design Progress in Adobe Illustrator |
My business card, which I created, is being printed up
so that it appears more legitimate. In order to ensure
optimal functionality, I had them printed in two
distinct sizes: 85.60 x 53.98 mm and 115.569 x 74.969
mm.
| Fig 4.1 - Final Business Card Design PDF |
Final AR Biz Exch Presentation
YouTube: https://youtu.be/uoLuekJHOmA
REFLECTIONS
From the initial idea to the finished AR app prototype,
constructing AR Biz Exch has involved an exhaustive exploration
of design principles and user-centric considerations. The
deliberate structuring of the app into three distinct sections,
namely Owner Info, Social Media Profile Preview, and Promote
Project, proved pivotal in catering to specific user needs.
Owner Info provides a comprehensive understanding of the
individual or entity behind the content, fostering transparency.
Social Media Profile Preview streamlines user access to relevant
online profiles with animated buttons, promoting cross-platform
engagement. The Promote Project section strategically emphasizes
and showcases specific projects or artworks, enhancing overall
visibility.
However, this journey was not without its challenges. As a
design student, venturing into the realm of AR app development
was outside my comfort zone, posing a significant learning
curve. Navigating unfamiliar software was a daunting task, and
my initial unfamiliarity with the intricacies of the technology
was a considerable hurdle. Overcoming this obstacle demanded
extensive research, browsing, and seeking tutorials. The fear
associated with my unfamiliarity was assuaged through
collaboration with classmates who provided invaluable
assistance. This collaborative learning experience not only
facilitated my understanding of the software but also marked a
significant improvement in my skills over time.
One of the most important aspects of improving the app's
usability and aesthetics was the incorporation of visual
elements like icons, animations, and images. Button animations
improved the user experience and added a sophisticated touch,
such as the fade-out effect. A key component in giving the
prototype functionality was scripting. The "SwitchSocialMedia"
script ensured a smooth transition between various social media
profiles by enabling dynamic previews based on user interaction.
Throughout the iterative design process, the interface was
refined for usability, as seen by the addition of close buttons
and scrolling effects to preserve a clutter-free user interface.
This experiential design project underscored the importance of
balancing complexity and simplicity. While advanced features
like dynamic previews and scripted functionalities were
incorporated, the app remained intuitive and user-friendly.
Clear navigation flows, coupled with direct buttons for social
media visits and a "View More" feature for detailed project
information, exemplified a thoughtful approach to user
interaction. The decision to remove the pinch and zoom feature,
deemed redundant given the user's ability to physically adjust
device proximity, demonstrated a keen understanding of user
needs.
In conclusion, the final prototype is not just a culmination of
technical skills but a testament to the iterative and thoughtful
evolution of an idea into an immersive AR experience. This
experiential design journey has deepened my appreciation for the
intricate interplay between design elements and user engagement,
reinforcing the importance of a user-centric approach in
crafting compelling digital experiences.
Comments
Post a Comment