United States Holocaust Memorial Museum
A case-study on my redesign of the USHMM mobile app.
INTRODUCTION
I was extremely honored to have been given the opportunity to work with the United States Holocaust Memorial Museum (USHMM) in helping them re-design an outdated mobile app which was no longer being supported by the design and development team in Washington, D.C. Now having a full understanding of the impact and importance of this opportunity, one might expect to have upwards of a years time to work on a project of this magnitude…we had three weeks. Below I will detail out the process that myself and my design team (4 members on the iOS team, and 4 members on the Android team) went through. Despite the short timeframe we were able to produce and present a final product that was extremely well received by the entire USHMM organization. I need to note that it was truly an honor and privilege to be able to work on such a project and I can honestly say it has made me a better designer.
MY DESIGN PROCESS
For a quick read on how I approach Design and solving problems click on the link, “My Design Process”, or access it through my publications page.
EMPATHIZE
One of the very first things we set out to accomplish during this design process was to gather as much research as we could about the USHMM mobile app in its current form. We wanted to take time to look at the direction that the investors/stakeholders in Washington, D.C. saw the app going, and finally what our main assumptions were about how people used this app. To kick things off we sat down with Shawn Perkins, Creative Director in charge of the USHMM project. Below are some of the questions we asked Shawn.
EMPATHIZE CONTINUED…
Assumptions and Goals
Once we sat down with Shawn we were able to get a better understanding of the problems that the current app was facing. From this conversation we were able to deduce that there were a few assumptions and goals that needed to be addressed when re-designing this app.
DEFINE
Creative Briefs
Once we felt comfortable that we had done our due diligence it was time to define in more detail how we were going to go about solving the issue at hand. In order to do this we started by formulating a 4-page creative brief. For the sake of space I only included the first page of the creative brief as to give you an idea of how we approached this particular step.
Despite not being visible above, the following areas were also researched in the remaining pages of the creative brief: what do we know about our primary and secondary users, what is our key message and how will that resonate with our target audience, how would we measure success, and finally, any challenges we might encounter throughout the entirety of this process.
Personas
It was at this point that the project was starting to come together and the entire group was eager to move forward. The next logical step for us was to create several Personas which encompassed who we named as our target audience. For this exercise we ended up creating one Primary Persona (Sarah), a two Secondary Personas (Brady and Monica). Each Persona was created with three main categories in mind; goals, frustrations, and motivations.
IDEATION
Sitemaps
Something we did to help us focus on what content was already available on the mobile app (iOS) was to create a Sitemap. Once we started this process it was easy to see that the Information Architecture was not set up in a way that was conducive to a successful platform. Below is a snapshot of the Sitemap we created for the pre-existing USHMM mobile app (iOS).
User Story Maps
Following our Sitemap exercise we proceeded to begin one of my favorite steps, the User Story Map. For this exercise all of us got together and wrote down as many ideas as we could come up with as options for our app within a 15 minute time-frame. It doesn’t sound like much but by the time the alarm sounded we easily had hundreds of post-it notes with all sorts of ideas for our re-design. Now the pictures below show a nice uniformed and clean looking User Story Map. What you see is our final product with an MVP (minimum viable product) established. Let me assure you that it took multiple days to even come close to reaching this point.
User Flows
Once our MVP is defined and we have a better understanding of what we want in our app we proceeded to create a User Flow. The User Flow is important in the design process as it allows you to write out how you want the app to transition between its content. This is a very important step in ensuring that you have strong Information Architecture. Due to the overall size of our re-design I only opted to include the User Flow from one small section of the app entitled, “About the Holocaust”.
10 x 10 Sketching
Finally, we have reached a point where we are creating ideas of screens that we’d like to display in our app. The purpose of this step was to get out as many ideas as we could about each of the screens that may fit into our designs. Again due to the amount of work completed on this project I only included a handful of my own sketches.
10 x 10’s CONTINUED…
After several days, and multiple iterations we finally decided on a general design of screens for each component of the app.
SURFACE DESIGN
Low-Fidelity Mockups
Once we had completed our sketches and had come to a decision on the direction we wanted to go we began our next step, wireframes. All of the wireframes you see below were completed in Sketch. As you’ll notice I purposely put in images of wireframes that ended up going through several iterations by the time the final prototype was created. I think its important to note that even though you’ve put in all of this time and effort into making your designs exactly how you planned there will always be room for improvement. It’s important to communicate with your design team constantly so you can go back and make any necessary changes along the way.
High Fidelity Mockups
Once we had established our low fidelity screens we moved on to our higher fidelity mockups. This process was definitely easier on us as a team because the USHMM organization already had a style guide in place. That way we didn’t have to worry about color schemes, typography, etc.
PROTOTYPES
As I have done in the past I put together an interactive prototype in InVision (click here) that showcased our work. The live prototype can also be found at the top of the screen. *Disclaimer: Due to this prototype being several years old I cannot speak to the current quality of the demo.
CONCLUSION
Even though we didn’t have a budget or the time to complete any extensive testing and analysis we were able to showcase our work back to our client. The entire team participated in a massive design review in which each member of the team took a particular part of the design process and explained what we came up with. Much to our surprise we received exemplary remarks from the entire USHMM organization and are being told that a lot of our design ideas will possibly be implemented in the upcoming release. Needless to say this was an honor to hear. Each member of my team was thrilled to have had the chance to work on such a prestigious project and I know we all look forward to the fact that this is just the beginning of the journey.
