My process can be divided into three primary phases: Planning & Discovery, Execution, and Iteration. This process has guaranteed me to clearly define success and create accountability to know whether I’ve achieved it or not. It also ensures all who have a vested stake in a project are wholly bought into the direction we’re pursuing and that we’re working on the right digital products, while being able to articulately explain why.

PLANNING & DISCOVERY

This phase of a project is the process by which I understand the what, why, who, and how. It works to define what success looks like and how I go about getting there. It also ensures everyone involved in the project is bought in on the vision & direction.

 

1)  Identify User Needs & Gaps through Research and Competitive analysis

I work with the Product Owner to identify any gaps in the vision/mission and help them further define that vision and its value. I also help define and understand the users needs and why they would use this product and feature by doing user research.

Early explorations and research around mobile comics.

Feature-driven competitive analysis allows me to take a detailed look at industry-wide implementation of a desired feature and determine how we might best use a similar approach. I take as much time to understand what’s special about our product, so that I know which comparisons can and can’t be made.

It’s important to partner up with the Product Owner and team to create the end to end concise stories that the team wants the product or feature to tell. These should map directly to product opportunities. This helps everyone understand what we’re trying to do. It gives us end to end flows we can map out, which helps qualify success or failure.

 

2)  iMPACT ANALYSIS

While Product defines KPIs, I try to use this time to understand how I’m going to affect the ecosystem I’m making changes to. What impact will these changes have? Do we think that’s ok? How will these changes impact current user behavior? What things do we expect on launch?

It’s important to understanding that making radical changes to a web or in-game interface that will take users a little while to get used to. Therefore, there may be a temporary dip in performance, but these changes are good long term and fit into a bigger vision.

 

3)  PRODUCT & DESIGN ALIGNMENT

This is a critical step in the process to achieve before moving on the the next phase. At this point, I ensure that all stakeholders agree that the stories I am about to tell are the right ones. I’ve learned that if we don’t spend enough time getting alignment before proceeding down the design path, designs get produced which are way outside the direction a stakeholder thinks the project should be headed, and the “how” becomes the focal point, instead of the what and why.

 

EXECUTION

The execution phase is how I work to design, refine, build, and deliver the MVP to users.

 

4) define success

I get a clear understanding of how we will define success that extends beyond quantitative KPI and Smart Goal data. What quantifies a qualitative success for this project? What would qualitative failure look like?

How well does what exists today perform? Establishing a benchmark from which to test my new designs against helps me understand success, and give me guidance on how to continually improve moving forward.

Hotjar heatmap tracking user mouse movement on the Animation Workshop page on Universe (Desktop).

To establish a benchmark, I’ve utilized a specific testing suite: Google Analytics, HotJar, surveys, and user testing.

 

5) scope & prioritization

This is the step where I help Product identity style and scope of features, experiences, and stories. Some parts will be more functional or utility focused. Others should be more experiential. More experiential sites will rely less on design systems and can take longer to develop. It’s important to know how long it will take and who needs to be involved. Additionally, defining which features and stories are critical for launch, while setting a backlog for future features that will be built in subsequent releases.

 

6) sketching, user journeys & wireframing

Sketching is the fastest and cheapest way to understand the system I am designing. Therefore, I like to take some time to either whiteboard or start sketching some ideas on paper.

Sketching interaction ideas and flow for points of interest on the Runeterra Interactive Map.

Sometimes, I make a site map and wireframe the end to end stories according to prioritization. It’s important to have a good sense of the overall project design. I usually start with top level page designs to get the framework going, but then transition into end to end story design. This is how/where the user will start the story, every step in between, and where they end. This is how I ensure we’re accomplishing our goals and will help diagnose where issues might be along each story.

End-to-end player journey map for League of Legends store gifting and gift receiving experience exercise.

7) prototype, soft testing & iteration

I’ve done most of my prototyping using tools like InVision and Adobe XD, to get feedback and iterate based off user testing findings.

Uploading wireframes into InVision to test mobile device size legibility, mobile gestures and interactions.

I make adjustments as necessary to ensure optimal performance. Sometimes, I make high-fidelity comps and include them in the prototype, but more often I bake in high fidelity wireframes into the prototype without prescribing a visual identity or too much color. I want to test functionality before tacking feel or form into my designs.

 

8) visual design

Once a design is locked, I establish a visual identity to the product or feature, without interfering with performance and functionality.

Star Guardian bio page wireframes were made before implementing visual design passes.

9) design final check & product launch

I usually partner up with Product and QA to go over a checklist to ensure all final content is populated. Have I set up HotJar and other analytical tools for testing? Is the final product polished and in place? Are there any lingering FPO images? Are all responsive breakpoints functioning properly? Is the site accessible? Are there any bugs?

If everything has been fixed and nothing is missing/out of place, the project is ready for launch! Ship it!

 

ITERATION

This is how I deliver post launch features and optimizations. An MVP is the starting place. I don’t expect it to be exceptional, but rather expect it should function well. Being an exceptional product requires iteration and experimentation over time. I believe that iteration in public is a critical component to any web project’s success because it allows me to respond to real time data, while delivering value much more quickly.

 

10) project evaluation, review & iteration

I evaluate the results with HotJar or other analytical tools used for this project. I look for ways to understand which parts of the site are underperforming, performing as expected, or outperforming. Assuming everything launched in the MVP is progressing towards achieving the goals, I am now ready to design new features! If things underperformed, I work with Product to review design proposals and get meaningful feedback so I can iterate a better solution.


Now that you have learned how I work, check out the collection of all things I’ve worked on!