Today Mr. Razif introduced the class to the module of Experiential Design, a subject which a minority was familiar with. As typically with all other modules, we went through the guidelines, schedules, rubrics, and an overview of few projects along with the finals. We all then settled up comfortably and walked through how the module will be carried out via the new e-learning platform. As we settled up, Mr. Razif showed us the past projects done by our seniors as a standard to the expectation of the module. Going through each of the projects, he also explained the purposes, the rationale, and the feedback for how they could be improved. This quickly got us into the mindset or at least the rough idea of how the process should be carried out and a few key points to be mindful of.
Next up, we studied the definitions and misconceptions between UX (User Experience) and XD (Experience Design) through this website. To further understand the differences, our first task was to differentiate each of our senior's work into either UX or XD category. Lastly, Mr. Razif walked us through the process of installing the right Unity program and getting the right packages to install once it was setup. To end the session, Mr. Razif instructed us to prepare 3 rough ideas for a solution to improve UX/XD of anything we find by next week. "The best way to come up with a great solution is to try and solve the problems you face personally."
Week 2 | April 20th, 2020
Today’s lecture involves a further elaboration of the previous week’s introductory session, and we were shown a few killer AR use cases in the real world. Access the playlist here. We discussed further the differences between each individual type of XR (Extended Reality) with the addition of mixed reality:
AR (Augmented Reality) is essentially Layers of information on top of the real world.
VR (Virtual Reality) brings us to a completely virtual world, where new environments are generated in the space of the real world.
MR (Mixed Reality) is an extension of AR, which is the merging of real and virtual worlds to produce visualization physically interactable.
Week 3 | April 27th, 2020
Today's session was about a review of the previous user journey map exercise. After discussing the point we left off, we found that clarification was needed for further study on developing a strong AR solution to the scenario we've chosen. The majority of today's session was spent on our user journey map discussion and ways to improve it. The user journey mapping in scenario 3 is illustrated below in the exercises section.
Week 4 | May 4th, 2020
It was a week to catch up on the AR exercises we missed earlier. We started off with a tutorial session on setting up Vuforia on Unity, activating its license, and importing database to work on with AR camera.
Vuforia license key.
We went through the basic of 3d object overlay projection upon scanning a specific image what was chosen from the imported database of Vuforia.
3D cube projection on Unity.
We then learned to animate it and finally creating a simple interface as a start-up of the AR app. Here's a quick video on the process:
Week 5 | May 11th, 2020
There were no lectures today (holiday).
Week 6 | May 18th, 2020
We had a main tutorial session on the interface of the AR app. In an overview, we learned how to import custom buttons, give them functions, and animate their states. Here are the notes on the process which I have written during the tutorial session:
Button layout and composition.
Button functions.
Button codes.
Return from the options screen to the home screen.
Week 7 | May 25th, 2020
There were no lectures today (holiday).
Week 8 | June 1st, 2020
Today is the day for us to present the AR app proposal document that we've been working on in the last few weeks. As we presented, Mr. Razif gave feedback for us to further improve the app, which is to be presented in the second round the next week. The presentation slide and feedback are provided in the "Exercises & Projects" section below in this blog. Today was mainly a presentation session with a slight brief to the next step of the project.
Week 10 | June 15th, 2020
In today's tutorial session, we touched on the Vuforia toggle 3d object for the previous AR app exercise. We turned simple shapes from cube to spheres through clicks (not phone touches). Alternatively, buttons can be set so that user can tap/click on the button and choose the shapes directly.
Week 11 | June 22nd, 2020
There was a short lecture today about preparing our current proposal for the final work. Mr. Razif showed a few references from other school's project that relates directly to ours. We did a small study on that student's blog to understand the process of carrying out the AR app project of our own.
Week 12 | June 29th, 2020
We focused on completing the app we proposed earlier on our own this week. Since Mr. Razif have taught us the essential scripts for the basic features of the AR app, we were left to work independently and to prepare the app progress by the next class. Through the weeks, there were no lectures anymore, but Mr. Razif kept in touch with us through weekly progression checkup sessions.
EXERCISES & PROJECTS
Week 2 | April 20th, 2020
Following the lectures, our task today was to pick a customer journey map and analyze it in a group of two; I was tagged with Abby. Along with each touchpoint of the journey map, we have to identify its pain points and gain points to understand each process from the interactions of the user. My groupmate and I chose a common scenario based on our shopping experience in Japan. Going to the main center of the GU clothes store in Tokyo, we realized it was almost impossible to walk around and explore everything within few hours so the directory of clothes category is essential to this first step in shopping. We discussed together each touchpoint in the user/customer journey and formed the map as below:
Scenario 1: User journey map.
At the end of the discussion, Mr. Razif agreed to most of the points we’ve taken into account and shared his similar experience when shopping in huge malls. We then continued to discuss solutions to every pain points we’ve identified earlier in a table as shown below as an example:
Example of Proposed Solutions table.
The following is our proposed solution on the pain points from the user journey map.
Scenario 1: The proposed solution to the pain points of the user journey map.
Before dismissal, Mr. Razif informed us to think of a few other scenarios we could be working on in the next session and lastly, to find an AR solution on one of the particular touchpoints.
Week 2 | April 23rd, 2020
During our free time, Abby and I gathered up to work on the 2nd scenario of the shopping experience. This time, we moved to an online shopping experience. We began with a brief, followed up with a user journey map, then lastly proposed solutions on the pain points from the user journey. All of which are shown below:
Scenario 2: Brief.
Scenario 2: User journey map.
Scenario 2: Proposed solutions.
Week 3 | April 27th, 2020
The 2nd scenario we presented showed improvements in the progress and our understanding, but it wasn't enough for a great AR solution. Abby and I started off by researching on the hot topics of UX in fashion and its ideas. We both found that the clothes try-on app was the most popular among all the websites. They're in fact considered innovative in a sense of fashion in business. With that being said, there were not exactly original ideas to find out there (or else people would've implemented the idea already), so we thought through it until a solution visits our mind. We know that "original ideas" are just sometimes a fairy tale, so we tried to connect existing ideas to a new solution through our own experiences. That was when we came up with the 3rd scenario where the users want to customize his own design for a T-shirt, validate it, wear it on with AR, and decides whether or not he should buy it. The 3rd scenario briefing, user journey map, and proposed solutions are shown below:
Scenario 3: Visualising customized clothes brief.
Scenario 3: User journey map and the proposed solutions (in blue).
Week 4 | May 4th, 2020
This week I proposed my 3 XR ideas to Mr. Razif and discussed ways to improve the idea for the class proposal. Out of the 3 ideas, our conversation leaned more towards my third idea on the AR design prototype of wall paint design. Other than showing the final outcome, we added features such as "live guide" and slight animation, which was adopted by the existing AR idea out there. This helps make the AR more purposeful as a tool and engaging as a viewer.
Week 5-7 | May 11th - 25th, 2020
I continued to develop my ideas for the AR app and started working on a proposal for the upcoming AR app proposal presentation in the following weeks. I prepared all the steps as prepared on the experiential design guideline document. The following slide is attached as my first proposal for the GRAFFT AR application.
Mr. Razif seems to be content about the features and creative directions of the AR app, although he suggested that I make another user experience map or the process for the customers' point of view. He also pointed out that I should work on the stencil guide and animated AR part in the visualization part of the app mockup. Some of the complex ideas proposed may be hard to implement with codes, especially the automatic scale measure, however, Mr. Razif highly encouraged that best ideas should be proposed, as it is as important as the implementation. despite the limitations of our time and knowledge in programming or coding.
Other than the points stated above, the app is almost ready for its first startup, but it has to go through a round of reflection for further understanding and improvement on the features/function of the AR app.
Week 8-9 | June 1st - 8th, 2020
Upon the first proposal presentation, we were expected to have a reflection on the feedback that was given and work on it for the week. I tackled every problem that Mr. Razif told me. The main points are listed below:
Make user flow for the customer experience/interaction with the AR app in the restaurant.
Work on the wireframe for the customer interaction (wall graphics animation).
Work on the wireframe for the invisible stencil tracing feature for the designer/artist of the wall graphics.
I began creating a flow chart for the entire application to tackle the foundation of the AR app altogether. The following are my sketches and how plan my tasks.
Planning features for the AR app.
A flow chart on the "Create" feature of the AR app.
Wireframe for "My Projects" feature.
Wireframe for "View" and "Create" feature.
Week 10 | June 15th, 2020
We focused on the AR app exercises and learning the script for the Vuforia animation. The following is the work on switching 3d shapes on click command (this was before the addition of the 2 buttons for direct shape transformation).
Week 11 | June 22nd, 2020
After the short lecture that Mr. Razif gave about carrying out the AR proposal properly, I planned on how the app will be implemented in Unity on the sketchbook.
Figure 11.1. Wireframe and Visualisation update.
Figure 11.2. Planning for Unity.
Week 12 - 13 | June 29th - July 6th, 2020
I finalized the application and fully planned my Unity project concepts on my notebook this week. The following screenshots are my final wireframes on Figma. Looking at the middle page of figure 13.1. I designed a one-page home screen just in case the app might turn out with lots of technical issues on Unity. The final step before getting the app development stage on Unity is to prepare the assets on Figma and carefully export them to the right sizes and settings.
Figure 13.1. Wireframes of GRAFFT done on Figma.
Figure 13.2. Profile page. The 3 subsections are: Projects, About, and Views.
Figure 13.3. Create page (for artist and creatives). The 3 subsections are: Recent, Completed, and Ongoing.
Figure 13.4. AR camera page for viewing animations (for viewers).
Figure 13.5. AR camera page for mockup and stencil tool (for creatives and artists).
Week 14 | July 6th, 2020
This week, I spent hours learning more from Unity and familiarising myself with the software. It began with simple understanding of "UI" components such as canvas, buttons, etc, and learning how to scale it proportionally for a responsive application.
Figure 14.1. Designing the app UI on Unity.
After realising the limitations and time constraints from the current situation, I made the decision to display the home screen in one page. Since I was facing lots of technical issues such as understanding the C# language, I spent the majority of my time learning the basics of the language from scratch. It was one of the most challenging task considering the remaining days I have left.
Figure 14.2. New Grafft Home screen (one-page version).
Figure 14.3. Gallery page and assets.
Preparing Animation
Figure 14.4. Outlining Graffiti for animation on Adobe Illustrator.
Figure 14.5. Animating Funk Graffiti on Adobe After Effects.
Figure 14.6. Animating Dance Graffiti on Adobe After Effects.
Figure 14.7. Preparing Funk graffiti for sprite animation on Unity.
Figure 14.8. Preparing Dance graffiti for sprite animation on Unity.
Once the assets for the animations are done, I imported the completed sprite sheet inside Unity and set the animation state the match with the speed I wanted. These were the crucial steps for importing animation into unity (see the following photo for setting animation state).
Figure 14.9. Preparing the image targets with animator state (check right panel).
Week 15 | July 13th, 2020
We had a little extension due to the heavy workload from online classes this week. Week 15 is considerably a coding week for me. I spent days learning different C# codes to get my app functioning, and since it's impossible to show everything, the following are some codes that are helpful to the core features of the project.
Figure 15.1. C# script for exit overlays.
Figure 15.2. C# script for moving AR object in camera scene.
Figure 15.3. Compiled C# script for the project.
Figure 15.4. Compiled buttons in the Unity asset panel.
Figure 15.5. Build settings for the final progress.
Comments
Post a Comment