Archive for the 'Design' Category

FlowChart iPhone App

Tuesday, September 1st, 2009

Just finished making support and app info site for FlowChart, an iPhone application to keep track of our peak flow measurement.

Visit the site to see more info : http://www.atguard.net/flowchart/

or directly go to App Store by clicking this link

Here is the screen shot of the one pager site. it’s using 960 css framework and lightBox for the screenshot gallery.

Screen shot 2009-09-20 at 3.11.31 PM

FlowChart Website Screenshot

Card Sorting Method Presentation

Sunday, February 22nd, 2009

As part of the assignment in the Technical Communication classes that I am taking to get ( eventually ) Master degree in UX, each of us ( in a group pair ) must read a chapter from the UX book ( Understanding Your User ) about method in UX study and presenting it to the class.

My group has the chance to presenting Card Sorting Method. Here is the slide that we use in the card sorting presentation. We want to make a presentation that’s not too long for the class, doesn’t have too many lengthy sentence / words and want to keep it interesting. So we come up with presentation with lots of sketches and diagrams to keep it light and interesting. Enjoy … and yes the sketches was made from scratch by me 🙂

Updated After3D.com site

Wednesday, October 10th, 2007

A long due project, the new face of After3D.com. Showcasing my wife’s “Sofie” Work portfolio.
I am pretty lousy on making a fast design decision, so this portfolio was design by Sofie her self, and I just implementing the functionality based on her request 🙂 SO … Thank you Sofie for the great design 🙂
After3D_2007

To make updating the site easier both for me and Sofie, I put this feature for the site:

  • XML based configuration file for Menu buttons, text content and gallery RSS feed link
  • All image content is based on the Gallery2 RSS, whee Sofie can easily add her workpiece into gallery and the new images will be reflected automatically in her flash portfolio site
  • A linkage to the wire frame images in some of the artwork, showcasing the detail wire frame rendering.
  • Copy of resume in multiple format is connected directly to her emurse account, so at anytime she update her resume in emurse.com all changes will be automatically populated in all formats. No more copy pasting in PDF, txt and word document… YAY
  • Behind the scene, I separate the Business model and the View model, so at anytime she bored with this themes, I can easily update the FLA with new graphics and re-compile the SWF with new skin and all SHOULD work the same 🙂
  • OK now, one project done, time to find another things to learn and do.

    Dabble DB Redesign

    Sunday, May 6th, 2007

    Project Goal :

    Propose a redesign solution to promote better User Experience for Dabble DB.

    This first proposal is intended to be the first overview of dabble DB existing interface, further study of user experience and design iteration is expected to finalize the site redesign

     

    Site Redesign :

    050607-1649-dabbledbred1.png

     

    Proposed functionality :

    050607-1649-dabbledbred2.png

     

    A Iconize Menu
    Main functionality represented as Icons.With tooltips / text information on the roll over state
    B Hide un-focused Item
    Retractable panel for non immediate navigation, such as tables list and view list
    C Inline Editing
    More intuitive method to edit / add the entry into table using inline editing inside the table area
    D On demand delete button.
    Only appear when user hover on the left side of the table row entry
    E Drag and drop column header to re arrange the column order.
    To hide the column from the view just drag the column header outside the table
    F On Demand data entry form.
    User can still enter the data using form to get more detail input selection. User can close this form
    G Tabs for misc. view.
    If user start using date data and location data, an on demand view will show up as tags and user can hide / maximize / minimize the window to see the information
    H Collapsible Help panel.
    Help panel will always available for the user. It will react according to the user mode and has search input box to help user find action that they want to learn
    I Structured multi panel interface.
    It gives freedom to the user to open several panel in one view, but also constraining the user to display more structured panel by snapping the panels into predefined grids.

     

    050607-1649-dabbledbred13.png

     

    J Drag and drop table list.
    User can re arrange the table list. The delete button also appear as user roll over the table icon, and user can click on the delete button to delete the table.Drag and dropping the table icon into the active table also create an entry link between tables.
    K Easy button to add views / tables.
    User can save the table view that they like on cue by clicking on the save button in the view panel. New tables also can be created as easily by clicking on the new button in the tables panel