Design a conceptual mobile app for one of the Smithsonian's museums.
The Smithsonian Institution is a group of 19 museums, most of which are located in Washington, D.C. From 2018 to 2019, the organization experienced a sudden drop in visitors: from 28.5 million to 22.1 million. For this project, I assumed the non-profit hopes to revive consumer interest through a mobile app and constrained its development to iOS. With all this mind, how might we digitally translate what is a traditionally analog user experience while increasing curiosity?
Prior to the Smithsonian, museums acted more as a display of exotic finds collected by the upper class. So when James Smithson bequeathed his land to the American government for an institution that instilled knowledge, it was naturally a heated debate. After 10 years of discourse, Congress finally accepted Smithson's bequest.
Over 170 years later, the Smithsonian Institution totals to 19 different museums; all draw visitors from across the globe. However, from 2018 to 2019 the organization experienced a sudden drop in visitors: 28.5 million to 22.1 million.
The goal of this project was to revive visitor interest of the different Smithsonian museums. Despite the Smithsonian owning a number of mobile apps, most are outdated and possess low reviews on the App Store. Therefore in this project it was important to convey the existing Smithsonian branding while remaining relevant and contemporary.
The high level objectives were:
- Design a mobile app enhancing the pre-existing Smithsonian user experience.
- Focus solely on one of the Smithsonian museums.
I worked as the end-to-end UX designer and researcher for this project for two weeks in January 2021. In addition, I collaborated with a 3D designer to gain a better understanding of augmented reality (AR) technology.
My research uncovered that users seek out what interests them in museum rather than relying on predetermined routes. Instead of correcting this behavior, I sought out to enhance this experience with the main features and screens I designed below.
From the home screen a user can view featured, current, and upcoming exhibits within the museum so he can more easily distinguish one museum from another. The user also has the ability to read more about a given exhibit if he wishes to learn more.
To give the user a chance to explore the museum on his own terms, an interactive map was designed. A user may also tap on different icons displayed on the map to learn more about particular spaces within the building itself.
With the help of AR technology, a user can learn more about museum artifacts without distracting him from his time with others. Artifacts are scanned before dots appear on the piece itself. Once a dot is tapped, a user can quickly read or listen to the provided information.
My Design Process
- Market Research
- Competitive Analysis
- Provisional Persona
- User Interviews
- Empathy Map
- User Persona
- Application Map
- Task & User Flows
- Mobile Prototype
- Remote Usability Testing
- Affinity Map
- Design Revisions
- Mood Boards
- UI Kit
- Revised Mobile Prototype
I started this project by completing secondary research so that I could uncover existing information about museums and the Smithsonian specifically. The methods I used were market research and a competitor analysis; later assembling information from the former into a provisional persona.
I conducted market research in order to gain a broad knowledge of museums. I first looked into the past of such institutions so that I would better understand the historical impact of the Smithsonian. Then I delved deeper through reading news articles online and sought out opportunities or threats that Smithsonian may want to consider moving forward. Below are a few key findings that I uncovered.
Jumping on the Bandwagon
Museums are beginning to embrace and integrate technology in multiple facets to enhance the each step of the visitor experience, including but not limited to: virtual reality, augmented reality, and artificial intelligence.
This is Our Youth
In the United States, museums are struggling to attract younger visitors. In particular, those in the 18 - 24 year old demographic.
Due to the stay-at-home mandates of the COVID-19 pandemic, there is a peaked interest for virtual experiences.
You Are Special
Using existing data collected from already-existing digital channels, museums can learn more about their visitors and tailor experiences to increase loyalty and possibly donations.
After gaining a high-level understanding of museums, I compared the Smithsonian's competition to learn from their user experiences. For each organization, I navigated through its app and made notes along the way. I looked at both direct and indirect competitors; quickly realizing that mobile apps within this sector are far and in-between.
However, for those that developed an app, each had a distinctly unique user problem. For instance: the Kennedy Center gamified a visitor tour for children, whereas the Phillips Collection hoards a treasure-trove of content that could only be appreciated by adults. I concluded that mobile apps are a digital product museums are still in the process of exploring; with the potential to be a differentiator.
Synthesizing some of the information I had gathered while conducting market research earlier, I devised a provisional persona: "Educated Ed". Despite being ephemeral, Ed was rooted in research so that he would help me determine who to reach out to later in my user interviews.
24 - 35 years old
- Go back to the National Museum of Natural History.
- Seek out virtual experiences offered by museums.
- Taking his kids to an art museum.
- Understanding new tech implemented by museums.
Once secondary research was completed, I moved onto primary research so that I could discover new information about the Smithsonian visitor. I completed this by conducting a series of user interviews.
Acknowledging that provisional personas can only get us so far in design, I sought individuals who embodied the characteristics possessed by Ed. I ended up interviewing five participants, with 80% being male and 60% of them within the 24 - 35 age demographic. Through hearing each one speak, I was truly able to generate empathy for the user.
With primary research finished, it was time understand the new information I discovered. However, before digging too deeply, I transcribed each user interview so that any details obtained would remain raw and unedited.
With the help of my transcripts, I created an empathy map using statements that were spoken by participants. Direct quotes were written down on post-its and organized by the following categories: doing, thinking/feeling, seeing, hearing, gains, and pains. Each participant was represented by a different color to enhance readability and help in visualizing majorities later.
Within the categories of the empathy map I was able to recognize emerging patterns of participants' behaviors, as well as their pains and gains in relation to the Smithsonian. This allowed me to further synthesize the information I collected during the user interviews and gain additional empathy for the user. The most prevalent patterns were grouped into insights. For each insight, I wrote an adjacent user need so that I could later address it in my designs. These insights and needs are all listed below.
Insight #1: Users meander around museums without intention.
"I just kind of wing it. Like, I don't look at a map or search out additional information. I just go. I just go and let whatever there is to be there and wash over me."
Need: Users need to not be restricted to physical locations.
Insight #2: Users seek out what captures their attention.
"I go to a museum, I walk around for a bit. I will look at the exhibits and be like, oh, that looks really cool."
Need: Users need to be allowed to choose specific museum artifacts.
Insight #3: Users appreciate an array of unique exhibits.
"They have a pretty good set of museums that exhibit a wide range of different areas like history, science, art. So there's a good variety there."
Need: Users need to be informed of museum differentiators.
Insight #4: Users go to museums with other people more often than not.
"I really wanted to go to that exhibit. So I dragged my friend to that specific exhibit. And we walked through it."
Need: Users need to not be confined and cut-off socially.
Insight #5: Users see good context as mandatory and excellent context as enlightening.
"I read what they have. If they had something interactive I would do that. If there's a docent there, I can ask questions if there was a tour I was interested in... Those are the best visits I have, instead of just being left in the cold, trying to figure it out."
Need: Users need to have information on museum artifacts.
To summarize all synthesized information from the empathy map and its resulting insights, I created a persona named James. For the remainder of the process, James acted as a continuous reference point of the targeted Smithsonian user. All information of the persona was directly derived from my research to ensure accuracy and eliminate bias.
Based on the insights that emerged earlier as I created my empathy map, a series of "How might we...?" questions were established. These inquiries, listed below, later acted as prompts for my individual brainstorming.
- How might we not be restrict James to his physical location?
- How might we allow James to choose specific museum artifacts?
- How might we inform James of museum differentiators?
- How might we not confine and cut-off James socially?
- How might we give James information on museum artifacts?
In order to come up with ideas of how I might address the needs of James, I chewed on the "How might we...?" questions from earlier. For each question, I listed as many potential answers I could based on what design patterns already exist on other apps, as well as anything that simply came to mind. Once I completed the mind map, I prioritized all ideas according to the goals of the project and the needs of James. This helped me gauge which ones made the most sense to pursue and later design.
With my ideas prioritized according to the project, I put together an application map showcasing the best solutions. This would inform the overall organization of the Smithsonian app, as well as how I would design its navigation bar. Some of the information architecture was based on what already exists on the Smithsonian site. Otherwise, I made assumptions, since I knew I would later determine the app's overall navigability through usability testing.
Task & User Flows
Using the application map as a guide, I created task and user flows. These were made so that I could understand how a user might achieve his needs discovered earlier through user interviews.
I started with task flows in order to understand the potential actions and screens a user would face. These were based entirely on assumptions since I knew I would be testing the same exact flows in usability testing later on.
Knowing that task flows are imperfect due to a lack of acknowledging a user's decisions, I wanted to generate a better empathy for the user. Therefore, in the form of user flows, I thought of how he would navigate through the app with decisions in mind. Like the task flows I created prior, these were based entirely on assumptions since I knew I would eventually conduct usability testing.
Now that I had a sense of how a user would potentially navigate the Smithsonian app within its information architecture, I designed a series of screens. Throughout I remained inspired by the design patterns of Spotify and Apple Maps due to their popularity and therefore would hopefully help in decreasing cognitive load for the user.
I started by sketching low-fidelity wireframes on a whiteboard. As I went along, I made sure to label each sketch to avoid any potential confusion of what was precisely drawn. This helped me quickly communicate the user experience I was striving for without spending hours on Adobe XD.
After sketching wireframes on a whiteboard, I recreated them in Adobe XD. As I went along, I refined some of the elements, such as spacing and overall layout. Despite this, I still kept it relatively basic. This is because during usability testing, I wanted users to focus more on the user experience itself and less on the user interface design.
IV. Prototype & Test
The mid-fidelity wireframes were then configured into a prototype on Adobe XD. This finally gave me the ability to test the assumptions I made about the app's overall navigability, as well as the screens and actions associated with different tasks.
Remote Usability Testing
Using the complete mobile prototype, I carried out remote usability testing on Zoom with five participants. Throughout, each participant engaged in a think-aloud exercise and were recorded with expressed permission. This allowed me to receive real-time feedback on the mobile prototype and gain additional empathy for users through hearing their opinions. Just like my user interviews, I transcribed each test so that all details would remain raw and unedited.
Using the transcripts from usability testing, I pulled salient quotes from each participant on wrote them on post-it notes. Similar to the empathy map, each participant was represented with a different color in order to increase readability and help in visualizing majorities later. Using the affinity map, I synthesized what participants said by separating post-its into the different tasks they completed, as well as a section designated to any remarks about the overall experience. From there, I was able to distinguish patterns of pain points and successes from my testing.
Each pain point that was discovered through the affinity map was then evaluated by how much time it would take to fix against how many participants mentioned it during testing. This helped me determine not only what needed to be fixed on the mid-fidelity wireframes before designing the high-fidelity prototype, but which fixes are more important than others. These fixes became known as my design revisions, with an explanation of how I conquered one below.
During usability testing, 80% of users expressed a desire to explore more within the home screen through engaging with its content. Previously, the home screen only listed a limited amount of museum exhibitions due to my assumption that that would be enough for a MVP. However, this was invalidated. When revising the designs, not only did I increase the amount of listings, but I also designed an additional screen showcasing an exhibit as well.
Once I understood what needed to be fixed in my designs, I went back to understand the fundamentals of Smithsonian's branding. This was completed so that when I finally designed in high-fidelity, I had inspiration to refer back to. I started by creating a series of mood boards based on the Smithsonian's existing brand guidelines and attributes so I would have a better understanding of the overall feeling that the institution conveys.
After assembling the different elements of Smithsonian's branding, I created UI kit to act as a reference document and ensure consistency. If the Smithsonian ever wanted to build additional screens for the app, all of the main UI elements would all be in one place.
Revised Mobile Protoype
Once the Smithsonian's branding was fully established, high-fidelity wireframes were designed with the established UI design elements with the proposed design revisions completed. From there, a new mobile prototype was created in Adobe XD.
- Since this project was completed during the COVID-19 pandemic, usability testing was done remotely and forced participants to mentally visualize given scenarios. For instance, during testing I asked them to find the information desk using the app. For some users, this caused an occasional hiccup before re-immersing back into their imagination.
- Augmented reality is still a developing field and therefore was difficult to conceptualize. While I ended up designing more traditional wireframes within Adobe XD, I also experimented. I tried the Adobe XD plug-in Draft XR and Adobe Aero while consulting with a 3D designer to better replicate the AR user experience in usability testing. However, both of which did not allow me to integrate the flat aspects of my designs.
- Complete another round of usability testing to ensure previous user pain points were successfully addressed.
- Understand whether Smithsonian users can navigate to and find value in the newly added screens in adjacent to the home screen.
- Expand design to include other museums within the Smithsonian Institution.
View my other projects.
Adding features to an existing app that decreases a user's reliance on company's competitors through recommendations and timed streaming.
Responsive website for local bakery that maintains a user's perceived food quality through online ordering and tracking.
Primary illustrations by absurd.design
Additional illustrations by Alex Muravev, Olga, and Tatyana from the Noun Project.