Showing posts with label 2D rendering. Show all posts
Showing posts with label 2D rendering. Show all posts

Tony Hawk Ride

tonyhawk_01 

Tony Hawk Ride© is a video game peripheral designed for the next generation of skateboard gaming. The goal was to bring real skateboard experience to living rooms. The player can stand on the actual board to control the character, by tilting left and right and doing many other simulated skateboard movements.

adi3xj2lcwos0

Product Council finished the industrial design of the skateboard. The graphic and color was done by fuseProject.

The official website of Tony Hawk Ride©
http://www.thride.com

Project Background

tonyhawk_start

This project started with an engineering prototype model. It was well-built. However, being lack of design capability, the game publisher Activision and developer Robomodo came to us for industrial design help for the skateboard.

Body Design

tonyhawk_crosssections

tonyhawk_crosssection2

The cross section is crucial to this skateboard design. It determines the overall control experience for gamers. We designed several cross sections and made the models for prototype testing. We also invited the client to stand on them and tried the controlling of the board. The final design was picked based on the best control and the look of the skateboard.

Skin Design

tonyhawk_skin

We had a discussion among game developer, manufacturer and Microsoft (for Xbox version of the Tony Hawk Ride) about the skin design.  Just like the very successful game peripheral- Guitar Hero, Activision wanted to add swappable skins to this skateboard. We thought the skin should be assembled with screws to make it look more like a real skateboard. The manufacturer also thought screws could help with engineering to make the body really strong to support the weight from the user. However, Microsoft had a different opinion. According to Xbox peripheral design guide, using screws to change product skin is not user-centered and not allowed. After the discussion, the client gave up the idea of swappable skin, but designed a standard graphic for the skateboard.

Button Design for 3 Systems

tonyhawk_buttons

We suggested a skateboard design with no or only one button to make it look simple and more like a real skateboard. The gamer can control the skateboard through by tilting board and the RF  sensors. If they want to control the game menu it’s easier to use the game remote instead of picking up the board for the buttons. However, Microsoft game peripheral design guide insisted that all devices should include all buttons as the game remote. It was impossible for them do change the rule.

To make the board also good for 3 major systems, we also designed the button layout for Wii and PS3.

h02

A larger “start” button is placed on the side of the skateboard to allow users to kick on it without picking up the board.

Final Design

tonyhawk_rendering

Product photos:

OLYMPUS DIGITAL CAMERA

OLYMPUS DIGITAL CAMERA

OLYMPUS DIGITAL CAMERA               

OLYMPUS DIGITAL CAMERA         OLYMPUS DIGITAL CAMERA         OLYMPUS DIGITAL CAMERA         OLYMPUS DIGITAL CAMERA         OLYMPUS DIGITAL CAMERA

Dewbop Shower Media

dewbop_01

Dewbop is a series of wall-mountable shower media devices designed for the bathroom environment. Dewbop provides a more specialized shower room music interface and usability built on a person’s needs in a bathroom while showering, bathing and brushing teeth, etc.

dewbop_environmentsketch 

User Research

dewbop_research
Can you find the right button when your eyes are covered with shampoo?

 dewbop_research2
The problem of using a shower media player

We interviewed some shower media device users and tried some products in the market. We found that the shower media interface was difficult to use. There are too many buttons to confuse user, it’s hard to operate a shower media player with soapy hands. When you are washing hair, you cannot operate the music without seeing the buttons. Also, the devices are not stable while standing or hung on the shower head. When pushed, it goes backward and falls.

Dewbop Concept 1

dewbop copy

Dewbop concept 1 introduces a new interaction method for a humid and wet environment. The player body is rotatable. You can tilt the dewbop toward left and right to jump to last song and next song. The LCD screen and speakers are integrated in the body. A strong locking suction cup fixed on the wall is the pivot of rotation. One can operate it with wet and soapy hands, even blindly. The whole body is an input module. With a well organized software interface, all the tasks can be done with the rotatable body and a single, generously proportioned knob. A time button is dedicated for time display only.

Below is a flash demo of Dewbop concept 1.

Dewbop Concept 2 

d2 b

d2 d

Inspired by a user talking about her shower experience under candle lights, the concept 2 is a music CD player with modular blocks. Each block is a button to control music. It emits weak light when you turn the lights off in the shower room

Dewbop Concept 3

d3

The concept 3 is a shower CD player simulating the interface of a faucet as a music controller. What if the most classic interface- the caucet, controls the flow of music, instead of water?

Dewbop Concept 4

dewbop_01

3 dewbop
Concept 4 “Faucet” User Interface

Image converted using ifftoany

Dewbop Concept 4 lets the users control music with its  faucet-like interface, just like concept 3, but with a simple form. It can be placed on the bathtub or wall-mounted.

ESA (Electronic Shopping Assistant)

esa_01

ESA (Electronic Shopping Assistant) is a device designed to bring online electronic product reviews to consumers in store. It bridges the gap of physical and cyber channels and help consumers compare and study electronic products and make decisions.

This project was sponsored by RTC for the retailer environment observation and research, with the  topic “Retail store as a communication medium”.

Opportunity and Benefit

 esa_opportunity

For consumers
Because of the complex features and short life cycle of electronic products, shoppers need to do research before purchase. Consumers usually do online research first, and go to electronic stores to try products. It usually becomes a repetitive action between online research and in-store research.

For retailers
Information is becoming ubiquitous in both physical and electronic channels. Physical stores need to take on the competition from online stores, who can provide lower price for the same products. For physical stores, most of them sell products both online and in-store. However, there seems to be a gap between the two. What if there is a bridge to take the advantages of both channels?

The Game Changer

esa_flow

ESA (Electronic Shopping Assistant) is a device owned by retailers to provide online product information to in-store consumers. Combined
with physical store and online service, consumers can get the online information on ESA with their online accounts. They can track product information and personal research history. This device also works as
an in-store guide. It shows promotion, warranty, and other retailer information to consumers.

User Scenario

esa61 Create an online account in retailer’s website research and create a list of candidate products.
esa62 Get ESA in store and log on the device with online account. User information and saved product list are shown on the device.
esa63 Use barcode scanner to scan products and read product online review.
esa64 ESA helps user compare product features, prices and create a shopping cart list.
esa65 The consumers can use ESA to check out with their billing information. The research and purchase history is updated with online account for further customer service.

Behavioral Prototype

esa31s
esa32s
esa33s

Settings

To simulate the real environment, shoppers are carrying shopping bags, hand bag or backpack. Three concept prototypes are placed on the table as the store shelf. Models are built to simulate the trial products.

Process

1. Shoppers are assigned the bags to carry on;
2. Put on the device;
3. Walk around and read the device;
4. Scan the product with device;
5. Compare the products and read the reviews  
6. Answer a cell phone call
7. Change the prototype and repeat 1-6 process
3 users participated, all were video recorded

Conclusion

esa31 copy

Lanyard with long or flexible cord for users to pull and scan the product is the best solution

Design Criteria

211_PS3050CL1000 falcon_340_345 mc50 msh-220lores

ESA is owned by retailers but used by consumers. The ownership and responsibility brings some interesting issues:

1. Easy-to-Learn interface
People have plenty of time to learn how to use a cell phone or a camera. But ESA must let the consumers to pick up the interface quickly since consumers don’t own the device;
2. Durability
People don’t take good care of a public product. The material use of ESA should be durable, like a museum guide;
3. High-Tech Looking
As a product for expert consumers, its material and finishing should suggest hi-tech built quality

Components
1, Memory or local network access
2, Barcode scanner
3, Screen
4, Lanyard

Design Sketches

esa_sketches

One scanning button, a two-way touch-sensitive navigation button and 4 programmable buttons (including shopping cart and favorite product list) are designed to support the software interface interface. The two-way navigation button is used to scroll menu and text. Some variations of the style are discussed here.

The principle is to keep it clean and user friendly. Foam prototypes were made for further analysis and test for ergonomic factors.

Modular Foam Prototype

esa_foam1

Modular buttons, bodies, screens and lanyard buckle are made to compare different combinations.

Button Layout

esa432 Extend the lanyard buckle to make the device look thinner.
esa4322 Taper and round bottom edge for better gripping, leaving the surface at the top flat for scanning part.
At first, scanning button is above the screen to help people hold it firmly while scanning. The problem is that your thumb needs to go all the way down for other buttons.
The second solution integrates the scanning button with other buttons. But they seem too low to operate. The user cannot hold the device well as they need to keep fingers in lower half position.
The final solution is to move buttons to the middle of the device. There are two separate screens for different purposes- one monotone LCD screen for showing text information; the other color LCD screen for showing product images.

Two way navigation button and scanning button is combined into a touch-sensitive button to simplify the layout.

Final Form

DSC05145

The final form is narrowed in width for better gripping. The body is also deeper and rounded at the back and bottom. It’s more like a simplified remote control than a cell phone.

2D Rendering and User Interface

esa_rendering1

esa_rendering2

 
Chunlun Design Blogfolio. Design by Wpthemedesigner. Converted To Blogger Template By Anshul Tested by Blogger Templates.