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.  This series of articles shows a couple of details from projects mentioned in my portfolio that reflect UX work. Homepage Redesign: Prototyping the Top Menu Project Overview: This example focuses on a single project in depth – the homepage redesign.  The project overview can be found here. Project Details: With the site redesign, I offered prototypes which included rollovers, a level of interactivity which was never seen on the site before. Based on a requirements document put together by myself and the director, the graphic designer created a look she liked.  But there was a point of contention.  The site had never offered a drop-down menu, only three simple links up top: “services”, “perspectives”, and “about”. I presented studies showing that on complex sites, that users are discouraged by not being able to find their destination within 3 clicks.  As a result, a drop-down menu would offer a quicker navigation throughout the large site.  But not everyone was convinced.  The menu became quite an issue of the overall design as it could quickly change the project scope. For example, this menu became the main discussion of over 4 meetings with Marketing and IT departments. I put together a total of 10 options, each with their benefits and drawbacks.  This included 3 custom prototype options coded by hand.  I also augmented the main three with 7 other prototypes that could be found on the web.  And some of them offered a drop-down option.  This way, the stakeholders and I could decide on which offered the best “bang for the buck”.  The customized options allowed us to fit more features in, but had a higher “cost” of time to develop.  The found options allowed a low cost (often free), but could not be custom tailored. The decision of the drop-down hinged upon the designer approving one of the prototypes and the project managers approving the “cost” of the option. Prototypes in Action: Below are the actual prototypes developed based on the requirements document of the site.  In the actual deliverable, each would be presented with the estimated cost, the benefits,...

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.  This series of articles shows a couple of details from projects mentioned in my portfolio that reflect UX work. Homepage Redesign: Wireframing the Site Project Overview: This example focuses on a single project in depth – the Forsythe.com 2010 homepage redesign.  The project overview can be found here. Project Details: The graphic designer was formerly the only person to mock up designs for the web.  The only problem was, that they took a great deal of effort before we received buy-on, which may cause wasted time.  So when I came around, offering new functionality and interactivity to projects (plus actual coding knowledge), we had to re-examine the design process. This project was an early success story. We redesigned the website’s skin.  Because we used an Oracle Portal CMS, we were able to keep the content, assets (graphics, movies, etc), and architecture the same.  Using wireframes to get buy-in on technical elements and possible roadblocks helped speed up the process greatly.  We could redesign around a roadblock that would have only been caught in the graphic mockup phase.  Or when we discovered one feature we wanted was complicated and would delay the whole project, then we were able to change our wireframes to reflect these changes without starting coding work.  In a fast business, changes to the business requirements can cause a lot of stress on the team developing the product quickly. The wireframes themselves came from my discussions with the developers in the IT department.  We talked about the actual pixel width of the existing template, how to migrate the system to the new page, how to re-use header/footers, and any other technical requirements that I could incorporate to speed up the process for them.  The designer created artwork in Adobe Illustrator, and I reworked the artwork into Fireworks to fit precisely within the developer’s specs.   Wireframe Details: Below is one of the more detailed wireframes I created.  Actually, it may not even look like wireframes to you, it might look like a finished protoype. That is the power of Fireworks.  If you open the simple-seeming PNG...

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

This image represents 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. Project Details: Deb put together this beautiful campaign, which is likely even more complex than I illustrated here because she had to plan the events, premiums, signage, speakers, raffle, etc.  My job was to execute all of the technology aspects and graphics to communicate around the events. I am fortunate that she also allows me to make all the decisions necessary to make the technology side a great success!  And combined with Lisa’s stellar writing, this was an outstanding project. Sadly I cannot show the final result here on this site. The offerings mentioned in the email are covered under NDA. Storyboard: Contents of the storyboard include the following: The board includes a flow: strategy up top with tactics below. There are four columns: the first with the shared information, and the next three columns representing the three events. So it is essentially a navigation map of the different touch points for a customer. Each small post-it represents open issues to resolve.  The many post-its show this image is very much mid-project. There is also a requirements document (formatted as a check list) so I can track the campaign progress.  In the end, there will be a cleaner flow with no messy notes. For icing on the cake, I added: The initial wire frames of the different layouts. Descriptions of the viewer personas, the stereotypical types of viewers we might have (tied to the variations in messaging each will get). The different elements (buttons, headlines, video players) broken out into prototypes to aid our decision making. I was going to augment it with colored yarn to show the interconnectivity, but figured this was already overboard for my “company culture”. I’m starting a revolution of proper planning and creativity, one step at a time. (Oh, and you get a glimpse of my desk. I am a huge tea aficionado, fan of Buddhism and Asian culture, love rock and roll concerts, and was proud to attend South...

Learn More