Private Example 2 – UX Requirements Through Annotations

Below are the wireframes with technical annotations from a client project.  The client has asked that I restrict access to this example. If you need access, please contact me for a login. Member Login Username:...

Learn More

More Old Wireframes

Wireframes seems to be a popular way to check out the skills of a UX designer. Someone recently pointed out that I have very few on my site.  So I have begun to go back into my old designs and pull out the frames.  Here is the first example I could find. You will not find this site in the “Website Portfolio” section.  It is a simple landing page from a campaign.  We developed the design in only a week’s time, so I am not overly proud of it.  Nothing flashy, my prototype was just sliced and exported into HTML. A web form was created on a following page. I created the design to the specifications of the business stakeholder only.  I just used web-standards, previous research, and existing user personas on on my end.  This project was also an experiment in using outsourced developers.  Meaning the design does not take the developer side into consideration.  The test was to see what the outsourced developers could come up with.  They did well.     Got Adobe Fireworks? Then check out the original file to better understand my workflow! Right-click to Save.   Honestly, I feel asking for wireframes is a flawed system of gauging skills.  So I want to take a moment to put wireframes into context. There is a lot of buzz around User Experience (UX) design.  And wireframes are what hiring managers are asked to request from candidates.  The problem is, it is like asking an artist for the initial sketches instead of the finished painting.  Unless you write backwards like Leonardo Da Vinci, wireframes are not really all that interesting.  They show only a small portion of the process involved in a successful workflow. Some people online compare wireframes to an architect’s schematics, but that is not really accurate either.  The architectural plans for a website is more in storyboarding, card sorting methods, and requirements documents than in wireframes.  We designers create wireframes to rapidly develop a concept using web-standards, and to gain initial buy-in from the client. Nothing more.  That is only a tiny portion of what the UX designer brings to the table.  We still need to develop working prototypes, build the IA, gather business requirements, project manage the design and development,...

Learn More

Private Example 1 – UX Prototyping with Axure

Below are the wireframe prototypes from a client project.  The client has asked that I restrict access to this example. If you need access, please contact me for a login. Member Login Username:...

Learn More

User Experience Design at Forsythe, Part 2: Prototypes

Much of what I created while at Forsythe can fall under the category of user experience design (UX). But my portfolio was not built around those terms. So below are a couple details from projects mentioned in my portfolio that reflect UX work.

Learn More

User Experience Design at Forsythe, Part 1: Wireframes

Much of what I created while at Forsythe can fall under the category of user experience design (UX). But my portfolio was not built around those terms. So this series of articles show a couple details from projects mentioned in my portfolio that reflect UX work.

Learn More

Wireframing as Part of a User Experience Workflow

I wanted to write a short piece about how I started using the term User Experience Designer. For years before knowing UX, I designed websites for people and companies.  Timelines were always important, and I quickly learned that early brainstorming sessions were vital to preventing repeat-work or multiple revisions. So pencil sketches were often used. And as my skills in the Adobe Suite grew, collaborative design was possible.  But of course, when moving fast digitally, only the rough elements were laid in until more time could be spent on the details. Marketing is my education. Web design was always something on the side to make me more of a capable marketer.  As a marketing-minded person, my primary interests were not only making the client happy, but using tried and true behavioral psychology principles and market research to give the customer a good result.  A good experience. I went to South By Southwest Interactive (SXSWi) in March of 2010.  It was a wonderful experience.  My job title at the time was Interactive Media Specialist, but I was tasked to look into any technology that could help our creative team.  One track of sessions I attended focused on wireframing and UX.  It was there that I learned one very important thing: everyone wireframes, and everyone wireframes differently. The goal of wireframing is to quickly develop the regions for a site so it can get buy-in and allow all of the other people involved in a project to begin working.  For years, I had already been using programs like Adobe Fireworks (and previously ImageReady) as a step in my workflow for slicing purposes and for table-based layouts. Photoshop did the heavy lifting to create rough concepts (or wireframes depending on the level of detail).  The SXSW conference showed me that I was not the only one using this program, but that I could get more out of it by using a more formal process around user experience design.  The CS5 version of the program is actually focused around rapid prototyping on the web, unlike previous versions – which aids in the use of wireframes from Photoshop. (Side note: all you Adobe history-geeks will know this already, but Fireworks is actually the red-headed step child from Macromedia.  For years, it...

Learn More

Storyboarding a Campaign

The image below is my storyboarding a big campaign. 3 events, 3 emails sent per event (2 before, one after), one decision tree (attendee vs. non-attendee), and a corresponding website with a qualifying form, all leading to a video and piece of collateral about one of our new offerings.

Learn More