I am working with SciFi Cantina and Jeff Dillon and the Revival to create fully-developed fan sites for their respective products. While the final sites are still under construction, rudimentary sites are available now to allow for content generation and Internet presence.
As part of sampleminded’s contract with a new client, we have built an entirely new app on top of the old CliniTraq software code. This new app is Java and JavaScript based and runs through a web browser. I developed a new, bright color scheme with simple, intuitive icons and a pleasing interface. Here are some screenshots highlighting a few features.
Our login screen is simple and distraction-free, providing information about the software version, lab location, and creator.
This screen is where users will scan in barcodes from samples to get them going in the system. An app navigation menu drops down from the blue circle in the upper left, and lock screen, log out, and help icons are in the upper right. Buttons along the right side allow for saving, reporting problems, commenting, printing barcodes, and refreshing the screen. Each has available, hover, and disabled states. Indicators along the right side of each center item allows users to quickly see whether an entered value is valid, invalid, or in a warning state. The center item buttons have dropdowns to show comments, problems, and other information.
Racking is where the user will place aliquoted samples into racks for testing, storage, or other processes. The screen can show up to three racks in both a visual representation of the rack and a numbered list of individual tubes underneath. The racks and individual tubes can be color-coded, and grey spots indicate where space needs to be reserved for control tubes. Each tube can show warnings, problems, and comments in both the visual and numerical representations.
Slider menus allow users to do actions on each item. The slider menu in this screenshot shows that users are able to view reports, report problems, make comments, copy tube names/numbers, or remove the individual tube from the current rack.
The navigation menu is a simple nested drop down using a customisable palette of the eleven system colors. Main categories are indicated by a white background with a colored dot and border.
Each category opens into either submenu buttons or actionable button links. The buttons that will take you to a different part of the app are indicated by an arrow icon and a base color background. A submenu is a lighter variation of the main base color.
As each sublevel menu is opened, vertical stripes in the background indicate which category the final link button is a part of.
The app allows for four levels of nesting, each with a different color variation and stripe pattern.
Before and after screenshots from my work rebranding Data In Motion’s CliniTraq application to sampleminded.
I was called in to help Data In Motion create a website for their business. At first, all that was desired was a simple website to get themselves a presence on the web. Eventually, it became clear that what was actually needed was a company-wide renovation to go along with their renaming.
In addition to creating a new logo and print materials for the updated company, sampleminded, I developed an attention-grabbing website and color scheme with simple, yet effective graphics to match. I also assisted in creating copy for the site, working with team members from the company to ensure that the content was accurate.
I was asked to redesign the Scrap Girls home page and update it to be more in line with current web standards. I recreated the page using HTML4 and CSS, as the old version had been using older versions of HTML and almost no CSS. I was also in charge of updating and maintaining the rest of the Scrap Girls website.
Although the current company and website has undergone many changes since I was in charge, these designs were used during the height of Scrap Girls’s financial boom.
Heidi Dillon 