Site Planning

Every interface design project starts with an attempt to understand what the application is supposed to do, what functionality it will contain, and how an audience will use it. The following screens show some of the things I've produced when employed to gather requirements, organize information, and propose ways to accomplish a project's goals.

Site Planning

Every interface design project starts with an attempt to understand what the application is supposed to do, what functionality it will contain, and how an audience will use it. The following screens show some of the things I've produced when employed to gather requirements, organize information, and propose ways to accomplish a project's goals.

1. Microsoft Zune

[↓] Microsoft wanted a website that would combine Zune devices with a rich social music discovery experience. The amount of content and functionality that Microsoft wanted to offer meant that layout, hierarchy of information, and content would be especially important when wireframing.

2. mtvU

[↓] Viacom wanted a MTV-branded local guide for college students. The goal was to offer a one-stop online destination for all events, places to eat and drink around campus. Organization of information was one of the major challenges for this project. Viacom would be building the site so it was critical that the design be thoroughly documented.

3. Cranium

[↓] Here are site wireframes for Cranium, an educational toy and game maker for kids. Playful hand-drawn sketches helped us get in tune with the brand and its audience.

1. Microsoft Zune

Microsoft wanted a website that would combine Zune devices with a rich social music discovery experience. The amount of content and functionality that Microsoft wanted to offer meant that layout, hierarchy of information, and content would be especially important when wireframing.

2. mtvU

Viacom wanted a MTV-branded local guide for college students. The goal was to offer a one-stop online destination for all events, places to eat and drink around campus. Organization of information was one of the major challenges for this project. Viacom would be building the site so it was critical that the design be thoroughly documented.

3. Cranium

Here are site wireframes for Cranium, an educational toy and game maker for kids. Playful hand-drawn sketches helped us get in tune with the brand and its audience.

1. Microsoft Zune

Microsoft wanted a website that would combine Zune devices with a rich social music discovery experience. The amount of content and functionality that Microsoft wanted to offer meant that layout, hierarchy of information, and content would be especially important when wireframing.

2. mtvU

Viacom wanted a MTV-branded local guide for college students. The goal was to offer a one-stop online destination for all events, places to eat and drink around campus. Organization of information was one of the major challenges for this project. Viacom would be building the site so it was critical that the design be thoroughly documented.

3. Cranium

Here are site wireframes for Cranium, an educational toy and game maker for kids. Playful hand-drawn sketches helped us get in tune with the brand and its audience.

4. Impact + Takeaways

The design for each of these projects was well-received and approved. Zune eventually lost to the might of Apple and the iPod. mtvU launched in over 450 colleges in the US but was short-lived. Cranium was acquired by Hasbro in 2008.

  • I'm thankful for the range of experiences I gained while consulting. Consulting is an amazing training ground as you're forced to get up to speed very quickly and deliver something of value.
  • Having worked product-side for a decade, I wonder about the merits of hiring consultants to design the thing that's going to be your business. So much of the work of designing happens once the building starts. There's just no way to anticipate all of the challenges that will arise during the course of a project.
  • I suspect these clients would have been better served by building their own teams and doing the work in-house. Designing and building great products requires a sustained long-term effort.

4. Impact + Takeaways

The design for each of these projects was well-received and approved. Zune eventually lost to the might of Apple and the iPod. mtvU launched in over 450 colleges in the US but was short-lived. Cranium was acquired by Hasbro in 2008.

  • I'm thankful for the range of experiences I gained while consulting. Consulting is an amazing training ground as you're forced to get up to speed very quickly and deliver something of value.
  • Having worked product-side for a decade, I wonder about the merits of hiring consultants to design the thing that's going to be your business. So much of the work of designing happens once the building starts. There's just no way to anticipate all of the challenges that will arise during the course of a project.
  • I suspect these clients would have been better served by building their own teams and doing the work in-house. Designing and building great products requires a sustained long-term effort.

4. Impact + Takeaways

The design for each of these projects was well-received and approved. Zune eventually lost to the might of Apple and the iPod. mtvU launched in over 450 colleges in the US but was short-lived. Cranium was acquired by Hasbro in 2008.

  • I'm thankful for the range of experiences I gained while consulting. Consulting is an amazing training ground as you're forced to get up to speed very quickly and deliver something of value.
  • Having worked product-side for a decade, I wonder about the merits of hiring consultants to design the thing that's going to be your business. So much of the work of designing happens once the building starts. There's just no way to anticipate all of the challenges that will arise during the course of a project.
  • I suspect these clients would have been better served by building their own teams and doing the work in-house. Designing and building great products requires a sustained long-term effort.

← Behr Paint Kiosk

Icons + Illustration →

← Behr Paint Kiosk

Icons + Illustration →

← Behr Paint Kiosk

Icons + Illustration →

Thanks for viewing my portfolio.

© Jess Ruefli 2025