GameStop Mobile

In 2014, just as I was joining IBM to work on Bluemix, GameStop was partnering with us to build the GameStop Technology Institute. The institute's aim is to "infuse technologies into retail locations in order to transform the physical space to the same level of analytics and personalization as the online space." In the scope of 4 weeks, small team and I were asked to design a mobile app which would jumpstart that mission with it's first project — putting the in-store curation, trade-in and sales experience in the user's hands.

visual design by Jarrod Joplin and Sam Mak

Getting to know gamers

"I was young when I traded in my games, and I feel like I got a little bit duped. But I think I did buy something new right away."
— Tina Musich

"When my boyfriend goes, he knows he wants a game, and brings other games to pay for the one he wants to get."
— Tina Musich

"I pretty much get all of my game recommendations from friends. But then I'll read about it and checkout the reviews later."
— James Zhang

"I'm definitely loyal to one console or manufacturer. And I have to have the latest model. But also the old ones for backward compatibility."
— James Zhang

Establishing Empathy

Empathy maps helped my team sift out the biggest insights from our users. They trust recommendations from one another, watch gameplay, and stay loyal to a console. Most of all, they get bored easily and are constantly looking for new experiences.

Ideation

To quickly get alignment among the team, we built a sitemap that would emphasize the key experiences we wanted to drive for GameStop's customers. We had to bring together our stakeholder's requirements with the user needs we isolated in our research.

User Testing

While the visual designers were starting to explore GameStop's brand and colors, I kept going with pen and paper. I made several rounds of paper prototypes to test with users. Then I refined and tested again.

"I love that I can get in line for checkout and keep shopping, but the navigation at the bottom isn't guiding me on what to do next."

"You guys are hinting at things I can do that are specific to the store, but it's not easy to figure out exactly what. Maybe if that were all in one place?"

"Why wouldn't it also say how many people are in line ahead of me?"

Refinement

After a few rounds of user testing, our work was cut out for us. We needed to give more screen real estate to content, centralize the UI elements related to the in-store experience, and keep it as easy as possible to digitize collections.

Inside of stores, the app activates store- specific functionality. Users can access local promotions, scan titles, search the inventory, and queue up for checkout without getting in line.

Skills

  • User-centered Design
  • Rapid Iteration
  • User Research
  • Mobile-first Design
  • Front End Development

Timeline

Carnegie Mellon Pre-college for Design – Pittsburgh, PA

In the summer of 2005, I thought I'd get my toes wet in design at my brother's alma mater, Carnegie Mellon. It was the most comprehensive introduction to this field I could have ever hoped for.

Photography Assistant, Visual Waves Commercial Photography – New York, NY

In 2007, impatient to be move on from high school, I grabbed an opportunity to assist a commercial photographer named William Vazquez.

Purdue University, Computer Science – West Lafayette, IN

I had been writing code since my sophomore year in high school. Passionate about computers and the web, I saw computer science as a way of bringing together making and code in a neat package.

Intern, WinMill Software – New York, NY

Even after a year studying computer science at Purdue, I still needed some insight into what I would really be doing in the industry. WinMill gave me independence, an awareness of how many people depend on a single deadline, and a lot of room to explore my skills as a programmer.

Switched to Industrial Design

After a lot of soul searching, I realized that computer science wasn't fulfilling my interest in solving actual human problems. I felt as though I was being trained in how to use technology, not in how to use technology as a tool to drive real change. I made a course correction that changed my life.

Intern, Streng Design – New York, NY

I spent this summer designing handles for a hush hush new appliance design for PepsiCo.

Junior Designer, Streng Design – New York, NY

I had to come back to Streng. It was a small environment where I could really spread my wings. Sketching, CAD, renderings, concept development. I ate up as much work as I could find to do.

UX Designer, IBM Bluemix – Austin, TX

I originally came to IBM to practice industrial design for enterprise servers. But early on, I was confronted with the opportunity to move over to IBM Design, a budding, design-led movement to modernize IBM's entire software product development process. Suddenly, my job title changed to UX Designer, and I found myself as not only a designer, but also as an educator and design advocate helping steer the colossal, inertial ship that is IBM toward design thinking and user focused innovation.


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Dan Zaharia | portfolio</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
	<meta name="theme-color" content="#ffdc67">
	<link rel="stylesheet" href="css/main.css">

</head>
<body>
  <section class="hero">
	<h1 class="hero__name">Dan Zaharia</h1>
	<h2 class="hero__title">industrial design  |  user experience</h2>
	<header class="header">
  <div class="header__container">

    <div class="header__social-link-container">
      <a href="https://github.com/dzaharia1/" target="blank" class="header__social-link"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32.6 31.7" enable-background="new 0 0 32.6 31.7" xml:space="preserve" class="header__social-link-icon" height="50px" width="50px">
  <path fill-rule="evenodd" clip-rule="evenodd" fill="#191717" d="M16.3,0C7.3,0,0,7.3,0,16.3c0,7.2,4.7,13.3,11.1,15.5
  c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1
  c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4
  C7.4,10.7,6.8,9,7.7,6.8c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7
  c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5
  c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C32.6,7.3,25.3,0,16.3,0z"/>
</svg>
</a>
      <a href="https://www.linkedin.com/in/dzaharia" target="blank" class="header__social-link"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 75.8 82" enable-background="new 0 0 75.8 82" xml:space="preserve" class="header__social-link-icon" height="50px" width="50px">
<path fill="#000000" d="M70.2,5.7H5.6C2.5,5.7,0,8.2,0,11.2v65.3c0,3,2.5,5.5,5.6,5.5h64.6c3.1,0,5.6-2.4,5.6-5.5V11.2
	C75.8,8.2,73.3,5.7,70.2,5.7z M23,69.6H11.5V35.1H23V69.6z M17.2,30.4L17.2,30.4L17.2,30.4c-3.9,0-6.4-2.6-6.4-5.9
	c0-3.4,2.6-5.9,6.5-5.9c3.9,0,6.3,2.6,6.4,5.9C23.7,27.8,21.2,30.4,17.2,30.4z M64.2,69.6H52.8V51.1c0-4.6-1.7-7.8-5.8-7.8
	c-3.2,0-5,2.1-5.9,4.2c-0.3,0.7-0.4,1.8-0.4,2.8v19.2H29.3c0,0,0.2-31.2,0-34.4h11.4V40c1.5-2.3,4.2-5.7,10.3-5.7
	c7.5,0,13.2,4.9,13.2,15.5V69.6z"/>
</svg>
</a>
    </div>
    <nav>
      <ul class="header__nav-list">
        <li class="header__nav-item"><a href="#" target="projects-section"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36 36" enable-background="new 0 0 36 36" xml:space="preserve" class="header__nav-item-icon" height="50px" width="50px">
	 <path d="M34.3,5.1h-1.4l-0.7-2.8c-0.1-0.5-0.6-0.9-1.1-0.9H16.4c-0.5,0-1,0.4-1.1,0.9L15.2,3H4.8c-0.5,0-1,0.4-1.1,0.9L3.1,6.7H1.7
 	c-0.6,0-1.1,0.5-1.1,1.1v3.4c0,0.6,0.5,1.1,1.1,1.1h0.5l2.1,21.3c0.1,0.6,0.5,1,1.1,1H19c0.6,0,1-0.4,1.1-1l2.1-21.3h0.5
 	c0.6,0,1.1-0.5,1.1-1.1V7.8c0-0.2-0.1-0.4-0.2-0.5c0,0,0,0,0,0H32h1.2v1.1h-0.4h-9v2.2h7.8l-0.3,3H22l-0.4,3.7
 	c0.6-0.4,1.3-0.6,2.1-0.6c2.2,0,3.9,1.8,3.9,3.9s-1.8,3.9-3.9,3.9c-1.1,0-2-0.4-2.7-1.1l-0.4,4.2h9.2l-0.3,3h-9.2L20.2,33h10.4
 	c0.6,0,1-0.4,1.1-1l2.1-21.3h0.5c0.6,0,1.1-0.5,1.1-1.1V6.2C35.4,5.6,34.9,5.1,34.3,5.1z M19.6,3c0.1,0,0.2,0,0.3,0.1
 	C19.8,3.1,19.7,3,19.6,3L19.6,3z M5.7,5.3h13L19,6.7H5.4L5.7,5.3z M5,17.5h3.4c-1.4,1.1-2.3,2.9-2.3,4.8c0,1.9,0.9,3.7,2.3,4.8H5.9
 	L5,17.5z M12.2,18.4c2.2,0,3.9,1.8,3.9,3.9s-1.8,3.9-3.9,3.9s-3.9-1.8-3.9-3.9S10,18.4,12.2,18.4z M18,32.4H6.4l-0.3-3h12.2L18,32.4
 	z M18.5,27.1H16c1.4-1.1,2.3-2.9,2.3-4.8c0-1.9-0.9-3.7-2.3-4.8h3.4L18.5,27.1z M19.7,15.3H4.7l-0.3-3H20L19.7,15.3z M21.6,10h-0.4
 	h-18H2.8V8.9H4h16.4h1.2V10z M22.7,6.7L22.7,6.7c0.1,0,0.3,0,0.4,0.1C22.9,6.7,22.8,6.7,22.7,6.7z M20.9,5.1l0.4,1.6h0l-0.7-2.8
 	c0-0.1-0.1-0.2-0.1-0.3c0,0,0,0,0,0h9.8l0.3,1.4H20.9z M30.1,25.5h-2.5c1.4-1.1,2.3-2.9,2.3-4.8c0-1.9-0.9-3.7-2.3-4.8H31L30.1,25.5
 	z"/>
</svg>
 <p>work</p></a>
        </li>
        <li class="header__nav-item"><a href="#" target="about-section"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36 36" enable-background="new 0 0 36 36" xml:space="preserve" class="header__nav-item-icon" height="50px" width="50px">
<path d="M34.7,14.3c-0.8-2.4-3-4.1-5.7-4.1h-1.4V9c0-2.8-2.3-5.1-5.1-5.1h-8.2c-2.8,0-5.1,2.3-5.1,5.1v1.1H7.8
	c-2.7,0-4.9,1.7-5.7,4.1c-0.6,0-1,0.5-1,1.1v13.1c0,3.1,2.5,5.6,5.6,5.6h23.5c3.1,0,5.6-2.5,5.6-5.6V15.4
	C35.7,14.8,35.3,14.3,34.7,14.3z M11.4,9c0-1.6,1.3-2.9,2.9-2.9h8.2c1.6,0,2.9,1.3,2.9,2.9v3.5c0,0.2-0.2,0.4-0.4,0.4
	s-0.4-0.2-0.4-0.4V9c0-1.2-1-2.2-2.2-2.2h-8.2c-1.2,0-2.2,1-2.2,2.2v3.5c0,0.2-0.2,0.4-0.4,0.4s-0.4-0.2-0.4-0.4V9z M14.3,9.1
	L22.4,9v1.1h-8.1L14.3,9.1z M4,16.2c0-2.1,1.7-3.8,3.8-3.8h1.4v0.1c0,1.4,1.2,2.6,2.6,2.6s2.6-1.2,2.6-2.6l0-0.1h8.1v0.1
	c0,1.4,1.2,2.6,2.6,2.6s2.6-1.2,2.6-2.6v-0.1H29c2.1,0,3.8,1.7,3.8,3.8v2.6c0,2.1-1.7,3.8-3.8,3.8h-1.7V19c0-0.6-0.5-1.1-1.1-1.1
	s-1.1,0.5-1.1,1.1v3.6H11.8V19c0-0.6-0.5-1.1-1.1-1.1S9.5,18.4,9.5,19v3.6H7.8c-2.1,0-3.8-1.7-3.8-3.8V16.2z M22.8,24.8h2.3v1.9
	c0,0.6,0.5,1.1,1.1,1.1s1.1-0.5,1.1-1.1v-1.9H29c0.2,0,0.4,0,0.6,0V27c0,1-0.8,1.9-1.9,1.9h-3.1c-1,0-1.9-0.8-1.9-1.9V24.8z
	 M7.2,24.8c0.2,0,0.4,0,0.6,0h1.7v1.9c0,0.6,0.5,1.1,1.1,1.1s1.1-0.5,1.1-1.1v-1.9H14V27c0,1-0.8,1.9-1.9,1.9H9.1
	c-1,0-1.9-0.8-1.9-1.9V24.8z M30.2,31.8H6.6c-1.8,0-3.3-1.5-3.3-3.3v-5.7c0.5,0.5,1.1,1,1.7,1.3V27c0,2.2,1.8,4.1,4.1,4.1h3.1
	c2.2,0,4.1-1.8,4.1-4.1v-2.2h4.3V27c0,2.2,1.8,4.1,4.1,4.1h3.1c2.2,0,4.1-1.8,4.1-4.1v-2.9c0.7-0.3,1.2-0.8,1.7-1.3v5.7
	C33.5,30.4,32,31.8,30.2,31.8z"/>
</svg>
 <p>about</p></a>
        </li>
      </ul>
    </nav>
  </div>
</header>

</section>
	<section class="projects-section">
	<ul class="projects-list">

		<li>
			<a href="gamestop" class="project-tile project-tile--gamestop" style="background-image: url('img/gamestop/thumb.png')">
				<div class="project-tile__footer">
					<h2 class="project-tile__title">GameStop Mobile App</h2>
					<p class="project-tile__attributes">UX design</p>
				</div>
			</a>
		</li>

		<li>
			<a href="bmx" class="project-tile project-tile--bmx" style="background-image: url('img/bmx/thumb.png')">
				<div class="project-tile__footer">
					<h2 class="project-tile__title">IBM Bluemix (preview)</h2>
					<p class="project-tile__attributes">UX design, front end development</p>
				</div>
			</a>
		</li>

		<li>
			<a href="bmxpricing" class="project-tile project-tile--bmxpricing" style="background-image: url('img/bmxpricing/thumb.png')">
				<div class="project-tile__footer">
					<h2 class="project-tile__title">IBM Bluemix Pricing Page</h2>
					<p class="project-tile__attributes">front end development</p>
				</div>
			</a>
		</li>

		<li>
			<a href="navalis" class="project-tile project-tile--navalis" style="background-image: url('img/navalis/thumb.png')">
				<div class="project-tile__footer">
					<h2 class="project-tile__title">Navalis Hospital Stretcher</h2>
					<p class="project-tile__attributes">industrial design</p>
				</div>
			</a>
		</li>

		<li>
			<a href="pebble" class="project-tile project-tile--pebble" style="background-image: url('img/pebble/thumb.png')">
				<div class="project-tile__footer">
					<h2 class="project-tile__title">Pebble Infant Showerhead</h2>
					<p class="project-tile__attributes">industrial design</p>
				</div>
			</a>
		</li>

		<li>
			<a href="totem" class="project-tile project-tile--totem" style="background-image: url('img/totem/thumb.png')">
				<div class="project-tile__footer">
					<h2 class="project-tile__title">Totem Worksite Lighting</h2>
					<p class="project-tile__attributes">industrial design</p>
				</div>
			</a>
		</li>

	</ul>
</section>

	<section class="about-section">
  <section class="about-section__credentials-container">
    <div class="about-section__credential">
      <h3 class="about-section__credential-header">Skills</h3>
      <ul class="about-section__credential-list">
        <li class="about-section__credential-list-item">User-centered Design</li>
        <li class="about-section__credential-list-item">Rapid Iteration</li>
        <li class="about-section__credential-list-item">User Research</li>
        <li class="about-section__credential-list-item">Mobile-first Design</li>
        <li class="about-section__credential-list-item">Front End Development</li>
      </ul>
    </div>
    <div class="about-section__credential">
      <h3 class="about-section__credential-header">Things Not Work</h3>
      <ul class="about-section__credential-list">
        <li class="about-section__credential-list-item">
          <a href="http://www.celestron.com/browse-shop/astronomy/astronomy-binoculars/skymaster-15x70-binocular" target="blank">Stargazing</a>
        </li>
        <li class="about-section__credential-list-item">
          <a href="http://www.netflix.com/title/70202589" target="blank">Netflixgazing</a>
        </li>
        <li class="about-section__credential-list-item">
          <a href="https://github.com/dzaharia1/" target="blank">Coding knick knacks</a>
        </li>
        <li class="about-section__credential-list-item">
          <a href="http://photography.danzaharia.com/" target="blank">Photography</a>
        </li>
      </ul>
    </div>
  </section>
  <section class="about-section__timeline-container">
    <h3 class="about-section__credential-header">Timeline</h3>
    <div class="about-section__story-container">
      <div class="about-section__story-notch"></div>
      <div class="about-section__story-content">
        <p class="about-section__story-date">2005</p>
        <h4 class="about-section__story-title">Carnegie Mellon Pre-college for Design
          <span class="about-section__story-location">– Pittsburgh, PA</span></h4>
        <p class="about-section__story-description">In the summer of 2005, I thought
          I'd get my toes wet in design at my brother's alma mater, Carnegie Mellon.
          It was the most comprehensive introduction to this field I could have ever
          hoped for.</p>
      </div>
    </div>
    <div class="about-section__story-container">
      <div class="about-section__story-notch"></div>
      <div class="about-section__story-content">
        <p class="about-section__story-date">2007</p>
        <h4 class="about-section__story-title">Photography Assistant, Visual Waves
          Commercial Photography <span class="about-section__story-location">–
          New York, NY</span></h4>
        <p class="about-section__story-description">In 2007, impatient to be move
          on from high school, I grabbed an opportunity to assist a commercial
          photographer named <a href="http://www.williamvazquez.com/" target="blank">
          William Vazquez</a>.</p>
      </div>
    </div>
    <div class="about-section__story-container">
      <div class="about-section__story-notch"></div>
      <div class="about-section__story-content">
        <p class="about-section__story-date">2007</p>
        <h4 class="about-section__story-title">Purdue University, Computer
          Science <span class="about-section__story-location">– West Lafayette,
          IN</span></h4>
        <p class="about-section__story-description">I had been writing code since
          my sophomore year in high school. Passionate about computers and the web,
          I saw computer science as a way of bringing together making and code
          in a neat package.</p>
      </div>
    </div>
    <div class="about-section__story-container">
      <div class="about-section__story-notch"></div>
      <div class="about-section__story-content">
        <p class="about-section__story-date">2008</p>
        <h4 class="about-section__story-title">Intern, WinMill Software
          <span class="about-section__story-location">– New York, NY</span></h4>
        <p class="about-section__story-description">Even after a year studying
          computer science at Purdue, I still needed some insight into what I
          would really be doing in the industry. WinMill gave me independence,
          an awareness of how many people depend on a single deadline, and a lot
          of room to explore my skills as a programmer.</p>
      </div>
    </div>

    <div class="about-section__story-container">
      <div class="about-section__story-notch"></div>
      <div class="about-section__story-content">
        <p class="about-section__story-date">2009</p>
        <h4 class="about-section__story-title">Switched to Industrial Design</h4>
        <p class="about-section__story-description">After a lot of soul searching,
          I realized that computer science wasn't fulfilling my interest in solving
          actual human problems. I felt as though I was being trained in how to use
          technology, not in how to use technology as a tool to drive real change.
          I made a course correction that changed my life.</p>
      </div>
    </div>

    <div class="about-section__story-container">
      <div class="about-section__story-notch"></div>
      <div class="about-section__story-content">
        <p class="about-section__story-date">2012</p>
        <h4 class="about-section__story-title">Intern, Streng Design
          <span class="about-section__story-location">– New York, NY</span></h4>
        <p class="about-section__story-description">I spent this summer designing
          handles for a hush hush new appliance design for PepsiCo.</p>
      </div>
    </div>
    <div class="about-section__story-container">
      <div class="about-section__story-notch"></div>
      <div class="about-section__story-content">
        <p class="about-section__story-date">2013</p>
        <h4 class="about-section__story-title">Junior Designer, Streng Design
          <span class="about-section__story-location">– New York, NY</span></h4>
        <p class="about-section__story-description">I had to come back to Streng.
          It was a small environment where I could really spread my wings.
          Sketching, CAD, renderings, concept development. I ate up as much work
          as I could find to do.</p>
      </div>
    </div>
    <div class="about-section__story-container">
      <div class="about-section__story-notch"></div>
      <div class="about-section__story-content">
        <p class="about-section__story-date">2014</p>
        <h4 class="about-section__story-title">UX Designer, IBM Bluemix <span class="about-section__story-location">– Austin, TX</span></h4>
        <p class="about-section__story-description">I originally came to IBM to practice
        industrial design for enterprise servers. But early on, I was confronted
        with the opportunity to move over to IBM Design, a budding, design-led
        movement to modernize IBM's entire software product development process.
        Suddenly, my job title changed to UX Designer, and I found myself as not
        only a designer, but also as an educator and design advocate helping steer
        the colossal, inertial ship that is IBM toward design thinking and user
        focused innovation.</p>
    </div>
  </section>
</section>


	<footer class="footer">
		<div class="footer__timeline-end"></div>
		<h3 class="footer__heading">Just reach out, you know, whenever.</h3>
		<p class="footer__contact">p: 914 479 8900</p>
		<p class="footer__contact">e: <a href="mailto:zaharia.danny@gmail.com" class="footer__contact">zaharia.danny@gmail.com</a></p>
		<p class="footer__copyright">© Daniel Zaharia 2015</p>
	</footer>
  <div class="top-flourish">
<pre class="language-javascript">
<code>