Improving Accessibility in Grocery Stores with Technology (Part 2)


In Part 1 Chau Dang described the project of increasing accessibility in grocery stores for customers with disabilities. The Part 1 blog included the technology research, user interviews, and development of an illustrated storyboard with innovative technologies.

Part 2 describes how to design and develop an app prototype. Creating a prototype is important in that if needed, design changes can be made before the more intricate aspects of the app are added. This post provides details of planning the app navigation structure, designing screens in Balsamiq and Adobe Illustrator, creating the prototype in Axure, and developing the app in Xcode.

Plan the App Flow

The app flow describes what information will be presented to the user and in what order. Planning the app flow involves extracting key concepts from the storyboards, translating those concepts into app screens, and grouping screens with similar ideas together.

First, key phrases that conveyed the most important ideas were extracted from Max and Erika’s storyboards. Next was consideration for what traits grocery store apps typically include, which resulted in four categories of the app: Login, Shop, Support, and Payment. The selected phrases (bold) were placed in one of the four categories.

The flow diagram below displays the screen features and how they are connected to each other. Having all the screens flow from the home page simplifies the navigation for customers.

Design the UI

Before getting too involved in the details of the page, you can create a general layout of how you want your pages to look on Balsamiq. Balsamiq has a few basic UI elements to choose from and you just click and drag the ones you want onto a mockup. Below are three page views: Home, Shop, and Checkout.

To include more detail, images can be imported into the image view. For example, a green up arrow from Google Images could have been used in the shop page rather than the label on the image box. Some prefer not to include color so it doesn’t distract the viewer from the basic structure of the page.

Detailed screens were created once the layout was decided. These are the same three pages from the Balsamiq mockup in Illustrator.

Illustrator has a steep learning curve, but is worth learning because you can design any type of UI element. Here is a short recording of a few of the steps taken in creating the home page.

As shown in the video, a blank 750 x 1334 px artboard is used along with text boxes, shapes, and images to create the page. To save the screen as a PNG, go to File > Export, select “Use Artboards,” and choose “Range” to enter in the artboard number.

Make a Prototype

Axure’s advantage is that instead of just clicking on static images, like you would with Invision, you can create animations.

For example, a GPS tab can appear from the top of the shop page, similar to how directions appear on Google Maps.

In Axure, a dynamic panel moves down when the user opens the shop page, and moves back up when the user returns to the home page. The video below shows this process.

Although it was not possible to include voice commands using the prototype software, there was a way to highlight the fact that there would be an audio component in an accessibility app. When a user clicks on an item in the Specials Section of the home page, the prototype plays an audio of the product name. In Axure, a hotspot was added over the item’s image with an open link in current window action. To configure the action, this code was written in the “Link to an external URL or file” section:

javascript:var audio = new Audio(“https://dl.dropboxusercontent.com/u/53749674/armour%20mandarins.mp3"); audio.play();

As you can see, the code refers to a recording placed in Dropbox and plays the audio.

Finally, we have our completed prototype.

Next Steps

To take this project to the next level, an iPhone app could be built using Xcode. The video below shows the steps for creating the home page and navigating to the checkout page when you select the checkout button. The page layout is first setup in the storyboard and then code is added to the ViewController files that changes the status bar and navigation button colors, modifies the navigation bar title, buttons, and background color, and responds accordingly with button actions.

This last video shows the home and checkout page results on the simulator.

Interested in hearing more or have some ideas?

If you would like additional information please contact me or my team members (Chau Dang or Dave Nguyen). This work is part of the Digital Customer Strategic Innovation Initiative. To read more about Accenture Technology Labs and our R&D areas, visit our website.