Experiential Design - Project

Ahmed Yaman Ibrahim (0341119)

Experiential Design - Project

PROJECT

Ideas

For this project we are to come up with an AR app of our choice to be developed in Unity. I have currently come up with 3 rough ideas, one of which I will develop into a full proposal after consulting with Mr Razif.

Idea 1: Interactive restaurant menu app

As the name suggests this would be a menu for a restaurant in the form of an AR app. It would 
show you a virtual menu for the restaurant/cafe you are in by pointing your camera at a spot in front of you on the table. Would be used as a replacement for physical menus and the QR code-based online menus currently being used. This would eliminate the need to constantly replace physical menus when items change as well as allow for more freedom in designing how the menu looks as opposed to just using a dropdown list on a mobile website.

Features:
  • Restaurant menu with visualization of the food items in AR with details such as dietary/nutritional info
  • Buttons to call a waiter to your table / ask for bill
  • Add notes to your order from the menu
  • UI can be adjusted to match the theme of the restaurant*
*The visual design of the AR app would largely be dependent on the theme of the restaurant it is made for, but for the purpose of this project it will be designed with a conceptual restaurant in mind

Idea 2: Book identification AR app for a library

This app would be used to identify books on a bookshelf (ideally in a library) based on their spine. Upon scanning the spine of a book with your camera, you would be shown helpful information about the book such as title, author, year, genre, synopsis etc. as well as cover art. It can also show you quick reviews from websites such as Goodreads at a glance, and has a search function where you can look for a specific book in the library based on name, author, genre etc. and direct you to where it is on the library by showing you the shelf it is located on. It would be helpful in situations where you are looking for a book based on a general topic/genre without a specific title in mind and need to browse through several until you find what you're looking for.

Features:

  • Identify books based on their spine and provide detailed info about the book
  • Search function to look for a specific book based on parameters and locate the shelf it's on
  • Cart option to add books to and then purchase at the counter where your books are waiting for you - so you don't have to carry them around as you browse

Idea 3: AR app for previewing and purchasing art prints

This app would be an online store for art prints from various artists, that you can preview on your wall using AR before purchasing. This would help you determine the size of the print you're buying and figure out exactly where you can place it in your home and how it would look like before you actually buy it.

Features:

  • Store page where you can browse through available art prints on sale and search based on artist
  • Sizing options for selected artwork and preview - Pick a size and preview how it would look in your room by pointing your camera at a wall. As the size is fixed based on the size you chose for the artwork it would be a decent reference for how it would look on your wall once you actually purchase it
  • Cart and checkout for purchasing the artwork once you have selected them


After discussing with Mr Razif, we decided to go with the art print AR app and based on his suggestion I'm adding a feature where, once you receive the printed artwork, scanning it with the app will show an overlay of information about the artwork itself such as the artist and a brief description, as well as showing an effect on the artwork itself like a short animation.

Proposal





Prototype

The app is designed so that the main page you open the app to is the homepage of the print store. It shows you a list of artists that are selling prints on the app and the prints that they have. Tapping on a print will take you to a page that shows you details about the print along with two buttons, to add the print to your cart and to preview the app in AR. After you purchase a print and set it up on your wall, you can scan it with the camera to view details about the print and play an animation/video on top of it. For this prototype I was able to build a general layout of the UI and some of the camera functionality.

Prototype - Main page

Prototype - Print details

Prototype - Scanning a purchased print



Final

For the final version of the app, I cleaned up the UI and added the missing camera functionality. I wanted to create a custom animation for the scanned print but I wasn't able to design one in time, so I instead I made it so that scanning the print plays a video on top of it while showing you the details of the artwork. For previewing a print before you buy it, I used Vuforia's Mid Air target functionality so you can place an artwork on your wall by tapping on the screen. This way you can roughly adjust the size of the print by adjusting your distance from the wall. You can also do this while holding the phone horizontally for a better view.

AR App - Main page


AR App - Print details


AR App - Preview print before purchase



AR App - Cart



AR App - Scanning a purchased print



Video walkthrough: https://drive.google.com/file/d/1JogiYWiXgvmhB1j27eKfINuCZ_QeFJNg/view?usp=sharing

Popular posts from this blog

Advanced Typography - Exercises

Image
26/08/20 - 23/09/20 (Week 1 - 5) Ahmed Yaman Ibrahim (0341119) Advanced Typography Exercises LECTURE NOTES Lecture 1: Briefing & Typographic Systems 26/08/20 (Week 1) Our first lecture consisted of a briefing of the module to all students followed by a lecture on our first exercise topic: Typographic Systems. We were shown excerpts of the book Typographic Systems by Kimberly Elam for reference. Typographic Systems The 8 typographic systems mentioned above are Axial, Radial, Dilatational, Random, Grid, Modular, Transitional and Bilateral. These systems are meant to serve as a sort of organizational framework for arranging type on a composition in a way that is functional and visually sound. 1. Axial System In the axial system, type is aligned to either side of an axis. This is especially helpful when organizing lists, or several bodies of text on a composition. Fig. 1.1: Axial system examples 2. Radial system In this system, the type extends outward fro...
Read more

Major Project

Image
Ahmed Yaman Ibrahim (0341119) Major Project *Professional Development Week reflection is in the Week 8 section of this post. Week 1 Ideas 1. Gamification platform for schools Based on dissertation topic - An app that gamifies the school experience for students - providing features such as leaderboards, rewards for turning in work on time and for making extra effort, as well as setting sequential objectives and class-wide goals for schoolwork and homework. Teachers would be allowed to reward students based on their performance with badges and other benefits. It would be built as a web app so it can be used with any operating system and can be simultaneously accessed from a mobile phone and a desktop. Sample layout for homepage Main features: Class subjects as individual topics with sequential objectives Reward and scoring system for work submission, to be reflected on a leaderboard Leaderboard that displays students based on performance to encourage competition Badges as a part of rewar...
Read more

Information Design - Individual Projects

Image
21/1/20 - 24/1/20 (Week 3 - Week 7) Ahmed Yaman Ibrahim (0341119) Information Design Individual Projects LECTURE NOTES Project 1: Recipe infographic Week 3 - Week 7 Project 1 consists of creating an A3 infographic poster for a food recipe of our choosing. Lecture 2: Animation Week 3 - Week 7 Project 2 involves creating an animation (max one min.) or looping gif of the recipe. INSTRUCTIONS PROJECTS Project 1: Infographic poster I chose tiramisu for my recipe as I felt it wasn't overly complicated while also not being too simple to fit into a one-minute timeframe for the animation. I looked up a few recipes online to figure out the most common elements in the recipe and began sketching how I could lay out the poster. Fig. 1.1: Project 1 (Layout sketches) I then moved to Illustrator to visualize the design better as I went along creating it. I decided I'd try an isometric design for the tiramisu illustration, so I created a basic i...
Read more