Macintosh 30-Year Anniversary Website

Working with a skunks work team at Tool of North America + Apple MAL/MarComm. I was a UX designer brought on to help Tool win the project production.

UX
Product Design
User Research
Content Strategy
Information Architecture

My role: UX Designer
I led the user experience design for the Macintosh 30-Year Anniversary project.
Team: Tool of North America + Apple MAL/MarComm
15+ people: 1x creative director, 3x project managers, 3x UX designers (me), 4x designers and 4x developers
Timeline: 8 sprints (16 weeks)
2014
Tools: Illustrator, Photoshop, InDesign, Omnigraffle, After Effects, HTML, CSS, JavaScript

An original Macintosh on screen inside a modern display, from the Mac 30 anniversary site — The Macintosh 30-Year Anniversary experience, 2014.

The short version

We achieved a successful launch of the Macintosh 30-Year Anniversary website, exceeding our initial goals for user engagement and satisfaction.

Our efforts resulted in a 40% increase in user engagement and a 30% improvement in satisfaction scores.

2x AwardsGold + Silver Pencil Winners
40%Increase in user engagement
8.5xIncrease in social media shares

Challenge: Implementing a dynamic, interactive website that would showcase the history and evolution of the Macintosh while maintaining a modern aesthetic. Aligning a diverse team of designers and developers to create a cohesive user experience that combined both nostalgia for the past, along with documentary style interactions, and modern design principles that aligned with the Apple Macintosh brand.

Situation

Celebrating 30 Years of MacintoshInnovation

Problem statement

The challenge was to create dynamic partnership between Tool of North America + Apple MAL/MarComm as way to show our small team could create innovative solutions. Additionally, we had to align a diverse team of designers and developers to create a cohesive user experience was crucial for the project's success.

Project scope

Our stakeholders were the Macintosh marketing team at Apple and the product team at Tool of NA.

Stakeholders and users

Apple MarComm Executives
MAL Creative Director
Tool of North America Creative Director

Constraints

1.5 quarters
Adobe Creative Suite, Omnigraffle
HTML/CSS/JS, After Effect, Video Production

A still of Steve Jobs from the Mac anniversary film on the 30 Years of Creativity site — The anniversary site opened with the story of the Mac.

The full Thirty Years of Mac homepage, a long scrolling page of timeline, grid, and film — The Thirty Years of Mac homepage.

Task

Help lead the user experience design with a focus on user-centered design.

My role

As a UX designer on this team my responsibility was to lead the user experience design efforts for the Macintosh 30-Year Anniversary website, ensuring a cohesive and engaging experience for users. With a lot of ideas flying around my role was to create an experience structure, lock in on the most promising concepts, and drive the design forward through information architecture, interaction design, and visual design consistency.

Goals

Our team was tasked with creating a user-friendly and visually appealing website that would effectively communicate the 30 year history and evolution of the Macintosh while maintaining a modern aesthetic. We also have to ensure the site was accessible and performs well under high traffic scenarios. The experience was mix of timeline and interactive elements revealing documentary content.

Make it engaging
Ensure accessibility
Align to Apple brand values

Action

UX Focus, collaboration, rapid prototyping

Research

Relying on historical research, user interviews, and competitive analysis, along with Apple MAL/Marcomm input, we gathered insights to inform the design decisions.

Iconography: a visual language for three decades of products.

Interaction process and scenario flows for the interactive timeline — Scenario flows for the interactive timeline.

The Supernova interaction model showing the milestone timeline in stacked states — The interaction model for the milestone timeline.

Ideation and design

Brainstorming, wireframes, prototypes, iterations. Our team rapidly iterated on ideas to create a compelling user experience. That kept both the concept and content cohesive throughout the development process.

Site map for the 30 Years of Creativity experience — The site map.

A plan for the structure of the timeline and its content map — Planning the timeline and its content.

High-level wireframes of the interactive timeline in its stages — High-level wireframes.

Wireframes for the film and timeline interactions — Wireframes for the timeline interactions.

Wireframes for the content flow across timeline and visualization states — Wireframes for the content flow.

Wireframes for the shelf of product states — Wireframes for the shelf.

A high-level view of the timeline in its layers — The timeline, at a high level.

Navigation and category iconography for three decades of creativity — Navigation and category iconography.

Annotated wireframe of the social visualization on a world globe — The social visualization: year and globe.

Collaboration

Our team of UX/Design/Dev worked closely with stakeholders to ensure the project met both user needs and business objectives.

Tools and methods

Innovation
Wireframing
Media Strategy
Rapid Prototyping
Conceptualization
UX Strategy
UX Planning

Result

Happy clients, happy users

Metrics

2x award winnerWon a 2014 Gold Pencil award & a 2014 Silver Pencil award
8.5x increase in website visitsWebsite was highly visited, shared, and engaged with
MAL partner recognitionTool of North America awarded for outstanding collaboration and contribution with MAL as a partner in marketing production

Feedback

“This project was a tremendous success, showcasing the power of collaboration and innovation.”MAL/Apple MarComm

Reflection

We learned that working with large diverse team of stakeholders requires a careful balance of communication and compromise. Our teams ability to turn around feedback, demonstrate new ideas, and maintain a clear vision was crucial to the project's success. The experience taught us the importance of fostering a collaborative environment where UX/Design/Dev all work together to create exceptional user experiences. Small teams of diverse individuals can make a big impact when they work together effectively.

The 1984 Macintosh at the center of a dark page titled A New Era of Creativity — **1984**A new era of creativity.

The iMac on a white page titled Democratizing access to the internet — **1998**Democratizing access to the internet.

The Power Mac G4 on a black page titled Revolutionizing music production — **1999**Revolutionizing music production.

A black grid of circular icons, one for each Mac — **The product grid**Every Mac, at a glance.

A dark social visualization with a counter reading 1,264,381 — **The social visualization**A global view of the story, as it was shared.

A scientist holding a vial in a film still from the experience — **The films**Voices from across thirty years.

Where it landed

We provided a comprehensive and engaging narrative that showcased the evolution of the Mac over thirty years. Please both the Macintosh diehards and the casual mac users.

The project was a tremendous success, showcasing the power of collaboration and innovation.

The final Mac 30 experience on a desktop display, showing the 1984, 1985, and 1986 timeline panels — The final experience: thirty years of the Mac, one decade at a time.

2014 Gold Pencil award, category User Experience Design: Web, Design Craft — Gold Pencil, 2014: User Experience Design, Design Craft

2014 Silver Pencil award, category User Experience Design: Web, User Experience — Silver Pencil, 2014: User Experience Design, User Experience

The 30 Years of Creativity experience on a large desktop monitor — **On the desktop**The experience at full size.

The 30 Years of Creativity page with a prompt to watch the documentary — **The documentary**Where the story ended up: a film, a timeline, and a way in.

An information architecture swipe map showing the milestone states stacked and linked — **The swipe map**How the pieces fit together.

Work with me ← Back to all work