UX Design Project 2 Retrospective

Redesigning an E-commerce Website!

Executing a full 2 week design process while applying fundamental UX skills!

Things are moving quite fast. One word of advice so far… definitely hone the skills you’ve learned in Week 1. It sets the foundation for every future projects.

Weeks 2 & 3: We’re introduced to new techniques in the UX process: Business Analysis, Information Architect, User Flows, Site Map, Web Layout & Wireframes, Interactive Med-Hi Fidelity Prototypes, Form Design, and Usability Testing. Project 2 is about executing a full 2 week design process while applying fundamental UX skills (what we’ve learned in week 1).


Brief: We’re tasked to design an interactive prototype of an e-commerce website of a local cultural organization.

Goal: To improve the online shopping experience. My designs should meet the goals of the users (represented by retailer audience), the goals of the business, and the goals of the brand. My designs should be tested by users and follow IA heuristic best practices.

Challenge: Executing designs that addresses BOTH the users goals as well as the goals of the business and their brand, essentially finding the balance…the ‘sweet spot’. Side note: This was actually a challenge I’ve encountered halfway through my project.


SHORT STORY

Insights:

  • No one knew the online store existed, even people who regularly shop at CAF’s physical retail store.
  • Tourists/locals are least likely to invest in purchasing a tour related item if they’ve never been on a tour, because they wouldn’t have an emotional connection to the tour related items.
  • Tourists/locals tend to purchase items as souvenirs as a reminder of their good experience on a tour.
  • Tourists/locals prefer to shop at the physical store because it gives them the tangible experience they can only get in store.
  • Hard to navigate around the original CAF online store

DESIGN DIRECTION

The solution would:

  • Increase the CAF’s online store visibility
  • Allow our audience to book tours directly from the online store, which would in turn increase the likelihood of purchasing tour related items
  • Instill our audience with confidence to buy online
  • Allow better navigation around CAF’s online store, to give the audience a good shopping experience

INTERACTIVE MED-FI PROTOTYPE

→ Click to View my Interactive Prototype of CAF’s E-Commerce Store!

For more information (the full story) on my UX process of CAF’s e-commerce website, please continue reading.


My Client: Chicago Architecture Foundation (CAF)

Chicago Architecture Foundation

Who/What is CAF? Chicago’s architecture is known around the world. CAF is one of Chicago’s Top 10 cultural organizations and the world’s largest public architecture organization. CAF is the leading nonprofit cultural organization devoted to celebrating and promoting Chicago as a center of architectural innovation. Their mission is to inspire people to discover why design matters.

CAF seeks to celebrate and promote Chicago as a center of architectural innovation and educate people to discover why design matters through tours, programs/workshops, exhibitions, field trips, and much more! They do a lot to promote, celebrate, and educate people about Chicago’s architecture. :)


BUSINESS ANALYSIS

CAF’s Annual Report from 2013–2015

In looking through CAF’s annual report from the past 3 years, I discovered that tours generate the most revenue for CAF.

  • In 2013, CAF tours made up 65% of the overall revenue
  • In 2014, CAF tours made up 68% of the overall revenue. A 3% increase from the previous year.
  • In 2015, CAF tours made up 71% of the overall revenue. Another 3% increase from the previous year.
  • So from 2013 to 2015, they’ve seen a 6% increase in revenue from tours.
  • However, there was a slight decrease in retail revenue. From 2013 to 2015, there was a 3% decrease. (????)

CAF currently offers 85 different tours of the city.

They also host the largest annual architecture event in the city called Open House Chicago (OHC). OHC attracts tens of thousands of participants from across the country and around the world.

It is clear that CAF focuses and invests heavily in offering tours as a way for people to experience Chicago’s architecture. Tours are a great way to promote Chicago’s architectural innovation and to educate people why design matters!

Tours are a great way to promote Chicago’s architectural innovation

What I wanted to learn….

  • What are customers purchasing at the physical retail store? Why?
  • If the tours generate the most revenue for CAF, does the tour experience directly correlate to a retail shopping experience? Basically, does having a good tour experience = more retail revenue for CAF?
  • And what does that mean for people who have never been on a Chicago tour? Do people also purchase items from the physical retail store and online store even if they’ve never been on a Chicago tour?
  • What CAF has been doing well is tours, so how can I use tours as a leverage to drive an increase in retail revenue both retail store and online store? (considering there was a dip in retail revenue from 2013–2015).

USER RESEARCH

Few Facts about the CAF Retail Store:

Chicago Architecture Foundation Retail Store on Michigan Ave.

I started my research using secondary data obtained from the stakeholders at the CAF Retail store:

“25% of foot traffic to the retail store comes from tours”
“Customers receive discount after doing a tour to drive foot traffic into the retail store”
“Docents/tour guides inform customers about the retail store after a tour”
“Customers receives 20% in store discount if they buy a membership”
“The items sold in store & online are the same inventory.”
“People are able to book tour tickets directly in the physical retail store”

They use tours to drive foot traffic to the retail store!

What are people buying at the CAF’s physical retail store?

The CAF Shop offers Chicago and architecture-themed products

Chicago & Architecture-themed Products sold in CAF’s Retail Store

From interviewing people at the physical retail store, I discovered they purchase:

  • Souvenirs after a tour, items related to a tour
  • Gifts for friends/family
  • Generally there to browse “interesting and cool items” for fun
  • To book tours directly in the physical retail store

ANALYZING THE DATA

Organized the data from my interviews on e-post-its
Organized the data from my interviews on e-post-its

Audience: Tourists & Locals, in their 20s-40s

Insights:

  • No one knew the online store existed, even people who regularly shop at CAF’s physical retail store.
  • Tourists/locals are least likely to invest in purchasing a tour related item if they’ve never been on a tour, because they wouldn’t have an emotional connection to the tour related items.
  • Tourists/locals tend to purchase items as souvenirs as a reminder of their good experience on a tour.
  • Tourists/locals prefer to shop at the physical store because it gives them the tangible experience they can only get in store.
  • Hard to navigate around the original CAF online store
“We came here after our tour! I did not know there was a store until the cruise tour guide mentioned it
“I come to this store often because I am an Architect and like unique designs, but I did not know there was an online store”
“I wouldn’t buy any tour related items in the online store or the gift shop because I don’t have an emotional connection to it
“If I had a great experience on a tour, I would most likely buy something in person”
“I would want a souvenir from a tour I’ve been on
“I wish there were more more books sold in the store. I might buy it online but still would rather buy in person because I want to feel the book and look at the pictures inside of it
“If the experience isn’t good online, I won’t buy the product

DESIGN DIRECTION

The solution would:

  • Increase the CAF’s online store visibility
  • Allow our audience to book tours directly from the online store, which would in turn increase the likelihood of purchasing tour related items
  • Instill our audience with confidence to buy online
  • Allow better navigation around CAF’s online store, to give the audience a good shopping experience
Purchasing Cycle of CAF’s Online store

From a business centered design standpoint, if my designs can increase the online store’s visibility, this may increase the likelihood of people booking tours, which in then would lead to purchasing of tour related products, and that would result in more revenue for CAF’s tours and retail.

SKETCHES

Initial sketches of the Redesign of CAF’s online store

Based on the ideas that came out of the ideation session I started sketching ideas out including features, site map, and user flows to try and figure out how some of the ideas might work together, at which point in the journey would we be meeting our users goals and business needs, and figure out where the roadblocks might be.

SITE MAP & USER FLOWS:

Site Map of CAF Online Store
User Flow of CAF Online Store

THE SOLUTION

Redesign of CAF’s Online Store’s Landing Page

Online Store Front Page Redesign:

  • Scrolling pics of products inspired by Chicago, and architecture in the top center
  • Clean, simple, main navigation
  • Image of a Chicago tour in the center, which allows customers to click and book a tour on main page
  • Image of items related to a Chicago Tour
  • Image of gift Ideas
  • Allow customers to find info on shipping in the FAQs at the footer
Left to right: Product Items Redesign, Product Page Redesign, Items By Tour Page Redesign

Redesign to increase visibility of CAF’s online store:

There are a few solutions I believe will help to increase the visibility of the online store and drive customers to the online store.

  • Offline marketing, sales associate can tell customers at the retail store that they have an online store. Maybe mention if they don’t want to carry a huge item home, they can purchase it online.
  • The online store link isn’t apparent on both the CAF’s home page and Open House Chicago’s homepage. It would need to be move up to the top navigation bar on both websites so it is more visible.
  • In my redesign, a customer can pin all the product items on their Pinterest so it can be shared on social media, thus increasing visibility of the online store.

User Testing:

“I would love to pin pictures of the items I see on the online store. It’s mainly so I can purchase it later or find something similar”
“I wouldn’t want to share the item on my FB or Twitter, but I use Pinterest a lot so I’d like to pin it there

Product Page Redesign:

I designed the products page to have as much information about the product as possible, to instill our audience with confidence to purchase the items online vs only in store.

  • Clear descriptions of the product: Fabric material of the product, the weight, the dimensions, etc.
  • Clear images of the product, front, back, side
  • Clear image of the product in a real life scenario, and a video of the product as well.
  • Reviews from users designed to instill our audience with confidence to buy online

User Testing:

“I would not buy items that does not have clear product descriptions
“The image of the product in a real scenario is a great idea! It’d help me visualize what’d look like in my home before I purchase it!”
“Sometimes I can’t tell how big or small an item is just by the dimensions. The dimensions might be inaccurate. The pictures would help me visualize better
“Having product reviews would be very helpful to validate the accuracy of the product description”

Items By Tour Page Redesign:

  • Clear video of a fun Chicago tour experience in the center, allowing them to book a tour directly on that page as well.
  • Categorization of Items related to a tour
  • Items related to a tour organized directly below the video

Videos are a powerful visual that evokes emotions. If users didn’t want to purchase the products because they’ve never been on a Chicago tour, once they view the video, it may encourage them to book a tour. And again, once they go on a tour, they will then most likely purchase tour related products online and in store!

User Testing:

“I am a very visual person. The video of a tour would give me an idea of what the tour is and would make me want to experience that tour
“I would very likely buy an item after I went on a tour as a souvenir
“The video would make me feel it would be a fun activity for the family and I would go on a tour based on the video alone”
“If I wanted to go on a Chicago tour already, a video or an image wouldn’t matter. If I was not in the market for a Chicago tour, the video would definitely make me want to go on one!”
Conducting Usability Testing

Interactive Med-Fi Prototype

The link below is the 2nd and final iteration of my Med-Fi Interactive Prototype of CAF’s online store!

→ Click to View my Interactive Prototype of CAF’s E-Commerce Store!

Overall thoughts:

Midway through my project, I found that designing the e-commerce store to meet the company’s goals and users goals proved to be a challenge. My design process in the end was very much a business centered design. My goal from the very beginning was to analyze what CAF was doing well and looked into improving areas in which they were lacking. In this case, there was a slight decrease of retail revenue and I sought to execute a design that would improve the shopping experience online, which would in turn improve CAF’s overall retail revenue.

Business Centered Design vs. User Centered Design = finding the balance, the “sweet spot”

UX designers have 2 goals: help the user, and help the business

Feedback from my instructors revealed some insights. If I had taken a user centered design approach, to focus solely on the user’s goals and needs, why they go on tours, what they feel when they go on these Chicago tours, maybe I would have uncovered new insights and taken a different approach to my design? Next goal: Meet the users goals as well as the business goals in the next project!

Like what you read? Give Jenny Raygoza a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.