Amanda Olsen

Front End Developer User Experience Enthusiast


Technologies: UX

Aisle3 (company intranet) Time Off Tool

Completed: August 23, 2013

Go check it out:

Tell me more:

This was my first dive into writing a PHP plugin for WordPress. While a co-worker wrote most of it and should receive the credit, I learned and did much tweaking/building new features. The purpose of this experience was to manage time off requests on the company intranet (named "Aisle3").

There are two portions: the user page (hey, I need to request some time off; also it'd be nice if I already knew how much time I had used) and the supervisor page (acts as a dashboard for all requests on that supervisor's team).

There is a third level - the "Operations" view which can see/manage all requests across the company. All of these functions and many more (including the ability to export the requests to an Excel sheet) were built into these two pages. I was responsible for the UX (general layout) and many of the design decisions. Also, I wrote all necessary JS and, like I earlier mentioned, edited/wrote a lot of PHP. It was a great project.

ValerieBroucek Responsive Low-Fi Wireframes

Completed: October 11, 2013

Go check it out:

Tell me more:

These are low-fi responsive wireframes for the homepage of a simple site. This site has two templates: homepage and internal page. The site owner wanted her site redesigned and rebuilt as responsive and mobile.

These wireframes represent the different break points in the responsive design of the homepage. Because this is a redesign, I was able to reference the elements already on the live homepage to determine the best page layout at break points which I chose. The break points I chose were 1) as few as possible so less media queries would need to be written and 2) device agnostic, meaning the only element I focused on was page width. Each wireframe displays, in the upper right, the page width it is intended for. For example, the wireframe which reads "Designed for: up to 550px wide" is the layout which will display on many/most phones. It is possible I could have reduced the set of wireframes from 5 to 4, but because the site is so simple, it will take the developer only a few more lines of code (literally) to differentiate some of these layouts, and will ultimately achieve a look closer to the original site.

I used ProtoShare to produce these wireframes. This was my first time using ProtoShare and I was quite impressed. It seems to have a full set of options, is easy to use, has excellent collaboration tools, outputs to HTML (by creating a zip or by generating a URL which you can share with others), and also seems to have excellent prototyping features (although I didn't get to test these as this site was too simple to need that).