Creating a Strategy for a Site Redesign Under Complex Creative and Technical Constraints

 

THE PROBLEM

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

[Our client had mentioned that they’d like to have a site redesign, and started to imagine what a site with updated user interface elements and some minor changes in how content was organized. But our team knew the truth. The site was becoming outdated, and was built as quickly as possible. Tech debt was building. Code was hard to maintain and user research was telling us that core user tasks weren’t being completed by the audience. ]


How could we discern the site’s areas for improvement that would make the valuable impact in the real world?

How could we guide our client towards creating change that substantially improved the product beyond superficial, stop-gap efforts?

 
 

OUR CHALLENGE

How might we redesign the product in ways that we could be sure were truly valuable to the business and the audience?

MY ROLE

• Design Thinking/Innovation Workshop Facilitator
• UX Strategist
• UX Design Lead
• UX Designer

 
 

THE SOLUTION

Strategically reimagine the site from a shared understanding gathered from across all departments

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

[With an effort so broad, our team knew we needed to consult all involved across the product’s organizational ecosystem. Those unique perspectives would guide our decision making for understanding what was important, and what efforts would have real-world impact where it mattered.]

Our mission was to find what was really holding the product back, and thread the needle between the visions and goals of every player in the organization. Here’s a closer look at the open-ended, operational questions we asked workshop participants. The thoughts and agendas of each department, stakeholder, and leader slowly emerged.

 
 

BUILDING A HOLISTIC STRATEGY

Bringing Together All Perspectives

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

[The unique perspectives shared with us by all of the capacities and stakeholders allowed us to group the areas for improvement into major themes, each with their own hierarchy of needs (discerned through dot voting). This gave us a great picture of the key areas where impact could be made, but we couldn’t make every change that had been elevated. We still needed to rank and prioritize these themes for improvement to create an effective action plan.]

 
 

PRIORITIZE ACTION FOR IMPACT

Balancing Feasibility and Impact to Create a Priority of Action

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

[Next we needed to consider priority. We found that there were many areas of the site that we could improve, but with limited time, money, and personnel, we needed to create a hierarchy of priority to account for scarcity.

First, we took the major improvement themes and worked with the entire organization to plot them on a feasibility vs. impact matrix. This allowed our core team of builders to see what themes should be quickly acted on, considered, or left for a future iteration.

Things were still at a high-level, though, so we had another private workshop with the core team of makers and producers. This private session mapped the action items within the improvement themes on their own priority matrix. This matrix became the north star for what the project would include because it was colored by the perspectives of the stakeholders but decisions were made by the “boots on the ground” who would be building the redesigned site.]

 
 

DEFINING FOR RELEVANCY

Refactoring Action for Relevancy

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

[It was time for the core production team to take over the entire project, keeping the departments’ stakeholders informed while progressing the work. We realized there was still a need to narrow our focus under a constrained timeline, so each capacity within the team worked together to decide what was the 1-or-2 action items that should be brought forward into the project scope.

 
 

MAPPING VALUE ACROSS THE EFFORT

Deriving User Stories by Defining Value per Effort

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

[We charted the efforts into a three-pronged plan of attack, divided by the capacities working on the project. The creatives had accessibility improvements and a design system to build and document, UX (myself) had to undergo user research and revamp the information architecture and content strategy of the site, and the developers were tasked with building a condensed codebase that was modular and extensible.]

 
 

DEFINING SCOPE AND MILESTONES

Building a Backlog to Understand Project Scope and Timeline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

[Each of the actions used to compose our epics was used to write a user story, represented by tickets in our project backlog. I met with each member of our team to interview them about the actions they had been assigned to make sure we weren’t committing to too much and that there tasks were correctly recorded. Those conversation resulted in a granular definition each action item…and just like that, our project had a scope.]

Two views of our project scope labeled by corresponding epics and assigned to the capacities responsible for the work.

 
 

THE RESULT

Redesigning for Impact and Efficiency

An experience lift
When all was said and done, the site had been revamped where it really mattered. Using rigorous user testing and insights, we built a newly-designed information architecture that was optimized for mobile use and tailored to the audience’s own lexicon and mental models of our site’s content.

Fast, portable, and standardized execution
A new responsive and modular design system was created in Figma with variables that would give creators the technical brand guardrails they needed but still afford them the creative freedom the needed in their visual designs. The design system was extensibly documented with best practices, edge cases, accessibility notes, and thorough rationale for the use (or exclusion) of any component within any new or existing page.

Lowered production costs and increased speed-to-market
Lastly, the codebase of the site was revamped and finally made fully modular. Efficiencies won by this effort reduced development times by nearly a quarter, as developers were able to easily make global changes and create new functionality within the same pre-determined frameworks and standards as the rest of the elements on the site.

A look at some of our final deliverables. The fundamental basis of thought had been cemented, creating a cornerstone reference point for efficient launches in the future.

 
 

REFLECTIONS

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

[Creating a strategy for any improvement effort is hard in a large enterprise organization. There are lots of ideas, strong opinions, and strong personalities to contend with. As we say on our team, “the swirl is real,” and efforts like this can easily descend into analysis paralysis, where everyone talks endlessly yet nothing gets decided, much less done. I believe that lots of things can be directionally informed through impromptu conversations, but real strategy doesn’t exist until we put pen to paper, until we place each complexity into an organized hierarchy of thought. Only then can we create a shared understanding, organize, define, and prioritize what must be done. Some efforts are too big to be left up to the whims of an unstructured conversation.]

Content Strategy is a Workshop, not a Meeting.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

[This project taught me that sometimes niether ourselves nor our clients have the full perspective of the product. Rarely does any one person know how to steer the ship. Even when we think we know everything about our product, there are perspectives in the minds of all involved that would dramatically shift how we choose our actions to take. It’s not until we develop, with clarity, the full range of team perspectives, requirements, and creative constraints, agendas, etc. that we can start to distill a focused plan with impact. ]

 

Learnings and Takeaways

  1. Lorem ipsum

  2. Lorem ipsum

  3. Lorem ipsum

  4. Design Strategy is essential to complex team efforts and must produce a well-considered approach.

  5. Team workshops expose ideas that would’ve otherwise gone unnoticed. Group discussion and workshops create a confluence of these ideas, resulting in impactful design concepts.

  6. Many important actions, while sounding exciting, will not make it into the final project backlog due to technical constraints, expenses, time required for completion, business agendas, etc.

  7. Taking time to understanding the specific real-world value result of an action often clarifies its priority.

  8. Real opportunity for product improvement is rarely superficial, is usually non-visual, and exists instead as part of the environmental infrastructure surrounding the product.