TechReady website

UX design for a Microsoft event site.

Microsoft’s annual TechReady conference had a website in need of a serious reboot. Years of excel tables and word docs had been piled on top of one another, without serious thought to the site architecture or user experience. The result was hundreds of pages of unorganized information with no particular structure.

I was brought in to completely redesign the site from the ground up. The new and improved website would also serve as a template for the TechReady app redesign.

Role: UX, wireframes, user flows, documentation

Creative Director: Suzanne Asprea       Sr. Digital Producer: Drew Albenze

Client: Microsoft      Agency: Publicis Experiences
techready wireframes image

Blow it all up and start over

The Problem Opportunity

Tons of content, next to no structure. The existing site wasn’t responsive, and didn’t conform to any styleguide or branding. In short, it was a mess. On the plus side, I was given carte blanche to design a solution.

Make it work

The new site needed to be responsive, intuitive, and scalable. I started by compiling all the different existing content types and grouping them into modules. These would serve as the interchangeable building blocks of the site.

With Creative Director Suzanne Asprea working on the information architecture, we were able to determine a hierarchy of needs and user pain points.

information architecture user experience tech ready

Information architecture example courtesy Suzanne Asprea.

whiteboarding mobile user experience tech ready

Mobile wireframes example courtesy me.

Iterating is for winners

Start small

Mobile first is the phrase that pays, so I focused my energies towards building a finger-friendly framework and scaled up from there. Hundreds of wireframes, iterations and feedback from stakeholders led to a responsive design that could be easily implemented and maintained by the dev team.

wireframes for mobile tablet desktop schedule builder

A few examples of in progress wireframes.

wireframes for desktop schedule builder

Refine, rinse, repeat

Fin

The end result was an organized, intuitive, responsive site. Attendees could now view the event calendar and build their schedules on any device. Information was designed to be scannable, searchable and easily surfaced rather than buried behind a maze of links.

I created a scalable modular content framework that made adding, updating or removing content easy to build and move around.

My role concluded with presenting the wireframes with documentation to the stakeholders.


Click on the images below to see wireframe and documentation examples. You can use your arrow keys to navigate in lightbox mode.