Plan and make the most of a trip to the Art Institute of Chicago
This project was not authorized by, or otherwise connected to, the Art Institute of Chicago.
The Explore AIC mobile application provides visitors to the Art Institute of Chicago (named the "Best Museum in the World" by TripAdvisor!) with tools for organizing their visit, navigating the museum's nearly one-million square feet, and engaging with the Institute's magnificent and massive art collection.
Our project's scope was focused on user research and the implementation of those findings in the design of the app's information architecture. We produced a testable prototype in Axure.
INITIAL RESEARCH & USER STORIES First, my team conducted contextual inquiries with museum visitors that fell into our 2 user types, Tourist and Repeat Visitor. From our large board of findings, we drew insights from which to create our user stories and personas. [Click images to enlarge.]
CONCEPTUAL ANALYSIS Next, we conducted a conceptual analysis of our project proposal. The diagram below consists of solely the concepts to be included in the product, as determined by our user research, user stories and requirements. We focused on minimizing references to specific technologies we might use in our product in order to give ourselves more design possibilities. From these diagrams, we brainstormed appropriate interface metaphors and interaction types to bring these concepts into our final product.
CURRENT EXPERIENCE I created the journey map below to map the experience of one of our personas, Sara O'Connor, a high school English teacher and mother of two, as she plans and experiences a visit to the Art Institute of Chicago with her children. The map's touchpoints and emotional considerations were valuable references when we began our app's design, as they helped us ensure our app addressed key actions and frustrations.
MORE RESEARCH Next, we engaged users again to determine how to best group these concepts in our app. We first conducted a round of open card sorts, using Optimal Workshop's online card sort tool.
The results of our open card sorts made us realize our users might be seeing the uses of our product very differently. Did some see the same tools as being for pre-visit use versus during their visit?
We created a set of category titles that we felt reflected the category titles given by the first round of respondents, and then conducted a closed card sort with Optimal Workshop's online card sort. Our closed card sort results dashed several assumptions we held and, with some discussion, produced the navigation map below.
WIREFRAMING With a researched architecture finally set up for the app, I was ready to wireframe our screens. I aimed to establish hierarchy and consistency across screens to reflect the navigation map and create an intuitive user interface.
Designing the ticket purchase process, we found it helpful to relate to the purchasing process provided by the AIC on their website. We combined AIC’s ticket purchasing process with a simplified mobile design. This simplified mobile design broke the process down, providing one step per screen in the app. We were able to eliminate clutter (particularly overwhelming on a small screen) and the need for additional sub-menus.
PROTOTYPING Our Axure prototype was used in one round of usability testing, in which users were tasked with buying a ticket to the museum, and navigating to "Fullerton Hall." [Some other app features and capabilities are not yet implemented in this prototype.]
USABILITY TESTING Our first round of usability testing confirmed design choices and created a list of definite changes to be made or researched further in future iterations.
All users were able to successfully complete the given tasks.
Eight out of nine users said that purchasing tickets was "fairly easy," but most expected screens to auto-advance upon making a selection.
Our team, after great discussion, went against card sort responses when deciding where to place the navigation tool in the app. In testing, most users struggled to locate the navigation tool. Once they had accessed the tool, however, many users found it had great value and appreciated its design over other navigation interfaces they had encountered.
NOTE: Our Axure prototype was used in one round of usability testing, in which users were tasked with buying a ticket to the museum, and navigating to "Fullerton Hall." [Some other app features and capabilities are not yet implemented in this prototype.]
This project was focused on optimizing the form via which a customer can reserve a clothing item in-store from a company's website. The prototype was created in Axure.
The fictional clothing company, LNDN, needs to obtain the customer's store of choice, their first and last names, and their email address.
THE FORM Filling out forms on mobile is tedious. In order to minimize dropoff, I designed a form which would suggest the customer's most convenient store based on solely their zip code. Once the store choice is confirmed, the customer inputs their first and last names and email address on a virtual "tag" for their item. A progress tracker at the base of the form indicates where the customer is in the simple, three-step process to confirmation of their reservation.
IN CONTEXT As opposed to consisting of its own page(s), this form appears as a flyout panel from the RESERVE IN STORE button. The motion of the form flying out from the button provides a sense of confirmation to the customer that they have initiated the process correctly by tapping that button. Additionally. this display of the form indicates the customer is still on the page for the specific item they are reserving. They can easily exit the process midway and resume shopping via the X button on the form, without fussing with back buttons (which might lose their color and size selections, as well) on their browser or device.
THE SCREEN The initial screen of the prototype shows the "ADD TO BAG" and "RESERVE IN STORE" buttons disabled, to indicate that the customer cannot initiate those tasks yet. Once the customer has selected a color and size, the buttons are enabled, and the customer can add the item to their bag or begin the in-store reservation process.