michael lynch

(The logo is currently FPO. Vector hat supplied by Fuctastic).

This is an application interface I conceived of and designed to facilitate and organize classroom discussion using a smart board. Each discussion is composed of an infinite amount of ideas that are entered into a database, which are sorted in any number of categories. For the purpose of this prototype I have used Dr. Edward de Bono’s 6 Thinking Hats as example categories, although if this application were to ever go to production the teacher in charge of the discussion would enter in their own categories per topic.

To accomplish this the application consists of two screens:

1) The Dashboard

The dashboard screen is the content management system that only the leader of the discussion may use to enter in new ideas and sort them on their own computer that controls the smart board. They can begin by selecting an existing discussion from the list or by entering in a new discussion topic.

After selecting or creating a discussion the leader of the discussion has the opportunity to input new ideas and tag them with appropriate categories by pressing or clicking on the colored circles on the bottom of the text area input box. Hovering over the colored circle tags reveals a tooltip indicating which category it is.

The dashboard also features a menu to select how the display should be viewed (Views) and options to save out or import a discussion.

Clicking on the delete button on each list item will delete the respective discussion entirely.

2) The Display

The display screen is where ideas can be viewed by the all members of the discussion. For the purpose of this prototype only one view is accessible and that’s the full content view. The option of having an additional keyword view (a web displaying only the titles) would be implemented to evaluate the number of ideas and get a more general or overall perspective rather than focusing on details.

The display features a filtration system in which members may use to view specific ideas according to the categories they have been tagged with. The filters first appear in grayscale and only become colored after being clicked. Colored filters indicate which filters are currently being used.

The ideas themselves are given titles and brief explanations if needed. They also display the filters that they have been tagged with, which are indicated by the colored circles on each list item. Dragging a list item into a filter will tag it accordingly while pressing on the colored circles within each list item will remove the associated filter. Pressing the delete button to the left of each list item will delete that particular idea entirely.

This is an interface concept I designed for a grocery store application that would allow shoppers to shop more efficiently and thoroughly. The Smart Kart is a shopping cart that is affixed with an on board computer. It may also be referred to as a Personal Shopping Assistant or PSA.

After the user swipes their card they land on the map page with a dialogue box instructing the user to use the map to bear their surroundings or begin shopping if familiar. Here the user learns that clicking off a dialogue box will return to the application and that there are multiple pages to explore. After only one click the user should be inclined to explore and begin shopping within seconds.

The map page orients the user.

Clicking on a section will bring up a dialogue box with section specific information.

The scan pages allow the user to input an item. This is second in the navigation so the user is inclined to scan an item immediately after seeing the map.

The cart page shows which items are currently in the cart.

Clicking on an item will drop down the menu and reveal product specific information.

The list page allows the user to add, use and delete lists. List items in the cart appear darker in color than regular items. Lists are of course optional.

The search page allows the user to search items in their cart. A live search assists them.

The promo page is where the user has access to specials. The prices of items on sale are in red.

A sale item in the cart displays the reduction and promotion expiry in red to indicate they are time sensitive.

–

The Smart Kart Personal Shopping Assistant (PSA) UI design is designed for optimal usability among it’s diverse clientele.

Structure: It features a dashboard that remains static during navigation and that offers links to core functions. Also on the dashboard is key information such as the user account, date and time, number of items in cart and total cost.

Design: Each section has reoccurring design structures and aesthetics. For instance, any element that is interactive will have
a gradient and appear like a button while any static information is flat colored. Additionally, list items are seen the same across the pages being used in similar functions. Consistency is key to a fluent and simple experience.

Color: Shades of green are used to bring a sense of sustainability to the brand. Soft grays act as neutral items while dark grays can sometimes indicate buttons or titles. Ultimately the grays reinforce the greens.

Type: Text is generally kept large to accommodate those with poor vision and the actual distance the user is from the cart itself. Some details like the account username, date and time are non essential for the shopping experience and have been downsized to benefit the essential components such as the navigation and content (it may be worth noting however that although small they are among the details that are permanently on screen).

This was a touch screen application I built used to educate potential home owners of the property, amenities, developer and available floorplans at the Riverhouse Condominiums presentation centre while working at Montana Steele Advertising.