Android App for jewelry visualisation based on unique ... · used to change people’s attitudes or...
Transcript of Android App for jewelry visualisation based on unique ... · used to change people’s attitudes or...
1Jewelpark AG App
Android Appfor jewelry visualisation
based onunique Augmented Reality
experience
Link to website:http://www.deleklub.dk/html_customized/JewelparkPage/index.html
Download Jewelpark App:https://drive.google.com/open?id=1SWaUeAjzLKT6ePxv3qABxB-yiqBEobkq
Download Catalog:https://drive.google.com/open?id=1JaBdRRQ-RkqidJttb2mwULo2SJtR1MV2
Olga Batrakova
2Jewelpark AG App
Olga Batrakova
KEA / Multimedia Design / 3-d semester Interactive 3D E17
3Jewelpark AG App
Content:
4 – Goal of the project4 – The Double Diamond Approach5 – Desk research and comparative analysis5 – Target Group6 – Persona7 – Paper prototype8 – Persuasive design9 – How to create Augmented Reality App? 9 – About Vuforia
10 – Jewelry Catalog Page with the image target
11 – Materials
12 – Light
13 – Code in C#
13 – Audio Source
14 – Lean Touch Asset
14 – Conclusion15 – Sources
4Jewelpark AG App
Goal of the projectThe goal of the project is to create an AR Android App for jewelry visualisation that gives our potential customers new unique user experience and allow them to look at the particu-lar jewelry more presizely and in more detail.
Jewelry marketing strategies often rely on expensive catalogues with impeccable pho-tography of rings, bracelets, necklaces, earrings and such. However, the customers would feel much better if they knew this particular jewelry design suited them. They could look at the particular ring in three dimensions, from different sizes, scale it and see the play of light on the diamonds.
Using augmented reality allows us to bring virtual objects to the real world. In this way, a marker-based augmented reality app for smartphone owners can turn all items of catalogs into 3D animated models. In jewellery it’s all about presentation and showcases. People only have to point their mobile devices onto the showcases.
The Double Diamond Approach
In my UX Research I use the Double Diamond approach in order to understand customers’ problems and find creative ways to solve their problems. Using two different types of think-ing - divergent (think broadly) and convergent (think narrowly) - is an effective way to find the right solution.
5Jewelpark AG App
Desk research and comparative analysisAt the beginning of the project I made a desk research in order to find similar concepts already existing in reality. The table below helped me to understand what functionality my app should have.
Target GroupWomen between 25 and 55 years old with big interest in jewelry in general, new design tendencies and technologies; active users of smartphones and SoMe.
Name Link Visual Design
User friendly
Architecture Functionality
Shop4Rings http://tryon.guru/jewel-ry#aboutapp
modern ja simple and clear
clear
TryLive for Eye-wear
http://www.trylive.com/demos
modern ja simple and clear
clear
Pandora Jew-elry
https://play.google.com/store/apps/details?id=net.pandora&hl=en
modern ja simple and clear
clear
TOUS Jewelry http://www.tous.com/
modern ja simple and clear
clear
6Jewelpark AG App
Persona / Anne MøllerAge: 45 years
Employment: Municipal employee
Residence: Bagsværd
Marital status: Married and have a son of 18 years
Goals / needs
Anne has always been interested in high quality design and jewelry in particular. She likes to go to art exibitions, she uses her smartphone to make photos and communicate on SoMe. Recently Anna discovered IKEA AR App for interior planning, and she thinks that is great.
Likes
• Simplicity and intuitivity in digital solutions
• She has almost everything on her mobile device - payments, messengers, books etc.
• Likes to have a possibility for shopping research - compare colors, textures, try all possi-ble combinations.
Dislikes
• Dependency of her smartphone.
• Having to buy jewelry for herself - that is not so romantic. Sometimes she would prefer if her husband ‘surprises’ her with a gift of a ring or a bracelet.
Anne is looking forward to create a wish-list for her husband in order to ‘help’ him not to make a mistake in making such surprise. My App should help her to make this wish-list.
7Jewelpark AG App
Paper prototype
8Jewelpark AG App
Persuasive designIn my design solution I used persuasive design principles. An example is ‘Add to Cart’ but-ton in the App. Persuasive design supports the company’s business goals. It is a technique used to change people’s attitudes or make them perform certain actions.
What is Augmented Reality?Augmented Reality is a fast growing technology with a lot of possibilities for the future market. Augmented reality is often compared to virtual reality, but in fact they are two different technologies. Augmented reality is creating a virtu-al layer on top of reality. It could be scanning the barcode of a package with your phone or tablet and have the product appear in front of you like a hologram. In other words: You are inserting something virtual into the real world.
“Augmented reality is increasing in popularity with both Apple and Google releasing their own AR developer kits.
AR superimposes virtual objects in the world around us enabling us to mix reality with fic-tion in images viewed on a smartphone, tablet or through special goggles.
Experts predict the AR market could be worth £122 billion by 2024”.
BBC News / 2 oct. 2017
http://www.bbc.com/news/av/technology-41419109/what-future-for-augment-ed-reality
9Jewelpark AG App
How to create an AR App?I used Unity 2017.3 to create my Augmented Reality App. In order to make it working it is important to install Vuforia plugin.
About Vuforia
https://library.vuforia.com/articles/Training/getting-started-with-vuforia-in-unity-2017-2-beta.html#betas
Vuforia is a software platform for creating Augmented Reality apps. Developers can easily add advanced computer vision functionality to any application, allowing it to recognize im-ages and objects, and interact with spaces in the real world. The Vuforia platform supports AR app development for Android and iOS devices.
Process:• Create Vuforia account
• Create a new Unity project (3D project set-up)
• Activate Vuforia in your project (Player Settings / “XR Settings”)
• Add an ARCamera
• Delete the default Main Camera after adding an ARCamera
• Import Vuforia License Key and image target database
• Project 3D Model on top of image target
• Install Android Studio and import Android SDK inside Unity
• Install JDK (Java Development Kit)
• Build and run the AR App
Model of the ring (.fbx) Image Targethttps://www.turbosquid.com/
10Jewelpark AG App
Jewelry Catalog Page with the image target
11Jewelpark AG App
Materials
Gem Shader Asset (for the diamond)https://www.assetstore.unity3d.com/en/#!/content/3
Basic Metal Texture Pack Asset (for the ring)https://www.assetstore.unity3d.com/en/#!/content/37402
12Jewelpark AG App
Light
Three point lighting
Three-point lighting is a very common lighting technique used in cinematography and photography. Three-point lighting is a very flexible technique and it can be used to illuminate the subject in an attractive way. Three-point lighting consists of three separate lights which can be used to control the lighting, shading and shadows of the subject.
The Key LightThis is the main light used on your subject.
The Fill LightThe purpose of this light is to fill in the shadows created by the key light, preventing them from getting too dark.
The Rim LightThis is used to separate the subject from the background.
KEYType: DirectionalIntencity: 10
RIMType: DirectionalIntencity: 2
FILLType: DirectionalIntencity: 4
13Jewelpark AG App
Code in C#
In order to make a rotation of the ring I used C# code that you can see below.
This script has to be attached to the particular Game object (in my case ‘Ring’ ) by clicking the button ‘Add component’ in Inspector.
Audio Source
How to create a new Audio Source:• Import your audio files into your Unity Project. These are now Audio Clips.
• Go to GameObject->Create Empty from the menubar.
• With the new GameObject selected, select Component->Audio->Audio Source.
• Assign the Audio Clip property of the Audio Source Component in the Inspector.
14Jewelpark AG App
Lean Touch Asset
In order to handle gestures (Scale in my case) I used Lean Touch Asset that you can see be-low.
https://www.assetstore.unity3d.com/en/#!/content/30111
Conclusion
My task is to propose a new AG Android App that gives the target group more visual infor-mation about a particular jewelry. Through the App a potential customer gets a possibility to look at the product from all angles, scale the product in order to see more details and estimate play of light on the diamonds. With other words my App can solve some of a cus-tomer’s problems when she has a lack of visual information about the particular jewelry.
I think that using paper catalogs in combination with Augmented Reality holograms will in-crease sales, because it looks really attractive, cool and funny for the target group –modern women from 25 to 55 years old.
15Jewelpark AG App
Sources• https://medium.com/seek-blog/design-thinking-101-the-double-diamond-ap-
proach-ii-4c0ce62f64c7 (Double Diamond Approach)
• http://fortune.com/2017/10/03/augmented-reality-ar-investments/ (Augmented Reality)
• http://www.bbc.com/news/av/technology-41419109/what-future-for-augment-ed-reality (Augmented Reality)
• https://www.youtube.com/watch?v=HnjbTytHH6U (Vuforia)
• https://www.youtube.com/watch?v=cCOLdX1JMo4&t=176s (Vuforia)
• http://www.secondpicture.com/tutorials/3d/three-point_lighting_in_3ds_max_01.html (Light)
• https://www.youtube.com/watch?v=qxWARUJwCAg (Lean Touch Asset)
• https://www.assetstore.unity3d.com/en/#!/content/30111 (Lean Touch Asset)
• https://www.assetstore.unity3d.com/en/#!/content/3 (Gem Shader Asset)
• https://www.assetstore.unity3d.com/en/#!/content/37402 (Basic Metal Texture Pack Asset)
• https://docs.unity3d.com/Manual/class-AudioSource.html (Audio)
• https://www.turbosquid.com/ (3D models)