I rebuilt the entire web presence of Oracle Developer from the group up


The challenge

When I joined Oracle Developer Relations, there was no UX process, no usable design system, and no research on the people we were designing for. My job was to build all three and lead a team doing it.

Business needs

Oracle Developer Relations was undergoing a complete overhaul of how it communicated with its users across web, social, events, education, and community. Leadership was committed to building something world-class, and they needed someone to create the UX foundation from the ground up.

Existing structures & process

What I found when I arrived made the challenge clearer: there was no design process in place. Stakeholders reached out directly to designers and told them what to build. The existing design system had been cobbled together over 15 years without maintenance — components built on different grids, using different CSS classes, with baked-in legacy branding. Figma files were a mix of broken components, screenshots, and mismatched grids. There was no documentation, and the team that owned the system couldn’t support new additions or changes. Publishing a page in the existing environment could take weeks.

The process

Step 1 - Creating goals

  • I supported our client services team that worked with our clients and stakeholders to define our goals and objectives by participating in an MVP process.

  • I supported our strategy team to define high level tenets that guided our messaging and content strategy by providing historical account context and deep knowledge of our product & service lines.

  • I supported our marketing sciences team to define our KPIs based on business goals, client objectives, and stakeholder needs by providing context around client history and preferences.

Step 2 - Understanding the landscape and users

  • I reviewed the performance analysis of previous product marketing pages to identify which content was most effective building an early list of appropriate content and design patterns.

  • I reviewed user research insights generated by during previous projects with similar audiences establishing a list of user needs & preferences.

  • I performed external competitive analysis evaluating competitive feature sets, storytelling, and purchase flows. Using those reviews, I defined a series best practices for media service marketing.

A slide from the external audit showing features sets of competitors in media subscription services.

  • I presented the analysis, insights, and communicated our next steps to the client.

Step 3 - Building the information architecture

  • I defined the content by performing content audits, identifying all of types of content possible and evaluating which content was appropriate for our audiences, clients, and stakeholders.

  • I performed content organization exercises that resulted a content blocking deliverable showing the page content in space which helps us evaluate a first visual draft of the story telling.

A slide form the information architecture presentation showing how I organized and presented the information to our clients.

  • Once I understood what a good service looked like, and what content we wanted to include, I focused on integrating the pages into the larger site. I created user flows, a site map, and added the pages into an experience map showing how it lives in the overall Xbox experience.

Sitemap showing integration into the larger site, and where messaging lives across the full site.

  • I generated a user flow diagram to illustrate how the users move through the marketing site and how it connects to the commerce site.

User flow digram showing integration into the larger site and connection with the purchase flow.

  • I presented the information architecture work and our process to the client guiding them through our thinking and getting initial reaction to the storytelling, content, and feature sets.

Step 4 - Designing the page

  • Once the client approved our content structure, I created wireframes, highlighting the content, layout, key messaging points, and the recommended modules.

Annotated wireframes

Annotated wireframes

  • I supported the visual designers as they built a set of visual comps based on my wireframes.

  • I explored new visual pattern alternatives and specced out interaction design for new modules.

Interaction design exploration showing hover state and media previews.

Step 5 - Designing for PC

  • Once the primary page for the highest tier was completed, I performed a similar process for the PC version, tailoring the messaging and content to PC audience needs.

Xbox Game Pass for PC product marketing page showing custom messaging designed for PC gamers

Xbox Game Pass for PC product marketing page showing custom messaging designed for PC gamers

Step 6 - Handoff & Development

  • I supported our production design team members as they redlined, cut assets, and specced out the designs.

  • I performed a quality assurance pass before and after launch.

Step 7 - Post Launch

  • Our marketing sciences team generated post launch performance reports and we made minor adjustments and optimizations as appropriate.

  • We added A/B testing opportunities the to the backlog to generate future insights.

  • We followed the launch with an update cadence calendar guiding the growth of the page over time.

See it live at Xbox.com