Dana SmithamMicrosoft Xbox · Launch site
Ready for the reveal
A responsive launch framework for the Xbox One, designed while most of the details were still under wraps.
- Client
- Microsoft Xbox
- My role
- UX designer on the launch site team
- Moment
- Xbox One reveal, May 2013
- Outcome
- 500K+ pre-orders in 72 hours
The challenge
On May 21, 2013, Microsoft revealed the Xbox One. One landing page had to carry all of it: the live stream, specs, images, and pre-orders.
We were designing under five NDAs. Very little information reached us during planning, and clear direction and business goals didn’t arrive until close to launch.
My role
I worked alongside the lead designer on the structure, look, and feel of the launch page. Together we took the work from stakeholder presentations to wireframes, layouts, and final design specs.
How we approached it
Build a process that could bend.
With so much unknown, a rigid plan would have broken. We set up a process the team could adjust as information arrived, and that flexibility carried us through.
Structure what we did know.
We started with the navigation buckets we knew the site needed, then explored site maps and information hierarchy around them.
Plan for the worst case.
Features and content kept shifting, so every wireframe had to hold several layout options. The site also had to be responsive, so we set a grid that worked down to mobile.
About three months out, we wrapped the wires in brand color, type, and existing visual elements to test spacing. We didn’t know how much content we’d get, so we planned for the worst case and worked backward.
Have options ready.
As launch got closer, we built several high-fidelity layout options for the feature areas, so we could move fast once real content landed.
What it led to
Live screenshots, product shots, and photography arrived late. We got final sign-off on layout and content one week before launch, and the options we had already built made that tight window workable.
The UX framework stayed in place after launch, with content updated regularly.
What I took from it
When most of the brief is unknown, the job is to design something that can absorb change. I still plan with teams that way.
Earlier work. Results come from the original project.
Your next challenge.
Our next conversation.
Let’s talk about your team and what comes next.
Client
Microsoft Xbox
My Role
UX Design
The Project
On May 21, 2013, Xbox announced the Xbox One. I was on the UX team responsible for the landing page that housed all the information relating to the console, including the live stream of the announcement, specs, images, pre-orders, etc
The Approach
My team and I were responsible for the look and feel of the Xbox One landing page experience. We worked with internal stakeholders on this highly classified project with sensitive material. Designed a flexible framework for the responsive landing page that has the ability to grow and flex with many different layout options. Working alongside the lead designer, we took the designs from stakeholder presentations to wireframes, layouts and finally design specs.
Below is the design process that we set in place for the Xbox team. This assignment was unique in that we had to be flexible with the process. Not having a clear direction or business objectives until closer to launch made the team more fluid in their approach to tasks and milestones.
Navigation Structure
We were working under very strict NDA’s (5 to be exact), and not a lot of information was getting released to us in the planning phase of the website. So we took the buckets of navigation we knew we had to have on the site and explored site map structures and information hierarchy.
Early Wireframes & Blocking Wireframes
We started with basic wireframes and layout options to show stakeholders and start discussions. Focus features and content was constantly in flux, so we had to be flexible when designing wireframes to be able to accommodate multiple layout options. We also knew that the site had to be responsive, so we set a grid in place that would accommodate a mobile design.
Getting closer to launch (3 months out), we started to wrap the wires with branding colors, fonts, and old visual elements to get a sense of spacing and layout. We weren’t sure how little or how much information we were going to have at launch so we planned for the worst case scenario’s and worked backward.
Getting closer to launch, it started to become real. There were several iterations of feature layout options we produced so when the time came to launch we would be ready with options.
High Fidelity Wireframes
Final Designs & Launch Screens
We finally received live screenshots, product shots and feature photography to roll into the final layout. We got final sign off on the layout and live content one week before launch. The multiple iterations we had created made the condensed timeline of the launch easier to handle.
Over a million people watched the live stream of the Xbox One announcement on the website, and it took in more than half a million pre-orders within the first 72 hours. The site turned out to be a success and the UX framework is still in place today with content being updated regularly.
