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 from HeathWallace

Since the beginning of the year, I have been helping HeathWallace again.   As of November 2011, I wrote on this site that I would love to work with that company again.  Less than 2 months later, I got my wish! My contract was from January – April, and has just ended with the site going live!   I am happy to have seen the project from the design phase, through much of the development phase, and all through population, testing, and deployment.   Thanks again HW!     My Role This time, I did not work in a project management capacity.  Instead, I am working on Content Population and Quality Assurance.  From January through late April, my duties included learning the new CMS environment, testing the ability of the client to manage their own site, reporting bugs to the development team, placing content into the templates we created on the CMS, catching typos, better establishing what the branding guidelines would look like in obscure scenarios, and working with the great team at HW again to make it all happen at break-neck speed.   The Work Here is an example of a typical day.  In the AM, we would receive 30 changes from the client to the content they created.  Within 3 hours, we went live with that content.  Then we would test a previous batch of work by another team member who was populating new pages.  In the end, another 50 pages would be sent to the client for approval and they would then prep new changes to the content.  Busy stuff!  Combine to this that we had re-work due to features being built-in as we populated, and you have a very big process.     The Site Went Live! Well, here we are at the end of April, and the site has just gone live.  A major financial institution has a shiny new website, with over 300 pages of new content, new features, and a great user experience. After about 9 months of my working on this site, longer for the full-time members of HeathWallace, the site is live and looking great.  I am proud to have a hand in it, and am still impressed with the great team that put it...

Learn More

Children’s Artwork – Cottage Grove Planters Society in 2012

For a 3rd and 4th batch, I have helped out the wonderful Leiana Gary with her planters project. Her wonderful cause has had some trying troubles and wonderful successes over the past season.  One notable success is a grant from Pepsi to help fund the project.  Another notable success is the inclusion of additional sponsors to help maintain the lovely flowers.  And lastly, the planters are even getting press. Click here to learn more about the Cottage Grove Planters Society As before, my work is to take the 12″x12″ artwork from the children and make it look great.  This means making it roughly 3x larger, clean up any stray marks, use Photoshop to edit any “over-painting” where the children cannot redo mistakes they made effectively with paint alone.  Then I fit the work to a template we decided upon, match colors to create a background, and add sponsorship information.  In the samples shown, a basic font is used.  In some cases, we experiment with different fonts if time allows. If you have any means or time, please try to support this great cause.  The children love seeing their art publicly, and the neighborhood seems a bit warmer with these beautiful planters. Here is some of the wonderful artwork from the batches this...

Learn More

A T-Shirt Shop – How Challenges Make Beauty

  A midst more professional work, I spent a couple of days over the weekend putting together a t-shirt shop online.  While the site claimed it offered templates, the build was virtually from scratch. This writeup illustrates a tale: that design is more beautiful when you can understand the problems it had to solve.  The constraints make design. Project Summary: The T-shirt design was mine.  So is the writing on the site, which is meant to be light-hearted and a bit funny as it focuses on a very low-brow topic. The site layout has been heavily modified by me, including the architecture of how products are organized.  I created all of the icons and buttons, and the left navigation from scratch.  The product offerings were also mine. So like I said above, “virtually from scratch”. And all of this was accomplished in 4 days.  Well, not the t-shirt design, just the site.  The T-shirt design, that was another week of work on-and-off.  See the site: www.cafepress.com/drinkfest Project Details: Why a ‘Shop’: Every couple of years, I am asked to put together a t-shirt design, and same challenge arises in the form of a question: “If we order 15 women’s smalls, among the various other sizes, will we really get the re-coup the cost? Or will people back out and we are stuck with shirts no one wants?”   Thankfully, I am just the designer, not the person getting commitments and fronting the money because invariably, the answer is “no”.  Somehow the sponsor would end up with a couple extra shirts at the end that no one wants. I picked on small female sizes in this example because it certainly isn’t men’s large size that are ever left – that is the first one to sell out, perhaps because people are more likely to wear a shirt too big than too small. Since most of these shirt design projects are for fun and not for profit, whoever fronted the money would be at a loss on the whole project.  A shame really.  Had the person planning this project instead planned to make a small conservative profit, then then they would have at least broken even! This would have spread the risk among every shirt sold.  (Sorry to get...

Learn More

South American Buffet Opens its Doors

I have been working for a couple months on a side project, the website for a new restaurant: South American Buffet in Bolingbrook, IL. The restaurant is the concept of Clara Pareja and Dr. Efrain Flores.  Together, they bring their love of South American cuisine to the town of Bolingbrook and beyond.  They chose a buffet-style in order to maintain a family-atmosphere that is important to them and their cultures. The site is now live, but there is still much work to do.  So I will provide images and details at a later date. Visit: SouthAmericanBuffet.com Update: The site is down currently.  The pains of a small business seem to include forgetting to pay the hosting!  I have been in communication with the manager at SAM to help get her site back up and...

Learn More

Thank You HeathWallace!

A Final Update For the past nearly 4 months, I have been helping a wonderful little office of a larger global interactive agency. HeathWallace is a part of the large agency conglomerate, WPP Group.  HW is based out of England, with offices in Chicago, IL, Cape Town, South Africa, Hong Kong, China,  and Melbourne, Australia.  HW specializes in financial institutions.  They are strong supporters of a User Experience Design methodology, which I am a big fan of. It has been a pleasure working with such an intimate yet large company. About the Company With the attention of a small agency, but the presence of a large global team, HeathWallace is rather unique.  In the office I was in, we had several international people on the team.  We also were located near other large WPP agencies in the same building.  It was impressive. I was even on calls with people abroad, across the country, and in Canada.  Timezones mean little to a global company like HW. My Role I was a project manager for a website redesign for a large financial institution.  Other than that, I cannot say more due to non-disclosure agreements.  While it was sometimes a challenge to get everyone across the globe on a single conference call, it was a fun challenge and a pleasure to help lead.   Farewell My contract with HeathWallace went longer than I had anticipated, but I would have loved to spend even longer there. As I have written about before, the team is made entirely of experts that were truly a pleasure to work with.  My contract ended simply because the full-time resources I was filling in for had more capacity. I will miss the team, the client, the work, and the lovely space in the luxurious Merchandise Mart in the Chicago river north neighborhood.  Heck, a train station was WITHIN the building! Perhaps some day we will meet again!...

Learn More

The Four Hour Client

The amount of work I was able to complete within 4 hours for my friend DJ PillFX makes me rather proud. My friend and old college roommate, Ratish Pillai, going these days by PillFX, needed business cards.  He was spinning a big gig in the next week and knew it was an opportunity to get further business.  The best way to get word out about yourself to people around you while your hands are busy is to have something speak for you.  In this case, he wanted business cards. While I had to make some compromises, in the interest of time, the result is good.  PillFX was very happy with the cards.  The font choice and color choice was his.  The idea for the neon look was also his.  The ring on the lower-left of the front is meant to be ambiguous – to look like a ring of light.  The faded background shows that the ring of light is actually a CDJ, a DJs tool for spinning. Part of the process was to create a logo.  While we had little time to do that, it came out well.  I would not consider this a proper logo by any account – it does not consider the b/w viewing, it is not a metaphor for the brand, and the lines are rather messy.  But again, not bad for so little time. Below are images of the final product.  And I will work to later show a bit more of my process around this project, it is rather revealing....

Learn More

“I Need This Done… Yesterday”

“Chris, I need business cards… right away.” Projects that start like this can be a unique experience. In my experience, the job goes out the door, but I am left wondering “what if”. What if I chose different colors? What if I had done a full font search? What if we used stock photos instead? It all boils down to one question: what if we had more time, would the design change? The answer is always the same: Yes, of course. Of course time affects a design. And even if you work hard to keep the quality high, and even if you have a vast library of design tools and resources you can utilize to maximize the output while saving your client dollars (like freeware fonts, design site created patterns, and creative commons licensed images), at least one thing is always sacrificed in an agile design process. That one thing is decision making. Decision making: the ability to think-over design decisions before moving forward. Personally, when under the gun, the client gets everything they want. I try to turn off my decision making in order to avoid trampling on a client’s vision.  Afterall, they have had more time to think about a project than I have by that point.  I consider myself a simple tool for my client’s thoughts – a vessel for their inspiration – at least until they ask my input. Then I scramble to build variations on the fly, share them, collaboratively discuss the options, and mold their motivation through the process.  Some would call this a great experience.  I sure hope my clients do. But for me, something is lacking – I am empty after this experience.  Sorry to sound corny, but I feel “used”. Often, the end result is less than stellar because of something some clients overlook: not every first thought is the best. Design involves variations and trial and error. Design involves pulling from your experience of thousands of past projects.  Design involves a honed creativity and making a result that is precise and clean. And all of that takes time. I love clients that come to me last minute.  It means they are thinking of me when things get tough.  I am the person my clients turn-to...

Learn More

HeathWallace Update

My project at HeathWallace seems to have been extended.  No major fanfare to it, I just had a check-in with the office manager who will extend my work into the development cycle a bit.  No word for how long, but that is very typical of on-site freelance work.  You flow with the changing weather and help as best as possible.   Work So Far My initial project quote was a 3 month project in order to help this Chicago interactive agency house get through their design phase of a major project.  Three months have passed, the design phase is (mostly) behind us, and we are now entering the development cycle.  I have been asked to keep helping. The Work – Design Phase Previously I had been project managing the Information Architect, Graphic Designer, Content Strategist, Tech lead, and Search Engine experts through this important design phase.  This included managing resources, timelines, and deliverables. We had over 5 batches of wireframes that turned into designs, all which needed client buy-in.  So every week, we presented something new, gathered feedback from past presentations, and moved forward packing up approved designs for the next steps.  It was quite an effort.  I was involved in the reporting and presentation of deliverables quite heavily, on top of the behind-the-scenes work with the resources. The Team – All Experts Through all of this work, the experts at HeathWallace made everything look easy.  The resources I have been working with are truly a pleasure to work with.  It seems everyone on the team has skills not only of their own position, but of the others around them.   So the IA has UX and design skills, the Graphic Designer knows coding, and the Tech lead is truly jack-of-all-trades. So from a management perspective, these resources allowed me to focus on polishing the presentation to the client instead of badgering about deadlines.   What’s Next The next phase of work will be the development cycle.  During this time, my project management role will focus on two things: Helping the Tech lead with the team of developers (at a high-level), and working with the Editor on content creation.  The client needed to extend this aspect of the previous phase into development due to...

Learn More

More Work for the Planters Association

Once again I find myself helping these wonderful people who beautify the Cottage Grove neighborhood. This is the second set of planters I am helping design the art framing for, and the effort has been increased to step up the quality. The added effort includes the following things: In this batch of designs, I spent some time finding a unique font for every panel, by the client’s request. The colors of the frame now match the artwork created by the students a bit closer. If you see a color not from within the painting, it is likely a compliment color of the largest element to help make it “jump” Brush strokes in the art were either enchanced to compensate for the inherent problem with scanning art. Kids make mistakes. I tried to correct those where possible. The hardest part is distinguishing between overpainting and muddiness from a mistake and those stray marks that give the piece “character”. Too much polish can be a bad thing. Strengthen the bird sketch from one of the young artists. While a part of the scanning limitation described above, fixing faded pencil sketches is much more challenging than acrylic paint. The pencil work is by a high-school student.  The acrylic paint is from a grammar school students.  And the frame and page layout work is from me. Below are the designs.  ...

Learn More

Helping HeathWallace

Today I begin with a new client.  HeathWallace.  They are an interactive & web design agency headquartered in England.  They have an office here in Chicago, in the location of their WPP sister agency JWT.  I am very much looking forward to helping them.  And I am looking forward to working in the very nice office of the former Chicago top-agency JWT. My role at HeathWallace will be as a project manager. While this is much different than the technology creative I bill myself to be, this role is far from unfamiliar.  As project manager, I will be working with people in the roles I know well: the graphic designer, the SEO expert, the user experience designer, the developers.  I am rather unique in that I have worn many of those hats myself.  In the earlier years of the web design industry, we had to.  But today, there are roles based on each aspect of the design process.  And there is someone needed to help move the project along.  Someone who can speak the same language as the client.  Someone who can translate technical jargon into business speak.  Someone who can juggle a ton of balls in the air, and still wear a smile.  Someone who has been there before, so knows the next steps.  And when things get rough, someone is needed to assure everyone that all will pass. This person for the next several months will be me.   HeathWallace seems to have a smaller office here in the states.  But their global presence is impressive.  An office in England, Hong Kong, South Africa, & Australia.  Five continents of expertise, I’d call that an impressive setup.  Their niche is financial institutions, meaning they are experts at those business sites with long legal footnotes, interest-rate calculators, and numbers, numbers, numbers. HeathWallace has been around since 2001.  Their mission is stated on their site as, “Our mission is to provide organisations with clean and simple, user friendly websites and to improve the quality of service for customers and businesses.  At HeathWallace we work with our clients to develop customer and business focused usable and accessible websites.”   HeathWallace is my client, but they too serve clients.  Their client I cannot disclose.  Their site does...

Learn More

Riverbend Capital Advisors

When a client wants a clean simple site, that does not mean less work.  The pressure is on to create a subtle site of precision and quality.  In this piece, it is the little details that add the sophistication. Project Overview: I created a site for the Riverbend Capital Advisors through my partnership with Seraph Technology Solutions. The main capital advisor, Tom Hession, was re-branding his company and needed a new site.  With many years of experience, and a large client list, Tom needed a site that portrayed the stability and growth that his clients found through his services.  He wanted the site to be simple though.  The content, page structure, and layout are indeed simple.  But the interactivity and design details subtly portray the quality of the brand. See the site: www.riverbendcapitaladvisors.com Project Details: A Question of Branding: The idea behind the company name was Tom’s love of the water, specifically the Chicago River. Plus it makes for a great metaphor of investing.  Clients need help foreseeing the path beyond the next bend in the river.  Who knows what lies beyond.  Riverbend Capital Advisors act as a river guide to the torrential waters of the investment market.  In their capable hands, the twists and turns of economic boons and downturns seem like still waters. On this project, I worked with Jennifer Lunz, a skilled graphic designer.  Jennifer helped create a logo for the Riverbend brand. Jennifer did a great job portraying this concept in the logo.  I worked with Jennifer and the client to choose the colors, patterns, and layout of the pages that would best support this conceptual branding.   Complexity to the Simplicity Despite the desire to have a simple site, I wanted this site to be more than a plain white corporate homepage.  Riverbend clients were not children learning about investing, they were successful and wealthy people looking to maintain their success.  They were used to steak dinners, cigars, exotic places, nice cars – all things of quality. So I figured tight lines, patterns, gradients, and interesting interactivity could be a nice subtle touch.  To keep the simplicity, there would be no drop-down menus, no aggregated content, no banner rotator element or accordion or flyout to show information.  And initially, I wanted a rather monotone...

Learn More

Thanks Manifest Digital!

Over the past 6 weeks, I have worked at Manifest Digital as a freelance User Experience Architect.  I spent many long hours there, once or twice we even pulled a 16 hour day.  It was a positive experience allowing me to glean insight to how a successful digital agency works.  It also gave me a great deal of confidence in my own skills and processes – I contributed a lot there. Over those 6 weeks, I have tuned wireframes to precision. This precision sometimes required making over 25 revisions to a single design in order to meet the needs of the design team, the tech/IT team, and the client.  And sometimes a set of 2-3 revisions in a row simply help the client better discuss and figure out what they wanted before investing too many development hours down the road.  That is one purpose of wireframes, to rapidly develop a vision that would normally take many expensive man-hours to show visually. This is the point in the post where I usually show the work I accomplished there. But in this case, I cannot.  Since the site is not live yet, I was asked by Manifest to not show any wireframes. I also cannot reveal the name of the client, but encourage you to look at their list of clients to speculate.  I can only say that this client has a great deal of content on their existing site that required a great deal of effort to map to reoccurring templates. In the end, myself and one junior UX architect had created the following: Solutions Over 30 templates for the client’s site redesign And an additional 15+ unique wireframes that did not fit reoccurring templates All of these required buy-in from several teams of stakeholders. In addition, we made over 600 annotation notes to help the team lead explain and obtain buy-in for the 45+ wireframes we created. About 10 pages were turned into a working prototype using Axure RP software. Not only for links but for interactive elements like accordions, carousels, and center stage / banner rotators. Over 30 wireframe concepts were unused at various points in the process.  Since I like to give 3 concepts every time, you can see how quickly they can add up. All this in...

Learn More

Agency Work

One of the major reasons why I started freelancing in 2010 was to learn more about agency life.  Sure, I have been doing a combination of business and creative services for years.  But mainly through the corporate, non-profit, and small business world.  So I am happy to share that I have just begun a project at a notable Chicago creative agency. This four week project has me working with Manifest Digital, an interactive agency in downtown Chicago. My role will be primarily wireframing for a major client of theirs.  There has also been talk of similar UX work for this project: prototyping, client-presentations, and research in this role as well. (Update: I have been extended, now it seems to be a six week project.  I guess they like my work!) I look forward to learning more about how agencies like this operate.  And more importantly, to test the effectiveness and efficiency of their process against my own. See Manifest’s Site: Click...

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

Helping the Cottage Grove Planters Association

  One of my friends recently introduced me to a wonderful group looking for graphic design help. The Cottage Grove Planters Association beautify their neighborhood by not only planting flowers in the concrete planters, but by decorating the boxes with 3′ tall artwork created by students at local public grammar schools.  Some students aren’t in the best economic areas, so this work does wonders for the kids, who get to see their art displayed in a public space. The founder of this organization, Leiana Gary is one of the nicest people I have met in a long time.  And her organization has such a nice story behind it.  So I was happy to help the organization out with some graphic design work. My role was to take 12″ artwork and blow it up to 36″. I also added descriptive copy to explain the art and noted its contributors. Also a big part of the project was to bring out the best in the artwork, including adding borders, backgrounds, and enhancing the original paintings to overcome limitations of the scanning and enlargement process. Click here to learn more about this Cottage Grove Planters Society. Below are images I laid out for the...

Learn More