A Desktop

The goal of this project was to design a clickable prototype around the online shopping experience for The of Science (IMSS). I was to maintain the museum’s mission and values throughout this process.

The IMSS Mission

“…to enrich people’s lives by enhancing their appreciation and understanding of the history, development, and advances in surgery and related subjects in health and medicine.”

By

  • “Portraying through exhibits and other appropriate media, the art and science of surgery, and related subjects.
  • “Providing programs and services for the education and enjoyment of the public, students, and the medical profession.
  • “Preserving our collection for the education, inspiration, and aesthetic enrichment of future generations.” (imss.org)

My design would meet the goals of the users/retailer audience, the business and the brand. I followed the double-diamond design model throughout the process, and, through user research, solved the problems with a lo-fi prototype.

Challenge

I redesigned the e-commerce experience for the IMSS website, allowing customers to relive their unique experience at the museum and inspire their online shopping experience through an intuitive journey with less paths to take.

Project Brief

Week 1:

  • Research
  • Analysis and synthesis
  • Ideation and sketching user interfaces and flows

Week 2:

  • Production, testing and iteration
  • Refinements, packaging, and deliverables
  • Presentation of lo-fi prototype

The Problem

  • People do not seek out the IMSS website or the gift shop for shopping; it’s an afterthought.
  • The current information architecture (IA) is not intuitive and is text-dense.
  • The products highlighted on the IMSS e-commerce website are not in tandem with the IMSS museum experience.

Overarching Questions

  • What is the museum’s identity?
  • How do we apply a unique museum experience to coincide with the museum’s website?

The Outcomes

  • Re-creating that peak inspiration museum goers felt at the museum in their IMSS website experience.
  • A lo-fi prototype with minimum viable product (MVP) that highlights some products over others and creates a more intuitive gift shop experience.

Discover — The Research Process

Research

  • 2 user interviews
  • 7 intercept interviews
  • 2 usability tests of original website and e-commerce experience
  • 2-hour observation at the IMSS
  • 3 user surveys

Visual Research

IMSS gift shop items
IMSS exhibit
IMSS exhibit

Define — The Research Results

What People Said: Overarching Beliefs

Sharing the experience. “I’d be unlikely to buy something from the museum’s online shop unless it was something really unique and cool, and I had specific purpose or a specific person in mind to give it to.”

The importance of the museum’s subject. “I think engaging with mortality and the frailty of the human body is actually extremely healthy. These are very real parts of life, and being able to work through some of those feelings and fears and fascinations in an educational context can leave you a little less at sea when those things come a little closer to home.”

Who Visits the Museum

  • Medical students and others in the medical field
  • Those fascinated in the history of medicine.
  • Demographic does not include children.

Infinity Mapping

After conducting user interviews and usability tests on the original website I laid out my findings through infinity mapping.

Infinity map of usability tests on original website
Infinity map of user interviews, surveys, intercept interviews, and observations

Through infinity mapping I discovered the following insights and honed in on the major design principles to focus on for my wireframe and lo-fi prototype.

Insights

  • Online shoppers need less paths to take to purchasing an item because it leads to a more intuitive shopping experience.
  • Online shoppers need an e-commerce website’s wording to be less ambiguous because it makes for an efficient online shopping experience.
  • The IMSS gift shop needs to remind museum goers of their experience because the IMSS has unique content and stories that the museum goers want to remember.
  • Museum goers believe buying gifts for others and themselves from the gift shop, online and in-store, are important because the gift shop is an extension of the museum experience that they want to share and remember.
  • The IMSS needs to provide an educational experience for a wide range of adults because the museum’s demographic comprises of those in the medical field and those fascinated in the subject, and the topics, grounded in history and reality, are important in order to process and understand the evolution of the surgical field.
  • Museum goers need the building’s structural layout to be included in the IMSS experience because the building’s foundation is part of its history and adds to the museum’s blending of science and history.

Solutions

  • Solution should apply the building’s unique and navigable layout with an intuitive website layout that lets museum goers relive and share their museum experience.
  • Shopping experience should solve for the discoveries museum goers uncover in their museum experience and the serendipitous museum-related shopping that is the afterthought.

Develop — Creating the Lo-Fi Prototype

To aid in the development of my wireframes, I conducted two usability tests on the original website and its e-commerce experience.

Feedback on navigation of the IMSS website
Feedback on navigation of IMSS website
Redundancy of museum store pages
Redundancy of museum store pages

Secondary Research

Following my usability tests I did comparative analyses on other museum websites’ home pages and their e-commerce layouts.

Findings:

  • Clickable photos
  • Layout emphasizes visual over textual
  • Online visuals create that peak inspiration museum goers felt when navigating the physical museum.

User Flow of Original Website vs. User Flow of Redesign

I created user flows of the original gift shop experience and of my first iteration of the redesigned gift shop experience. I created less navigable paths to the museum store.

User flow of original gift shop navigation
Revised navigation of gift shop experience.

Sitemap

After creating the user flows I made a sitemap of the home page. In this sitemap I consolidated headers and moved tabs under others to consolidate the depth of the header in order to make an intuitive process of finding certain features. By highlighting the museum’s important features, it would remind users of their experiences or lead users to discovering more about the museum experience. I revised this sitemap after I conducted usability tests on the first iteration of my lo-fi prototype.

Sitemap of home page
Drop-down menus of each section in the home page’s main header

Wireframe Sketching

I brought visuals to the forefront, from the home page to the gift shop experience. The checkout process was intuitive for users in the original usability testing, but it was getting to the gift shop that confused them.

IMSS website redesign
IMSS gift shop and checkout redesign

Delivery — Creating the Final Lo-Fi Prototype

The First Iteration

I conducted usability tests on five users for my first iteration of the lo-fi prototype. I had them navigate from the home page to the gift shop and go through the process of buying a print from the gift shop.

Common Feedback and Observations

  • Prioritizing certain product types
  • Too much scrolling
  • Instinctively went to clicking on photos to explore
  • Arrows were a redundant feature
  • Checkout process seemed long

Second Iteration

After receiving this feedback I went back to the drawing board. I redesigned the prototype to answer to the feedback given to me and aligned the content layout with the museum’s physical layout.

Prototype changes

The final low-fidelity prototype brought the visuals of the museum to the forefront, emphasizing the unique content of the IMSS. I also emphasized certain pages by picture size. For example, the “About Us, “Plan Your Visit,” and “Museum Store” pictures are larger than the “Get Involved” and Education” pictures. The header sections were consolidated and key sections stayed static in the header (search, shop, sign in, home, store hours, and contact).

New home pages
Museum store, gift shop, and product pages
Item page and the start of the checkout process
The checkout process continued

To see more of the interactive process of my lo-fi prototype I’ve included a link to the video below:

https://docs.google.com/presentation/d/e/2PACX-1vSf90THv83czas7rC1xFnQkYkXUsDE4lRtDu4RxQLsFvAVrWyQ0vChCJP4hyZN9RYB-wgXpfm6-zG6J/pub?start=false&loop=false&delayms=60000

My Reflections

Story Telling. It was key to transfer the IMSS experience to its website experience. An immersive website experience that grabs the user’s attention upon entering the website is important to the storytelling process of a museum.

Research and More Research. Interviews of all types will lead you to key insights and solutions that aren’t visible upon first glance.

Iterative Process. It is important to repeat the cycle of designing and redesigning because it will lead you closer to the desired product with each iterative phase.

Painting of the IMSS

About the Author

I am a student in the User Experience Design Immersive program at General Assembly in Chicago.



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here