Barcode

Asge Matthiesen (asmat11@student.sdu.dk), Emil Jansen (emjan14@student.sdu.dk), Anne Katrine Egsvang (anegs12@student.sdu.dk)

Introduction

We live in a modern society where everything is based upon quick solutions and digitalization of the most necessary tasks in the everyday life. The market for digitalization of the private sector is expanding, in which the restaurants, night clubs, and bars are included. Right now, these businesses use paper-based solutions to inform customers about what they offer, like menu cards. This way of dealing with information is inefficient when handling a lot of orders at the same time, or when suddenly dealing with wrong or changed orders, and we might be heading towards a time with these type of paper solutions being outdated.

The fact that people also live in a knowledge-based world, where there is access to all kind of information, making almost everybody able to do everything, carves a need for real designers, who know how to make solutions as optimal as possible. With the Apple-store and Google-play store being drowning in all kind of applications. It is important to have designers make efficient solutions for these sorts of problems that conduces the interaction for the users.

Problem statement

How can you digitalize the nightlife in Odense to improve and create a smoother experience for the visitors?

The aim with the solution being made for this problem statement is to develop an application that can benefit the nightlife of Odense. The application should be an efficient and smooth tool that optimizes the fact that people, who are not well-wandered in Odense City, use a lot of time and resources in the nightlife searching for information about the current deals and offers from different bars. In addition, the application should optimize the fact bar owners also get negatively affected by this problem, causing time and resources having staff waiting for costumers in queues to make decisions about orders and offers. Hopefully the solution will be a “game changer” for the nightlife in Odense in ways of conducting information with the use of technology.

The application is developed with iOS by Apple for iPhone and iPad. The tool used for development is XCode [1] for the common control system OS X, with the implementation of the programming language “Swift for iOS” [2], [3].

The process of this projects is described in this report, including the requirements and methods for this. Also included is the original idea, and how it changed together with the implications and challenges in making the application.

Design Process

The following model of design process describes how the solution to a problem-solving application for the nightlife in Odense was found. First a list of requirements has been created, to have a clear path of what is expected toward the solution. Next, a specification of what purpose that is designed for is described. Then the project moves into a Conceptual Design Stage[1], where tests and evaluation is made, to discover how the conceptual design works with its purpose in general. The Detailed Design Stage [2] is the last design stage of the process, where the application is designed and simulated based on the results from previous stage. Last, the process reached the point of the final constructed application.

Materials and methods

Materials

QR-Code

The technology used for getting the user from the app to a given website is a Quick Response Code, the also called QR Code [4]. This type of code is designed to be read by smartphones at a high speed. The code consists of black modules arranged in a square pattern on a white background with an encoded information such as text, a URL, or other data. The older version of QR Codes are the well-known Bar Codes seen in supermarkets underneath products and can give each product a unique price. QR Codes are the sophisticated version of Bar Codes, as they have the same purpose. The only difference is that Bar Codes are one-dimensional and QR Codes are two-dimensional, see figure 2. The QR Code is more efficient, said they can hold a big amount of information and still are user-friendly and practical.

Swift and Xcode

Swift is a general-purpose multi-paradigm compiled programming language developed by Apple Inc. [5] for iOS, macOS, watchOS, tvOS and Linux. Swift is designed to work with Apple’s Cocoa [6] and Cocoa Touch Frameworks and the large body of existing Objective-C [7] (ObjC) code written for Apple products such as iPhone’s and Apple Watch. It is built with the open source LLVM compiler framework and has been included in Xcode since version 6. On platforms other than Linux it uses the ObjC runtime library which allows following programming languages, C, ObjC, C++ and swift code to run within one program.

Xcode is a collection of tools developed by Apple for programming and developing computer programs for OS X and iOS operating systems. The first version was released in 2003 and the latest version is 7.0.1 (2015) and is available at Mac App Store for users of OS X Lion, OS X Mountain Lion and OS X Mavericks.

Methods

Brainstorming

Brainstorming is a group creativity technique used for finding solutions to problems. Brainstorming is used as method for finding an idea for an application with basis in the problem statement.

 Conceptual Design

A concept study (conceptualization, conceptual design) is often a phase of project planning that includes producing ideas and taking into account the pros and cons of implementing those ideas. This stage of a project is done to minimize the likelihood of error, manage costs, assess risks, and evaluate the potential success of the intended project. In any event, once an engineering issue or problem is defined, potential solutions must be identified. These solutions can be found by using ideation, the mental process by which ideas are generated. In fact, this step is often termed Ideation or “Concept Generation.”

Various generated ideas must then undergo a concept evaluation step, which utilizes various tools to compare and contrast the relative strengths and weakness of possible alternatives.

Simple Prototyping

When developing products, such as applications, a construction of prototypes can have several advantages for testing purposes. Prototypes are simulations of a final product that often is constructed low-fidelity (Rogers, Y. et al. 2015) [8] using paper and cardboard or digital mock-up tools. The advantage of prototyping low-fidelity is low usage of time and resource, and additionally a cheap and quick way of getting feedback to your designs.

Evaluation

To get the design right, a general evaluation of the product is made through various user tests. The general evaluation consists of the following:

  • Observing user interaction.
  • Evaluate concept and design by considering pros and cons regarding the interaction.
  • Revise design choices

Building first navigational model

A “navigation model” describes the paths to each user goal on a website. Usually your product will have more than one user, and each user may have multiple goals, so models like this can be pretty extensive. Creating a navigation model is also an opportunity to review any existing content you may have and understand the context in which you will be creating the structure. As a web or application designer it’s your job to help users find their way to what they’re looking for. It can be easy to put the needs of your users to one side, but knowing your users, understanding their roles, goals, motives and behavior will confirm how you structure your navigation model. A well-designed navigation promotes discovery.

Use-Case Diagrams

To visualize the relationship between the user and the use-cases of the product in which the user is involved, this assignment shows said representation with a use-case diagram[3] implemented. To evaluate a product in a user-centered manner, the use-case diagram has the advantage of visualizing many relations between user and product in one representation, as opposed to a use case.

 

Object Diagrams

To show a complete overview of the designed system, an object diagram[4] is used as visualization. The object diagram is an efficient way of showing how a system evolves over time, without having to describe an advanced system in text form.

Finding Requirements

To solve the problem stated in the introduction, an attempt of reaching the following requirements is made:

  • The angle of this project will be designing an application based on knowledge of user design and user experience together with usability.
  • Different technologies are included in the project; QR Code-scans, a digital menu and a digital ordering system for the bars and restaurants in Odense. There will be investigation towards the implementation of said technologies.
  • Furthermore, the competitors market will be investigated for similar applications, to differ this application from other designs and solutions.

 

results

Brainstorm Process

The general idea was created through a brainstorming phase of how to improve necessary tasks at a night clubs. As described in the introduction tending is a difficult job in the nightlife, and specifically tending costumers at the seating tables is a rare thing after midnight. It is also time-wasting to stand in a line for drinks. It was through brainstorming that these problems came up, which made the ground for the application.

The first idea that came up was that of an application based upon the technology Near-field Communication (NFC) [9] NFC is rooted in radio-frequency identification technology (known as RFID) [10] which allows compatible hardware to both supply power to and communicate with an otherwise unpowered and passive electronic tag using radio waves. This is used for identification, authentication and tracking. The plan was to make an application with the newly added technology for iPhone 7, 8, 8+ and iPhone X, so that it would be able to scan a NFC-tag and afterwards be able to get the menu card from the specific bar or restaurant all at the same time the phone would use the wireless charger so that the user would have a pleasant feeling ordering drinks or food from the seat of his or her table without standing in line or having to order fast due to impatient hosts or tenders. This would also spare the host for a lot of time since they wouldn’t have to wait for the user or costumer to decide what to drink. There was made a first sketch for this idea. In figure 3 shown underneath, there is visualized the basic idea with this technology.

 

 

The process in this way that it should be built upon was that the user or the costumer would put their phone upon the NFC-tag which would be integrated into a wireless charger at a table at the restaurant or bar, and when putting the phone on the table and the wireless charger/NFC-tag the phone would start charging and open the menu card for the specific bar or restaurant by opening a link integrated in the specific tag. This link would open a web-based page for the bar, and the tenders or hosts would have a similar page open on an iPad in at the facility, and from there control which offers and prices there would be. This would allow for a real-time editing with instant refresh and updates for the users. In figure 4, the process is shown.

The next step that was made, was to research existing applications for what could have already been developed so that it wouldn’t be a copy of something already existing. There was found a couple of different applications as shown in figure 5.

The one thing they all had in common was that none of them were made for a specific purpose other than making a tag for something as a keychain or a list etc. And that is where it was discovered that this was a good idea. After this research, there was made a first mock-up whereas the design thinking was coming in hand.  In this part, there was differentiated between two different basic design thinking. Flat design and Skeuomorphic design. [11]

 

Flat design is a style of interface design emphasizing minimum use of stylistic elements that give the illusion of three dimensions (such as the use of drop shadows, gradients or textures) and is focused on a minimalist use of simple elements, typography and flat colors. Designers may prefer flat design because it allows interface designs to be more streamlined and efficient. It is easier to quickly convey information while still looking visually appealing and approachable. Additionally, it makes it easier to design an interface that is responsive to changes in browser size across different devices. With minimal design elements, websites can load faster and resize easily, and still look sharp on high-definition screens. As a design approach, it is often contrasted to skeuomorphism and rich design[5]. (Though it should be noted that flat design can use skeuomorphism just as much as a realistically designed UI).

Many computer programs have a skeuomorphic graphical user interface that emulates the aesthetics of physical objects. A good example is found in some music synthesis and audio processing software packages, which closely emulate physical musical instruments and audio equipment complete with buttons and dials. It is the visualization of real objects in a virtual environment to improve the understanding and the usability of this kind of design. Apple Inc., while under the direction of Steve Jobs, was known for its wide usage of skeuomorphic designs in various applications. This changed after Jobs’ death when Scott Forstall, described as “the most vocal and high-ranking proponent of the visual design style favored by Mr. Jobs”, resigned. Apple designer Jonathan Ive, took over some of Forstall’s responsibilities and had “made his distaste for the visual ornamentation in Apple’s mobile software known within the company”. With the announcement of iOS 7 in 2013, Apple officially shifted from skeuomorphism to a more simplified design, thus beginning the so-called “death of skeuomorphism” at Apple. This led to a design choice where everything came to be flatter designed [12].

 

There was chosen a flat design to work from since it is the best UI to lead a broad variety of users interact and understand the application. Shown underneath in figure 6 and figure 7 there are two examples on the mockups there was made for the NFC scanner.

 

 

 

After the mockups were made, there was conducted a few tests to investigate the user experience and the usability of the application. At this moment, there was discovered a minor “bump on the road”. Since Apple just had launched the usage of NFC along with the iOS 11 and the iPhone 8, 8+ and the iPhone X, it came to the realization that the account that was worked with didn´t had the necessary administration for the account and the unlocking of the necessary components in swift. This had the effect that the working with the NFC wasn´t an option anymore and the whole project made a turn-around. This led to a new brainstorm, with the outset of the QR-scanner as a substitution for the NFC – because it practically is the same technology – the only difference is the whole ID-scanning and that the user must open op the camera for this to work.  Luckily the test results of the design and usability didn´t go to waste, since it still was a solid outset for the rest of the application. The whole idea with the menu was still intact, but the in cooperation of the wireless charging was skipped.

The conceptual design of Barcode

As a visitor at a bar, you find the menu and most current offers, like happy-hours, once you’ve downloaded the application. More information about the bar can be found through a quick QR Code-scan of a unique QR Code designed for the specific bar. The QR Code-scanner is accessible within the application. By scanning, you are directed to the bars own website. The unique QR Code is placed by every seating table at the given bar. Furthermore, with the application downloaded, you can place your orders digitally and henceforth you are able to place your orders without having to leave you seating table. As a bartender, you receive the orders from each seating table on another device at the bar, and you can now prepare orders quicker and more effectively. The concept for each user is visualized in the following use-case model, see figure 8.

Evaluation on user tests

To get results for the user tests there was in this project designed a conceptual model to evaluate real user response to the design of the application. There was conducted a small interview where the users were asked to navigate in the model chosen and give feedback to the navigation and the usability, user experience and the application idea itself. We conducted the tests on 11 users and observed their user interaction. Some of the feedback on the navigation were:

“Feels easy to navigate in, but I have a little trouble understanding why it should be so dark to look at”

Based on that and several other quotes regarding the darkness in the colors chosen for the first mock-up there was decided to change the colors and design into more lighter and brighter texture and contrasts.

Another quote regarding the user experience was:

“It feels smooth to use and I have a good feeling with the usage of the application. I would definitely use it if it came on the market – I would though rather prefer that the QR-scanner would have the option to go back to the main menu instead of I have to close the application and open it again”

Based upon that feedback there was chosen to work on a main menu screen and therefore a possibility for the users to go back and forth into the QR-scanner so that the usage of the whole application would be easier to understand.

 

Implementation

The way we have created the application is by trying to find different YouTube videos about programming the QR-scanner containing the different code structure that was needed to be included. Before we started this application, we had no experience with the Swift programming language, and the QR-scanner implementation. Therefore, to get started with this project, YouTube was used as a guideline for this. Due to the fact that we had no experience with Swift, YouTube tutorials became the foundation of the QR-scanner. A key implementation in this project is the AVFoundation framework that makes controlling device cameras possible for the QR-scanner. See figure 9 for an overview of the implementation of the QR-scanner.

 

 

Code High-lights

This is the script for the QR reader. It uses classes which gives access to the audio and video, and tries to find data patterns, like QR codes, and executes a script once it does.

//  ScannerViewController.swift

//  BarcodeScanner

//

//  Created by Emil Jansen on 7/14/17.

//  Copyright © 2017 Emil Jansen. All rights reserved.

//



import UIKit

import AVFoundation



class ScannerViewController: UIViewController, AVCaptureMetadataOutputObjectsDelegate {

 

Before running the viewDidLoad(), a couple of variables are created. These variables will contain the video capture device, a layer for showing what the camera is looking at, and the capture session. The capture session is necessary for the camera to start capturing video.

 

 

 //Laver variabler der skal indeholde hhv. hvilket kamera der bliver brugt, et layer til at vise billedet

   //og en 'session' der kan hentes information fra.

   var captureDevice:AVCaptureDevice?

   var videoPreviewLayer:AVCaptureVideoPreviewLayer?

   var captureSession:AVCaptureSession?

   

   override func viewDidLoad() {

       super.viewDidLoad()

       

       navigationItem.title = "QR Scanner"

       view.backgroundColor = .white

       

       //Klassen AVCaptureDevice bliver brugt, for at få adgang til kameraet

       captureDevice = AVCaptureDevice.default(for: .video)

 

 

If a capture device can be found, the following code will execute. Otherwise, a catch will print a string with a clarifying message.

 

       //Hvis der er adgang til kameraet, skal følgende kode køre.

       if let captureDevice = captureDevice {

       

           

           do {

 

 

Again, if input is coming from the capture device, save that input in the variable input.

 

              let input = try AVCaptureDeviceInput(device: captureDevice)

 

 

Starts a capture session, the input from the previous variable is then added to that capture session.

 

               captureSession = AVCaptureSession()

               guard let captureSession = captureSession else { return }

               captureSession.addInput(input)

 

 

The AVCaptureMetadataOutput class is used to find data patterns in the input from the video capture device. Among these patterns, we are only interested in the QR variant. Other types of data patterns include barcodes.

 

               let captureMetadataOutput = AVCaptureMetadataOutput()

               captureSession.addOutput(captureMetadataOutput)

               

               captureMetadataOutput.setMetadataObjectsDelegate(self, queue: .main)

               captureMetadataOutput.metadataObjectTypes = [.qr]

 

 

Starts the session and makes a layer in which to show what is being captured by the camera.

 

      

               captureSession.startRunning()

               

               videoPreviewLayer = AVCaptureVideoPreviewLayer(session: captureSession)

               videoPreviewLayer?.videoGravity = .resizeAspectFill

               videoPreviewLayer?.frame = view.layer.bounds

               view.layer.addSublayer(videoPreviewLayer!)  

           }

           //En catch til at fange eventuelle fejl.

           catch {

               print("Error Device Input")

           }

           

       }

       

   }



   override func didReceiveMemoryWarning() {

       super.didReceiveMemoryWarning()

       // Dispose of any resources that can be recreated.

   }    

 

 

As soon as a data pattern with the specified type, in this case QR, has been found, the data is converted to a string value. The string value can then be used to call other functions in order to open websites or navigate in the app.

 

 

func metadataOutput(_ output: AVCaptureMetadataOutput, didOutput metadataObjects: [AVMetadataObject], from connection: AVCaptureConnection) {

       if metadataObjects.count == 0 {  return  }

       

       let metadataObject = metadataObjects[0] as! AVMetadataMachineReadableCodeObject

       

       guard let stringCodeValue = metadataObject.stringValue else { return }

       

       // Stop capturing and hence stop executing metadataOutput function over and over again

       captureSession?.stopRunning()

       

       // Call the function which performs navigation and pass the code string value we just detected

       useScannedCode(scannedCode: stringCodeValue)

       

   }

 

 

This function only prints the scanned code to the console, but the possibilities for actual useful implementation is there.

 

 

func useScannedCode(scannedCode: String) {

       

       print (scannedCode)



       let storyBoard: UIStoryboard = UIStoryboard(name: "Storyboard", bundle: nil)

       let secondViewController = storyBoard.instantiateViewController(withIdentifier: "StoryboardViewController")

       

       present(secondViewController, animated: true, completion: nil)

   }

 }

 

Links to the project

Link for BitBucket: https://bitbucket.org/EmilJansen/barcode

Video of the application link to YouTube: https://youtu.be/u7zqxQKaeTc

Discussion

According to the introduction

Regarding the relevance of creating such an application which we have made, there is still after this project a large demand of products which can improve the costumer experience and make it easier for the owners of the bars to help their customers without having to spend too much money or time on it. There are a lot of exploration to be done in this field and with the help of a deeper knowledge and understanding in this ever-expanding area, there is a lot of room for a lot of marketing research. We have been in touch with some of the bars in Odense and both A-bar and LA-bar which are owned by the company REKOM, were both very interested in the project, and supported the need for optimization in this area. With the new-age modern technology expansion happening every day the conclusion must be that this sort of application is a welcoming sort of product.

Good and bad things

The mainly good things about the application is that it is a tool for providing a smoother experience for the costumers at bars, and have the potential to provide a more effective way of tending for the bartenders. It is designed through a flat design, which makes it more usable for a larger group of users, and therefore easier to understand and navigate in. The feedback provided on the user tests were mainly positive which leads to an assumption that the application is good and has a basic idea that works. The bad things with the application is that it is still not as efficient as it could be due to the first idea with the NFC would be easier to implement at a bar, and more user friendly. The fact that we in this project had to split up the application at the writing moment into two parts isn’t a very good thing.

 

Conclusion

Due to the problem statement: How can you digitalize the nightlife in Odense to improve and create a smoother experience for the visitors? We can conclude that we have built an application that answers the problem statement somewhat satisfying. It is based upon our original idea which was to use the NFC, and we were able to give an assumption to how the nightlife in Odense would be more effective and create a smoother experience for the users of the application. It is still not flawless but the base of the application is sufficient in gaining the understanding towards the idea that we wanted to create. We have in this process gained a larger understanding for both the program Xcode and the Swift language which can provide an outset for further exploration within iOS programming.

 

Perspective

Different inclusions that are not yet implemented for this application are hereby mentioned in this section to provide a further perspective. The base of the idea with including the NFC must be the largest perspective in this project, since it would remove the use of the camera and therefore be easier for the users to order and get an overview of their drinks with comfort from their tables. For this to work it would include several permissions from Apple Inc. and a broader understanding would have to be collected. Another perspective would be the inclusion of the possibility for the bar owners to manage and update their prices and offers in real-time through a well-designed and mobile friendly web based service. For this to work it would include a database iPad/iPhone communication either through Wi-Fi or Bluetooth. The last perspective would be the combination of QR-scanner/NFC and wireless charging making it possible for the costumers to enjoy their drinks at the tables and getting their phones charged at the same time. For the application, itself there would be the perspective in having the possibility to pay for the ordered drinks and pay with the phone either through existing technology such as Mobile Pay [13] or Apple Pay [14]. This would require a cooperation between the bar and the existing service.

 

References

[1] Inc., A. (n.d.). What’s New in Xcode 9. Retrieved November 23, 2017, from https://developer.apple.com/xcode/

[2] Keur, C. (2014). IOS Programming: The Big Nerd Ranch Guide.

[3] Inc., A. (2014, June 02). The Swift Programming Language (Swift 4) by Apple Inc. on iBooks. Retrieved November 23, 2017, from https://itunes.apple.com/us/book/the-swift-programming-language-swift-4/id881256329?mt=11

[4] QR CODES – WHAT THEY ARE & HOW TO USE THEM. (n.d.). Retrieved November 23, 2017, from https://www.qrstuff.com/qr_codes.html

[5] Apple Inc. (2017, November 23). Retrieved November 23, 2017, from https://da.wikipedia.org/wiki/Apple_Inc.

[6] Cocoa (API). (2017, November 18). Retrieved November 23, 2017, from https://en.wikipedia.org/wiki/Cocoa_(API)

[7] Objective-C. (2017, October 24). Retrieved November 23, 2017, from https://en.wikipedia.org/wiki/Objective-C

[8] Rogers, Y., Sharp, H., & Pierce, J. (2011). Interaction design: beyond human-computer interaction. John Wiley & Sons.

[9] Near-field communication. (2017, November 21). Retrieved November 23, 2017, from https://en.wikipedia.org/wiki/Near-field_communication

[10] Radio-frequency identification. (2017, November 21). Retrieved November 23, 2017, from https://en.wikipedia.org/wiki/Radio-frequency_identification

[11] Skeuomorphism vs. Flat Design vs Material Design. (2016, October 25). Retrieved November 23, 2017, from https://99designs.dk/blog/trends/skeuomorphism-flat-design-material-design/

[12] Why iOS 7 Is A Masterpiece of Design. (2015, July 26). Retrieved November 23, 2017, from https://www.cultofmac.com/232040/why-ios-7-is-a-masterpiece-of-design/

[13] Mobilbetalinger på en let måde. (n.d.). Retrieved November 23, 2017, from http://mobilepay.dk/da-dk/Pages/mobilepay.aspx

[14] Apple Pay. (n.d.). Retrieved November 23, 2017, from https://www.apple.com/dk/apple-pay/

 

 

 

 

[1] Conceptual Design is an early phase of the design process, in which the broad outlines of function and form of something are articulated

 

[2] Detailed design is sometimes referred to as ‘developed design’ or ‘definition’. It is the process of taking on and developing the approved concept design.

[3] A use case diagram at its simplest is a representation of a user’s interaction with the system that shows the relationship between the user and the different use cases in which the user is involved.

[4] An object diagram is a diagram that shows a complete or partial view of the structure of a modeled system at a specific time.

[5] The term often given for the opposite of flat design is “rich design,” which is best described as adding design ornaments such as bevels, reflections, drop shadows, and gradients.

Leave a Reply