SCOPE: Interactive Wireframe Prototype

DURATION: 2 weeks

OBJECTIVE: Redesign website and mobile app

ROLES: Business Analysis, Information Architecture,
User Flow, Navigation, Site Mapping, Wireframing, Form Design, Prototyping, User Testing

TOOLS: Sketch, InVision

CONTEXT: Mock client, solo project

PROTOTYPES: Website  |  Mobile


We were tasked with developing an online shopping experience for a local cultural institution.  I chose the Chicago Architectural Foundation.


CAF was established in 1966 as a not-for-profit preservationist movement attempting to rescue a Prairie Avenue mansion targeted for demolition. It’s now the world’s largest public architecture organization, serving over 500,000 guests annually taking tours by boat, bus, bike, EL and on foot.


68% of CAF’s revenue is generated by their tours. In fact their Architectural River Cruise has been voted Chicago’s #1 outdoor attraction by both Trip Advisor and the Chicago Reader multiple times.



Some of the comments about the online experience:

“The tour related products are better organized than the tours."

"They were hard to find.”                                                   
“There are no happy photos”

“Happy pictures make me want to experience their happiness on tours.”

“I would buy the items related to my tours.”

 “Navigation takes too long to search for a tour.”

“I didn’t know there was a store until our boat tour guide mentioned it.”


Initial research with shoppers both in-store and using the current online store revealed several key themes in regard to both how the river cruise is marketed on their store and the lack of store presence for river cruise patrons.


Other findings included:

  • Some shoppers in the Michigan Avenue store weren’t aware of the online store.
  • Out-of-town visitors (Trip Advisor and Yelp reviewers interviewed remotely) used the website to research the cruise as part of their visit to Chicago.
  • The website needs to be designed to make it easier to find and reserve cruise tickets and do a better job of communicating the experience of the river cruise.
  • The river cruise is by far the most popular CAF tour, but it’s the only one that doesn’t originate from their store. The river cruise docks eight blocks north at Michigan and Wacker, so there’s no convenient way to turn those riders into shoppers either before or after the cruise.


Based on the problems identified through the research, these design mandates emerged:

  • Online shoppers need a simpler path on the website to buy cruise tickets
  • Online shoppers need “a taste” of the experience to be swayed to buy

River Cruise customers need a convenient way to access store merchandise without walking the eight blocks to the store


After solidifying the mandates, I developed two basic personas to begin to understand what user flows might emerge.


For the mobile site, I developed a storyboard (shown right) to help clarify the important interaction points. Since we know the Carmichael family has a big day in the city planned, there’s a good chance they’ll never make it to the brick and mortar store after the cruise, but it’s pretty clear they’ll be using their mobile phones taking plenty of pictures to post.


The sketch below illustrates the two main paths our user Rochelle would like to take: The tour booking path and the store path. Here I’m looking for ways to improve on the current site’s ability to integrate the paths.

Then the idea of using the mobile version of the store as a tour companion began to emerge. Integrating supplemental information about the buildings on the tour that leads directly to related items from the store complements the desktop component. Adding a social media component into user’s picture taking helps extend the CAF brand.



In a first iteration of the online store, I used those round icons to define categories of tours shoppers could book. This referred back to information gleaned from user interviews. Users found that the way tour related products were the organized were easier to find than the actual tour information. Also, based initial research, I added video to the river cruise reservation page to communicate the appeal of the experience.

On the mobile portion, I established three main paths users could take. Supplemental tour information accessed either through a tour map or building list both ultimately leading to items in the online store, social sharing function for their photos, and a direct path to the online store.


After developing clickable prototypes for both a desktop and mobile solution, I conducted user testing. For the most part, the initial design succeeded in fulfilling design mandates, but there were elements on both desktop and mobile versions that could improve the user experience.

User testing revealed an opportunity for even simpler paths to tour sales on the desktop side. In the second iteration now features three ways to navigate to the boat tour page in a single click from the main page, and a two click path that takes the user to see all five main tour formats offered.

User testing also revealed a need for additional features on the mobile side. User testers we unified in looking for a way to access their tickets from their phone or to become a member, so those were added after testing.



Click the monitor above for a brief animated tour of the desktop wireframe prototype