Iowa State Fair. (n.d.) Fair electronic photograph. Licensed under the Iowa State

Fair on IowaStateFair.org

EVERYTHING AT THE

IOWA STATE FAIR

Clairee Schneider HCI 598: Fall 2017 Capstone Project M4: The Prototype Due Date: October 1, 2017 Prototype Wireframe Link: http://jrjdgx.axshare.com/

1 | P a g e

CONTENTS

1. PROTOTYPING STRATEGY ............................................................................................... 2

2. DESCRIPTION OF PROTOTYPE ......................................................................................... 3

2.1 Landing Page ................................................................................................................. 3

2.1.1 Login with Existing Account ........................................................................... 3

2.1.2 Creating a New Account .................................................................................. 6

2.2 Main Application ............................................................................................................ 7

2.2.1 Home Screen ..................................................................................................... 7

2.2.2 Favorites ............................................................................................................ 9

2.2.3 Tickets ............................................................................................................. 11

2.2.4 Social............................................................................................................... 12

2.2.5 Events and Food .............................................................................................. 14

2.2.6 Map ................................................................................................................. 15

3. REFLECTION ....................................................................................................................... 19

4. REFERENCES ...................................................................................................................... 21

2 | P a g e

1. PROTOTYPING STRATEGY

A computer software wireframing application called Axure, allowed the application to be

a mixed-fidelity wireframe, which is a combination of low and high-fidelity prototypes.

Choosing mixed-fidelity wireframe was an easy decision to make for several reasons. Since the

design was so intricate with many different overlay screens and page screens, accordion

information, and scrollable tabs; it made more sense to allow the user a more interactive and

independent experience from the researcher when testing this particular prototype, as these

features would be challenging to manage for the researcher, while also conducting other

quantitative and qualitative measures (Pernice, 2016).

Utilizing a mixed-fidelity prototype was critical as it created a user experience that had a

similar design and usability to the final application. According to Pernice (2016), by making

most of the links and menus clickable and automatically responsive to the user’s actions, and the

graphics and layout close to the final application, I created a “mostly” high fidelity prototype.

Although the application is mostly high fidelity there are some low fidelity parts of the prototype

as well (not fully developed and needing explanations to describe what should happen, (Pernice,

2016)), such as:

the maps screen (see Figure 16, Figure 17, and Figure 18), which utilizes explanations to

help describe what will happen in the final application

the grandstand tickets tab under the tickets screen, which only utilizes a placeholder to

show that this feature will be available but was decided to be low fidelity as it was not to

be tested by the user.

3 | P a g e

2. DESCRIPTION OF PROTOTYPE

2.1 Landing Page

There are several features the user can complete on the landing pages of the application. Figure 1

displays three actions that the user can perform: Login with an Existing Account (Figure 2),

Create Account, and Continue without an Account. Logging in with an existing account and

creating an account will be explained below further. Continuing without an account will

automatically bring the user to the home screen.

Figure 1. First Screen the user will see when viewing Everything at the Iowa State Fair.

2.1.1 Login with Existing Account

Figure 2 displays two methods of logging into the application: through a previously created

account and logging in with Facebook. The user can also request a new password through the

“Forgot Password” link below the PASSWORD input box. If the user requests a new password

an overlay will display that will ask the user to input their email (see Figure 3). After the user

4 | P a g e

confirms to have an email sent to request a new password, a second overlay will display

confirming an email has been sent.

The user can also choose to login with Facebook (see Figure 5). Choosing this option will take

the user to a different page that will request the user input with a Facebook email and password.

Once this information is accepted through Facebook, the user will be taken to the Home Page.

Ideally this screen will have the official “Facebook Application Login” plugin for developers and

will automatically connect and log users in without having to input their username and password

as long as the user has the Facebook application downloaded onto their mobile device and is

logged in. This feature is not currently active but this is okay as the wireframe simulates the

logging in process sufficiently, and this process is a backend development, not a feature and

layout issue.

5 | P a g e

Figure 2. Display of two ways the user can login to the application: through a created account

and Facebook.

Figure 3. Forgot Password overlay on the Login to Existing Account.

Figure 4. Email Confirmation overlay that shows the user a password reset email has been sent.

Figure 5. Display of the Facebook login page

6 | P a g e

2.1.2 Creating a New Account

Creating a new account will request the user to input their first name, last name, email, password,

and a confirm password (see Figure 6). The user can click on the “blue” question mark and see

the requirements for a password (see Figure 7). Once the user has successfully inputted all of the

requested information and clicked “Create Account” a confirmation overlay will be displayed

that will take the user to the “Login to Existing Account” screen (see Figure 8).

Figure 6. Create a New Account screen

Figure 7. Password Requirements overlay

7 | P a g e

Figure 8. Account Created Confirmation overlay

2.2 Main Application

2.2.1 Home Screen

The homepage will have several features that the user can access, such as: viewing the

countdown to the next fair and accessing different parts of the application. There are eight

buttons that allows the user easy access to other parts of the application. The user will also be

able to access the main menu by clicking on the “hamburger” icon located in the top left corner

of the screen. The home screen can be seen in Figure 9.

8 | P a g e

Figure 9. Home Screen

Once the user has clicked on the “hamburger” icon the main menu is displayed and the user can

access the entire application at any point throughout their experience (see Figure 10). The user

can also access the settings screen in two places: through the settings tab and the gear icon in the

top right corner of the main menu. In the final iteration of the application the user should be able

to use a swipe gesture to access the main menu. This feature does not work within the wireframe,

as there were already other swiping gestures for the tabs in certain screens. Not having this

feature work is okay because the idea of the hidden navigational menu still works with the

“hamburger” icon and gives the user a good idea of how the menu system will work in the final

application.

9 | P a g e

Figure 10. Main Menu in a navigational drawer style menu, accessible by a “hamburger” icon in

the top left corner of the screen.

2.2.2 Favorites

The favorites tab provides two main features: viewing favorited events and favorited food,

through scrollable tabs. The events tab, provides a scrollable table with a checkmark, name of the

event, location, and more information about the event (see Figure 11). The checkmark will delete

the event if it was completed and the events will disappear at the end of the day and show the

next day’s favorited events. This feature will not be iterated in the wireframe as it is complicated

to iterate within Axure. The “more information” icon will also not work as there was limited

time to complete the wireframe, but in the final application it would provide an overlay with the

information for that event.

10 | P a g e

The user can also filter events by using the filter icon in the top right corner. While the filter icon

does provide an overlay screen with some filtering tags, it does not actually filter any data. Even

though it does not filter any data, it will provide a good understanding to the user on what type of

data will be able to be filtered, and can provide feedback other whether there could be other ways

to filter either events or food. The food tab provides the same features as the events tab, except

that it is related to food at the fair and has a different filter screen (see Figure 12).

Figure 11. Favorite Events tab

11 | P a g e

Figure 12. Favorite Food tab with Filter shown.

2.2.3 Tickets

The tickets screen allows the user to purchase tickets for either gate admission (which is general

admission to the Iowa State Fair) and/or to the Grandstand events (which is private events that

vary by night). The gate admission tab allows the user to view the previous gate admission

purchases in an accordion style information display. The reasoning for this is because it allows

users who purchase tickets multiple times during the fair season, to not have to view all of their

previous purchases in one long screen. In each accordion tab it shows the receipt of the purchase

and the tickets available in each purchase. The application also shows the total number of

available of adult and child tickets above the accordion so the user does not need to open all of

the receipts to view how many tickets are available. Clicking on the available tickets button will

12 | P a g e

display an overlay of the tickets that are available and will allow the user to scroll between them

for easy scanning at the gates. The order tickets button will take the user to a different screen and

walk them through the process to order tickets. If the user has already logged in, it will

automatically input their name and email address, so the user will only need to input their

payment method and number of tickets for purchase. The Grandstand tab was not iterated as it

would take too much time and is not one of the tasks the participant will be required to perform.

Figure 13. Gate Admission tab under the Tickets screen with the accordion open.

2.2.4 Social

The social tab shows the user’s Facebook friends that are also at the fair that day. This is

determined by either the user scanning their tickets at the gate using the application or favoriting

13 | P a g e

events for a particular day. On this screen the user can scroll the table that provides their

Facebook friends’ profile pictures, first name, last name, and how to contact them (see Figure

14). The if user has their phone number in their phone’s contact list, they will be able to click on

the phone icon and call their friend, and if the user and their friend both use Facebook

messenger, clicking on the message bubble will open messenger and then the user can chat

through that platform. These icons do not actually work but their function is explained below the

table.

Figure 14. Social Screen

14 | P a g e

2.2.5 Events and Food

The events tab and food tabs are exactly the same as their counterparts under favorites. This was

intentional so the user would be familiar with the setup and not need to learn a different setup for

the same information. There is only two differences between the two: the function of the

checkmark, and the number of tabs.

The first difference in the events and food screens compared to the favorite’s version, is the

function of the checkmark. In the favorites screen it allows users to delete their favorites, here,

the checkmark allows the user to add events and food to their favorites list. The second

difference is the number of tabs under events. Since there are so many days, the tabs are

scrollable to show more but cannot be changed with a swipe feature like the other tabs

throughout the application (see Figure 15). The swipe feature, to switch between the tabs, can

only be used on the main screen. The user can also switch tabs by clicking on the tab itself too.

Figure 15. Events Tab with multiple scrollable tabs

15 | P a g e

2.2.6 Map

The map screen has three tabs that provide different map functions for the user. There is also a

search icon that when pressed in the final application (not in the wireframe) will show the item

searched on the map with information about it. This is okay because having the search feature

work is not a priority as it will ideally come from a database but showing the user that it is an

option is a priority so that they will understand that it will be available in the future. The final

application will also include an interactive map that user can move around and zoom in and out

of, but on the wireframe it just has a placeholder and states what the final application would do.

Ideally the final application will utilize Google Maps, for directions, buildings, and locations of

different interests.

The general map button (see Figure 16) will display an interactive map that will show buildings,

rides, food, events, and routes from the user’s current location (if the user has their location

settings on) to the place they are trying to find. There will also be a map key that allows the users

to identify different attractions, food, vendors, and buildings. This map will also have icons that

the user can click to receive more information about in an overlay screen.

16 | P a g e

Figure 16. Map Screen with generalized map

The tram routes button (see Figure 17) will display a generalized interactive map that will show

buildings and roads but will overlay that with the tram routes. There will also be icons that the

user can click that will expand the tram stop arrival and departure times. The user can also view

the arrival and departure times underneath the map without clicking on the specific tram stop on

the map.

17 | P a g e

Figure 17. Map Screen with tram routes

The emergency services button will also show the interactive map but will overlay the map with

the locations of the First Aid stations, Stationary Security Personnel, and the Missing Child/Lost

Possession office. This overlay will have large easily identifiable icons, so the user can find these

places quickly.

18 | P a g e

Figure 18. Map Screen with emergency services

19 | P a g e

3. REFLECTION

Prototyping was an extremely useful process for refining the Everything at the Iowa State

Fair mobile application. I would definitely use wireframing and prototyping in the future but I

would definitely need some more instruction and possibly a walkthrough or class that shows how

to fully utilize the more advanced wireframing concepts.

Part of the problem I had when wireframing this application was that I was constantly

learning how to add new features, such as: dynamic panels, displaying screens using different

interactions (OnLoad, OnClick, OnSwipeLeft, OnSwipeRight), Axure widget library downloads

(i.e. UX Tool Time), and utilizing various widgets. While this was beneficial to my learning

process, it had the unfortunate problem of my needing to go back and either update or rework

entire pages or sections of the application. This became time consuming and frustrating, as

updating, to include more advanced features, led to other interactions failing and needing to go

back to update later.

Having a team or partners who were familiar with wireframing would have been helpful

as it would have not only furthered my own knowledge, but may have also produced better and

more interactions within the wireframe. Despite not having a team, I learned several things about

my design through the prototyping process, such as:

Designing the rest of the overlay screens and including ways for the user to exit out of

said screens

Consolidating the map, trams, and emergency services screens, as was suggested in the

M3 Peer Review

20 | P a g e

Utilizing premade tabs and navigational windows (Iamkeeler & ryanhuettl, 2017), as

those are already standard designs and deciding how to change them to fit my needs. I

would have preferred the premade designs did not have the red color, and were instead in

a greyscale. I unfortunately did not have the time nor knowledge to fix the color as it was

buried in several layers of dynamic panels

That I did not design enough displays in the previous iteration to fully make the

prototyping process as easy as it could have been.

21 | P a g e

4. REFERENCES

Iamkeeler & ryanhuettl. (2017). UX Tool Time [Widget Library]. Retrieved from

http://uxtooltime.com/

Pernice, K. (2016, December 18). Nielsen Norman Group. Retrieved from

https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/