I work as a senior software engineer at PeopleFluent in Raleigh, NC where I design, develop and maintain the front-end of the "Vendor Management System" web application used by Human Resource personnel all over the world. I lead the development team for design, user experience and architectural decisions in the UI layer to improve maintenance and decrease development costs. In my spare time I also do front-end development work on the side for small businesses and constultancies like CraftTek Consulting.
This kind of work doesn't get the love it deserves. You'll never see a Top 10 list for awesome wireframes, but it's a crucial tool for exploring complex designs and interactions.
Sometimes they'll spring from the jumbled and raw text of a requirements document, other times from that incidental break room conversation. Ultimately, wireframing is one of the best ways to prove or disprove an idea and communicate with others about possible solutions. Low-fidelity mock-ups are great for spotting problems early on with the least amount of time invested.
I really wish I could tell some good stories about the following items, you deserve it, but I just can't create enough context to do the problems justice.
While the interfaces tend to be relatively simple and the problems they solve limited in scope, brochure sites can still be fun to work on, especially if you throw the challenges of responsive design in the mix.
Heartwood Montessori School
As of February 2016, this redesign for the school my children go to is a work in progress. It's a custom WordPress theme that's going to improve Heartwood's online presence, streamline parent-teach communication and will simplify their content management. The expected launch for this project is May, 2016 but progress on the coding can be watched on the github repo.
The support site I cooked up for an iOS application I helped develop can be found at autoloop.us/SmartLane. The Marketing Department wasn't able to help, so I was responsible for everything on this site, from design and development to copy-writing.
I think this one was a great experience — it's a single page scrolling, responsive site. Getting the active states of the navigation to correctly match the scroll position was an interesting challenge.
The live site can be seen at autoloop.us, but the original mock-ups I did are below for reference on how the design evolved with stakeholder feedback. (I had no fewer than 4 execs giving me change requests, and design-by-committee can be a real challenge.) With the exception of the slider, I developed this site using responsive design techniques.
This is a site I developed as a freelancer when I was asked turn a web studio's design into a custom WordPress template. It included the standard PSD to HTML conversion, and I had to do a bit of custom PHP to make this work as more of a CMS than a simple blog, but it was a really straight-forward project otherwise. The screenshots below are of the code rendered in browser, and the site can be seen at airculinaireworldwide.com.
Here are some things I did for various applications I work with at Loop. These pages tend to be a lot more complex than a simple brochure site, and they come with a lot more constraints.
(Constraints include various usability concerns between both trained and inexperienced users, interactive and visual consistency with the rest of our very large application, as well as requirements passed down from stakeholders.)
Vehicle Configuration & Scheduling
Here are a few screens with varying degrees of complexity from a couple of our applications. From left to right: vehicle matching for quote generation, online appointment scheduling for the general public to use, and service package configuration.
This is an internal tool we developed for system monitoring. It's not very pretty, but it let's the engineering team check performance from any device.
One of the absolute biggest problems we struggle with for AutoLoop is site navigation. For various reasons, both good and bad, we've been locked into some decisions made many years ago.
These are some concepts I shared with our CPO. The interaction isn't exactly spelled out, but hovering or tapping on the logo provides a large dropdown containing all high-level navigation. This solves a number of issues for us: it frees up screen real estate and user cognitive load; it simplifies the management of dynamic content based on user permission; and it makes it far easier to add more top-tier features and applications to the site.
We won't be getting around to the app redesign for a little bit yet, but I think the idea is worth revisiting.
Dashboards, reports and graphs can be really fun to work with, but wrapping your head around data to do them well can be a real challenge.
I work closely with product managers to encode the data they want reported into compelling and useful screens.
Fun fact, I design my graphs in Google's Chart Playground just to be sure what we need can readily be done with their API. It adds a bit of time to the process, but I think it's better safe than sorry.
Charts & Graphs
Encoding data into charts can be a challenge. Sometimes it involves using tools you don't like (ugh, pie charts!) Other times it requires complex interactions to get all the request data on screen. Design is extremely collaborative and sometimes there's some friction: Are we showing enough data? Too much data? Can we merge data points to improve the user experience?
One fun feature I got to work on was a "Market Profile" report. One of challenges was that we needed to build out a report while providing and updating data for the user. The end result was a really tight feedback loop for the user as they selected criteria, analyzed the results and then either triggered an email campaign or generated a report for export. This was one of the first projects where I used AngularJS and I had a great time doing it.
Without a doubt, tables are totally abused at the hands of engineers. I get it — it's fast, easy, and doesn't require much thought because the content is already coming from a table in the database, but they don't necessarily do anything for the user. Below are two examples of data tables I've done.
This first one is a redesign of a page I did that originally had 6 separate tables spat up on it. After a little data culling and with a content filter, we were able to bring the content down to a single table with very clear relationships in the data reported.
This second example is a page that would be far better off in an Excel spreadsheet. Since that wasn't an option, I had to figure out a way to display a crazy amount of information in a very limited amount of space. I think breaking these sections out into their own page would help a lot, especially with the complex row and column collapsing that's going on, but that wasn't an option either.
While at Loop, I had to ramp up very quickly from zero iOS development experience in order to meet a hard deadline for our very first iOS application.
I cooked up all of the visual assets and did quite a bit of the necessary code for the UI. Unfortunately, that all came after initial app prototyping, so the layout isn't as refined as I think it could have been if we had given ourselves more time.
Objective-C was a big shock at first, I can't believe how much I take for granted when it comes to web development, but I got a lot out of developing a native app.
There's a lot of subtle interaction you can't get from screenshots and, while the app can be downloaded from the App Store, it's hidden behind a login.App Store