Once our problem statement was established, I ran a design thinking session for my team. During this exercise, we created empathy maps to help us gain a better understanding of our users.

Click the images to see our personas in more detail :) 

After building out our empathy maps, we went through an as-is scenario map* for each of our personas. My teammates and I mapped out the current user experience to find pain points and design opportunities that we could build from.    

*As-is scenario maps serve to understand a user's holistic experience as he/she works to accomplish certain goals.

Gaining a better understanding of our user's pain points, my teammates and I began ideating on design concepts for the website. We each created a mood board to provide style direction for how the design guide should look and feel. 

I focused on the organization, navigation, and visual design that I believed would fit our user needs. 

My process quickly moved from pen and paper to mocking up low-fidelity wireframes on Sketch for the website. I reviewed the ideas with my design and development to see what would be feasible before moving forward to high-fidelity prototyping.

After low-fi exploration, my team and I moved into high-fidelity mockups to share with the development team (which you can see below). We explored the page hierarchy as well as navigation. 

After deciding what style direction we would head, I began ideating. I begin most ideation with sketching, to allow me to get ideas out of my head. Putting my blue sky ideas on paper allows me to explore new concepts.

This sketch is just one idea I had for the landing page of the design guide. I was thinking about the grid, layout, and the content of the page.

Our core principles were defined to be: human, seamless, thoughtful, measurable, and evolving. These served as the north star for our designs.

Once our design and development foundation was built, my team began building components for the site. I worked directly with my development team to create scalable components that could be used by future developers. I also worked with my design team to create UX best practices for the components. 

Log in

I worked as both a visual designer and UX designer to build a new pattern for our log in experience. This piece involved a lot of collaboration with development as well as explorations on mobile/responsiveness. 

You can see here a UX flow I created to understand how the log-in experience would be for different users.

Below are also some visual design explorations I created for the look and feel of the log-in page. We had to look at both web and mobile. 

Here's a proof-of-concept that me and a front-end developer created to show the micro-interactions and loading states for log in. 

Tours Redesign

I worked with research and development to establish best practices for tours on our design guide. I also worked with both mobile and web designers to establish a visual design for tours. 

Research +  exploration

For the new tour pattern, I began by looking at the current user experience as well as doing a competitive analysis. After getting an idea for the style that I wanted for the tours, I began iterating on a few concepts. 

User Testing

After establishing some design ideas on web and mobile, we ran user testing sessions for feedback. We tested with about 50 people (globally, both in-person and remote user testing) and ran the session over multiple days. For web, we reviewed two design concepts.

The point of the testing was to gather preferences on the aspects of intuitiveness, usefulness, visual appeal, emotional impact, and overall usage preference. 

Once the visual design specs were created, I worked closely with the development team for our product Connection Grids to see how we could implement the new designs. Here you can see the implementation of the new design style with some fun UI animations.