On this page, I'm going to walk you through my design process for turning the Iron Mountain InSight Help Center from This to This.
Methods
Wire-framing in Adobe XD
Prototyping in InVision
Role
UX/UI Designer
Concept Developer
Usability Test Designer & Conductor
Technical Writer/Business Analyst
Deliverables
High Fidelity Prototype to be-
-Developed into Live Website
STEP 1: UNDERSTAND
My main focus during this understanding phase was learning about what Iron Mountain InSight is.
If I was going to make a Help Center for a product, I better know it like the back of my hand! I started with the IRM InSight User Guide. I knew most people wouldn’t be thrilled about having to read a 70-page document to learn how to do something. So, my first challenge was figuring out to make this user guide into something that was easier for people to digest. How could I help the people that wanted to get started right away? The solution… a quick read in 10 minutes or less! More details about this transition are in the Design/Analysis Step
STEP 2: RESEARCH
Learning About Competitors:
A common theme I found throughout many help centers was fun and playful vibes, which makes a lot of sense. People are visiting a help center because they can’t figure out something they want to do on their own, which can be a frustrating experience. Therefore, the help center shouldn’t be adding to that frustration.
Creating a Moodboard:
Creating User Personas:
I created user personas to help drive my design decisions by contextualizing users in terms of goals and capabilities. However, this information is confidential to Iron Mountain so I cannot go into detail about this process or show images of the personas I created.
STEP 3: DESIGN & ANALYSIS
Workshopping:
I led a design thinking workshop with the Iron Mountain UX team to try and quickly generate a bunch of different ideas for how a help center could function and look.
Sketching:
After the workshop, I summarized all of the generated ideas in a couple of sketches. I started with hand-drawn sketches because it helps get my thoughts down quicker and not lose track of my ideas.
Wireframes:
Then I converted the sketches into Freehands wireframes on InVision so it would be easier to share my ideas with the other UX designers. This is a sample of the wireframes I created:
High Fidelity Mockups:
After consulting with the rest of the UX Team at Iron Moutain, about my wireframes, I moved forward with creating high-fidelity mockups. Based on time constraints, when I created multiple design solutions for a specific feature of the Help Center, I consulted with the IRM UX team, as opposed to conducting user testing, to help determine why I should pick one design solution over another.
STEP 4: LAUNCH
User Testing:
I created a script for user testing to ensure that the sessions were consistent and ran testing with 1 participant to see things the user like/struggled with were consistent with my predictions.
Then I updated my mockups and the prototype and ran testing with 4 other participants. Based on this feedback, I analyzed the results and made updates to the prototype where I saw sit.
Lastly, I brought my updated prototype to the rest of the IRM UX to get their feedback, analyzed that feedback and made updates where I saw fit.
Acceptance Criteria:
After settling on a “finished” prototype, I started writing acceptance criteria for the UI Development team. The prototype that I created includes features that will take longer than others develop. So, in this acceptance criteria, I ranked the features’ level of priority on a scale of 1-3 (1=needs to be in the first release, 2 = would be nice to have in the first release, 3, can definitely wait for the 2nd or 3rd update.) I ranked the features so that if the UI team was in a crunch when it was time to start developing the Help Center, they would already know what to prioritize and now have to spend time thinking about that.
Moving Forward:
It is hoped the by Q1 or Q2 of 2020 this help center will be updated. I cannot provide a working link at this time because as of now, the help center is only available to users who have purchased Iron Moutain InSight.
Final Prototype:
The final prototype was made with InVision but I cannot make it available in this portfolio because it is confidential to Iron Mountain.