When I started at Fpweb, I was a little overwhelmed with just how many services they offered, and because I was now in charge of the website, I was able to display those services in a way that made the most sense to me. First, I started by turning their 5 different dropdown menus into one mega menu.
But it didn’t take much time for us to add more services that would ultimately make this version feel overwhelming. My next course of action was to silo the services we offered, and give users a sense of what each service was if they didn’t recognize the name. That meant creating icons for each one of our services.
Because tedious detail heavy work is kind of my jam, I set up 100 100px x 100px illustrator artboards and put my guides 3px away from the each edge of every artboard.
Then I created some standards for the icons so someone else could create new icons that matched.
Then created a few digital mockups of how the new mega menus would look.
Between the digital comps and the final code, we made some changes to the way we siloed our services.
In addition to the mega menu, these icons had to work as large icons as well to help break up our enormous amounts of text.
When I started at Fpweb, their services were offered on a hourly bank model where customers could buy hours to complete a project. One of the first things I did as a part of the company was help them transition for a bank model to a subscription model.
I started in my sketchbook with a rough wireframe of how I’d lay out the page.
Then I started working out the typography for each subscription plan.
Then I combined all the type to see how it’d look all together.
Then I went to the computer and made a digital comp.
I used our brand colors for the whole pricing chart, but it soon became clear that with the broad scope our new subscription model would be used in, I’d need to brand each plan individually. I created avatars that would represent each plan because when you order one of these plans, it’s like your ordering one full time employee with that title.
Then I color coded each plan and it’s corresponding avatar to enhance the brand.
Then I went back to my sketchbook to quickly draw up how the page would look with avatars heading up each of the plans.
Finally, I turned my sketches into code and deployed it on our .NET platform.
What is Retraspec?
Retraspec is a social app focused on the past. This app you share your life’s defining moments–how, when, and where you experienced them.
Retraspec opens to a map of your current location with moments to be explored where you are. This helps you to connect based on the shared experience of being in the same place in the world.
This is the feature in Retraspec that allows you to share the experiences that have defined your life. You can add up to five photos, a story explaining what your moment means to you, and the location and date it took place.
The favorites page lets you store your favorite users and locations so you can easily access the people and places that matter most to you. You can sort your favorites by date from both the list and the map view.
Your profile is your personal travel album. With every moment you share, you write another chapter in the story of your life. You can recount the defining moments of your life in your profile through the map and list view. If you’re after a certain moment, you can sort by date or search for it.
See the live demo at the link
Taste Test was an interactive touchscreen exhibit that myself and a team of awesome designers made for The Magic House Children’s Museum in Kirkwood, MO. On my all-star team was Allie Nothum, Robert Koh, Nick Banjai, and myself.
Minimize Reading. Too Much text turns an interactive experience into an intimidating amount of work.
Color and Illustrations. Distinctive colors and simple illustrations will help convey instruction and information.
The basic principles of taste. We learn faster when the operation is task-focused, simple, and consistent.
Drag and Drop
Intuitive interactions. Drag and drop is a common user interface feature that has become intuitive for both adults and children.
Easily accessible. All interactive features are place in the lower region in order to be reachable for small children.
Simple interactions. Simple, task-focused interactions are highly conductive to learning and digesting information.