Amanda Olsen

Front End Developer User Experience Enthusiast


Merging the digital and "real" worlds, one user experience at a time.

ValerieBroucek Responsive Low-Fi Wireframes

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).

Prototype for AMI Manchester Redesign
I built this responsive prototype using Bootstrap and a few other tools. It is for the redesign for the AMI Manchester site. The prototype's primary purposes were to convey to the client what the site might look like, how it might function, how the content might be broken up, and also what copy/content might currently be missing. In this scenario, the wireframing portion of the process was skipped and that seems to have worked well.

Craftsman and Kenmore JSONP Ad System
I built a JSONP system for managing/displaying ads across both and Besides allowing the ability to schedule the ads, in various groups and as single ads, the system also generates the appropriate Ominture tags for each link on every single ad. Each tag is completely unique. The system as a whole saves much time in managing hundreds of ads weekly/monthly that are added/removed across both sites. The system is also so flexible that it could be easily applied to any other site. DIY
"DIY", or Do It Yourself, is a page conglomerating many social media tools and acting as a center for DIY ideas.

Aisle3 (company intranet) Time Off Tool

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. Treat Dirt Like Dirt
This one-page experience includes video and JavaScript animation to provide a more interactive and informative experience for the user. Gallery Experience on the Product Details Page
I built this experience for the Product Details page of It acted as a more advanced/robust product gallery, which also included video. Mobile Site
This mobile site helped users choose the best product for their needs and also provided video along the way.

Gladiator Events
I built this one-page experience to be XML driven, which made maintenance of this page much easier. – Optimized for Tablet
While my team only has access to the front end of this site, I was able to appropriately optimize this site for tablet.
As part of a team effort, I helped develop my company's recently redesigned web site. I focused on the contact page in which I used the Google Maps API to implement a customized and somewhat interactive map. I contributed to several other pages and was able to gain a good understanding of responsive design. Category Page Template needed a template for all category level pages. I developed this using a semi-responsive layout.