Higui » Information architecture

Momo Design MD-300H

higui — Mon, 30 Jun 2008 16:26:24 +0000

During my work in H3G my activity ranged from the graphic customization of third party devices, testing of under development devices, to the development of the Momo Design branded phones.

Particularly i had the possibility to follow in deep the development of one mobile phone: the MD-300H. This phone is produced by BenQ for H3G italy, and sold under Momo Design brand.
As first collaboration between H3G and BenQ, the project’s goal was to have a product in line, in terms of information architecture and graphics, with the previous Momo Design models produced by the Chinese vendor ZTE.

The first important step was to define the information architecture. In order to make the BenQ mobile OS look and act like the reference MD interface i had to redesign the main menu and rearrange the sub menus, mainly trying to simplify the architecture, and i had to require the implementation of different features, from the tab system in menu screens to the media player.
The second step was to redesign all the graphics asset of the handset, ranging from the main to every small icon visible on the interface. Fortunately my colleague Mauro helped me in this job.

Interafce layout - Main menu, tab screen, textual screen

User interface screenshots

Demonstration video

In this video, a product review done by the guys of Telefonino.net, you can have a look at several user interface details. To view the video in HD press here.

Review from Telefonino.net

Presentation template

higui — Tue, 25 Dec 2007 12:55:20 +0000

I created this presentation template as support for my friend Domenico degree dissertation. After that, thanks to its simplicity in managing and updating, i used it in several different occasion.

The template allows us to place different slide on a surface, arranging them as part of a matrix. The user can navigate the presentation through three zoom levels, each one corresponding to a different interaction modality and a different quality of content:

Zoom out view: pick and choose | table of content
Half zoom view: explore | slide titles
Zoom in view: browse | slide content

The system recognize titles as different objects form slides, in other words they are present and visible but not part of the navigation. This allows us to subdivide slides in groups, but to have fluent flow while browsing. The slide sequence recognized by the system is obviously left to right and top to bottom.

Zoom out view

Half zoom view

Zoom in view

Demonstration video

The video below is a demonstration of the presentation template in action. While in the “zoom out view” you can see the mouse pointer selecting the slides, in the other view the input are coming from arrows key for moving and from the space bar for zooming

Demonstration video

Jamba Music Player, PC client layout

higui — Wed, 01 Nov 2006 15:58:15 +0000

In 2006 I did an internship at Jamba! GmBH, one of the world’s biggest mobile content companies, based in Berlin. My role was interaction and graphic designer within the Jamba Music Team, responsible for the Jamba Music client development. The Jamba Music Player is a music rental service, and it consist of a PC client and several mobile clients (J2ME, Windows Mobile, Symbian and Symbian UIQ) that allow the user to download and play DRM-protected mp3 songs form a huge web database. Once a user takes out a subscription, he can download either on his PC or on his mobile phone the music files, play them, sync the two devices, send files to friends over BT, and other features.

The project described below is an analysis of the 2006 PC client, based on few basic user tests, and two consequent restyling proposal of the front-end layout. The purpose of this work was to improve the actual layout on the user experience side and analyze how it could be opened to new feature introduction.

Actual layout review

Actual layout analysis

Alternative wireframe based on actual layout

Alternative wireframe based on actual layout - mockup

New layout proposal

New layout wireframe

New layout mockup

Final mockup and alternative configurations

Final mockup - extended configuration

Final mockup - alterneative configurations