My work

Design of Lunch Money Buddy App

Tasks performed: User journeys, site map, mockups, prototype

The design of the Lunch Money Buddy app was taken from concept though prototype. The ask for this project was to design a mobile application that parent could use to manage their childrens lunch money. The focus of the app was to allow parents to load funds, track how much each child had left in their account and also to show upcoming lunch menus.

First, user journeys were created to better understand how users might use this product. This journey walks Henry through adding funds to his son Joe's account. Henry get's an alert from the app. He opens the app to find that the alert was due to a low balance in Joe's account. Henry is quickly able to add funds from the checking account that he has previously stored in the app.

The next step was to start sketching out a possible site map to start to understand how the information would be organized. Hand sketched sitemaps were generated and then itterated through until a final version was created.

Now it was time to start to think through the screens of the app. Lots of versions of hand sketches were itterated through to think through the two main flows of adding funds to the account and viewing the upcoming schedule. A mobile template was used to sketch with. The basic interactions of the screens were thought through and sketched out.

Once the sketches were in a good place it was time to convert them to mockups. The hand sketches were turned into a more formal version that could be used for testing or communicating to the developers the proper design. For this project I created the prototype myself, but typically the mockups could have been handed off to developers. The benefit of having a prototpye is that testing could be performed to find errors on the design and changes made prior to giving the design to developement. Following are some sample screens of the mockups and a screen shot of the prototyped version of the app.

Graphic to explain UX process

Tasks performed: Informative Graphic

When my team gets engaged in a project it's often apparent that folks don't fully understand the function of UX. It is an assumption many times that we "Make things look good". This is a graphic that I put together and use often to explain the process of UX and what is involved. It's always a nice opening slide to get folks on the same page and understand what we can provide.

Information archecture rework of CoolTools.com

Tasks performed: Information archecture, mockups

CoolTools.com presented users with several different types of navigations. There was a main navigation for the parent site, a main navigation for the sub-site, a local navigation for the sub-site and finally an exact organization scheme for the content itself. It was even more confusing when a user would navigate to a specific section of the website.

There are several ways in which the organization of the site will be improved. The backpacking page is used as an example. One change is to move the main navigation of the Cool Tools site to the top of the page to provide some separation from the local “Categories” navigation. Organize the “Categories” into alphabetical order to take advantage of an exact organizational structure to make scanning the list easier. Move the “Month Selector” dropdown to tie it to the page elements a little better. Also, add a field label and show the default selection in the dropdown. This will better show how and what month the data is currently being sorted by. Add a date to each post above the title to show that the data is organized in chronological order. Add some styling to the “Archives” link as well as the “Backpacking” link to show where in the hierarchy of the site the user is.

Information archecture analysis for the Upper Sandusky Library

Tasks performed: Content Inventory

This content inventory for the Upper Sandusky Library uses a simple numbering system. The home page starts at 0.0 and each of the main pages from the main navigation are then followed with 1.0 through 5.0. Each sub section contains the main pages number plus a decimal to show the level. All of the “Page Titles” were the same, so I used the “Link Label” as a column instead. The Link Label, URL and Format of the data are all shown. The secondary page navigations will be shown in a separate table but follow the same numbering system.