News and blog posts from our students and faculty

Chuck and I continue to work on wire iterations for Careshare.  The latest version provoked a conversation on order and structure with Professor Franks.  As you can tell, the first one is a bit floating – and that led to it feeling somewhat off, but at first I wasn’t sure what to do.  After working through some of the issues with Professor Franks, I realized there were some simple modifications I could do to have the site begin to sing. I include below a sample page from before and after.

1)Use a grid system.  I was trying to line up everything more or less by eye, which is not an easy or accurate way to go.  I in fact imported a layer into Illustrator of bars, 30 pixels wide, and spaced 30 pixels apart.  Then, I made sure all elements lined up with edges of the grid.

2)Don’t use fully “black” fonts.  I was using them all over the page, and they are a bit harsh.  Lightening them up even a little bit makes them softer on the eyes, which is certainly part of what we (and any site or app) should do.

3)Decide on a color scheme – use kuler (a tool provided by Adobe) or something similar to give you ideas on colors that work well together and fit your overall vision for the site. In terms of color, we wanted to include a warm and inviting, yet airy feel.  We felt good about the turquoise and the red-orange, but needed other colors to complement them better.  Kuler helped us find colors that did so.

4)Keep equal spacing and padding around all elements.  For example, if there are 15 pixels of space between font above a line and the line itself, there should be the same amount of space below.

5)Stay aligned the same way throughout the site.  In the first example below, the first two sections are left aligned and the final, centered.  This can through a user off.

6)Have a different color for clickable links, and use that throughout.  You can see ours is a dark gray – while subtle, we think that users will intuitively pick this up.

Next steps for us include more iteration, testing, and adding in “orphaned” pages.  In the past week, we have conducted clickable prototype testing with 2 users, and over the next week we hope to do the same with 2-3 additional caregivers to continue to get feedback on how to improve.

After

Below is the 2nd iteration of Position Digram 2 for ISDE 302. The image is based on a quote from the assigned readings. Using competitive innovation, as opposed to competitive imitation, designers are able to create better products for the end user. Which in turn will result in greater buy in from the users.

A few major evolution’s occurred in this iteration and all of them can be seen in the single slide below. I moved the status information to the right to reflect many popular websites, like Amazon, with the classes added listed under FALL 2012 and a calendar of the schedule   updating in the box. I minimalized and moved the profile picture to reflect sites like Facebook, and removed unnecessary personal information to decrease clutter. I changed the navigation to one that uses words to allow the user to know where they’ve been. The text in the body was described as shouting by more than one think-aloud tester, and was changed to be less loud. And finally, I began to explore making more visual buttons for classes.

In our final Rapid Ideation and Creative Problem Solving class, we presented our fifth (and final!) iterations of wireframes for class scheduling and registration.

After four previous versions, I wasn’t totally sure what to do next. So I printed and hung each wire from Iteration 4 on the wall and I stepped back to look at the whole system. Though I kept multiple paths for people to add, browse/search, and drop courses, I stripped out many of the extra features. No more setting time preferences. Fewer filters. Only the catalog view to see course listings or descriptions (instead of an alternative view when starting from the schedule section).

Which brought me to Iteration 5. (Click image to download PDF.)

To test my wireframes, I set up a hyperlinked Keynote presentation so users could click through the prototype on a computer. While I discovered a couple issues where links weren’t set up properly (or where people tried to use the keyboard rather than click the “glass” keyboard on screen), I think the digital wireframes created a smoother testing process. Instead of trying to sort through and lay down one of 35-40 sheets of paper, I was able to pay more attention to user behavior.

Of the five strangers who tested the application for me, several finished and had a sense of, “That’s it?” As in, “Cool—I’m done? That wasn’t bad at all!” And the snags users did experience were mostly issues related to iPad conventions or elements better addressed by visual design.

So what did I learn from this class? I appreciate the process of iterating and incremental improvement on behalf of a user’s experience. I understand the value of Think-Aloud user testing (and approaching random people in coffee shops to get perspectives I likely wouldn’t get from people who know me). I learned the challenge of designing a comprehensive system as well as considering detailed interactions. I messed around with prototyping tools and templates ranging from markers and paper to print-outs to interactive digital mock-ups. I moved from a set of requirements to a rough thing to a more polished version to something that testers wanted to see made into a real application.

Finally, I learned the difference between done and finished. I could create 82 more iterations if I wanted. I could continue testing and tweaking. These wires aren’t finished. But I learned a lot about incremental problem solving, and I’m perfectly happy putting away these wires and being done with this project.

For the last iteration of wireframes, I changed up quite a bit. I added more elements to the social aspect as merged multiple screens into the social aspect. I think I made quite a bit of progress with this iteration. It’s been a lot of work to get to this point, looking back at the start of this quarter I wasn’t sure how I was ever going to finish this project. There is so much responsibility when it comes to designing for the user. You think you have covered every single corner, and you suddenly realize you may have touched about 1/10th of it. However, using user testing, and going through multiple iterations of this project, I finally have better grasp on wireframing.

Iteration #5

As painful as this project was at times, I really enjoyed building wireframes. It was like placing together an extremely complicated puzzle. There’s not real right answer. There is some really bad answers, a lot of good answers, and only a few great answers. I hope to get to a place where I can always come up with a great answer.

This is the last iteration of our course scheduler wireframes for IDSE201, in which we bid a fond farewell—or good riddance—depending on how the process went. I must admit that this iteration and the last one were a complete struggle. The last iteration didn’t change much, but this time I found a little bit more inspiration and landed on something that I felt balanced the simplicity required for the user experience and that degree planning is pretty complex no matter how you slice it.

Once you cut through standard degree requirements, there’s not a lot of room for variation. The most room one has for adding courses is in a major, and that’s pretty much constrained by department. So this version of the scheduler organizes the classes you need to take in buckets wherein the range of choices is not particularly huge. I’m not totally satisfied with the handling of required classes versus pick one (or at least n) of the following courses.

During testing, all my participants were able to easily work their way through the flow, going from an empty schedule to a completed semester. Only the print and export buttons were somewhat hard to find, and surely there is a better way to say export, like “send to calendar,” but that fits in a button!

Jon Kolko says we go through the pain and frustration of interaction design so that our users don’t have to. Point proven.

The latest iteration of the course scheduler is available in PDF or Flash formats. Note the Flash version is manually controlled with forward and back buttons in the upper-right.

Let’s start with some honesty.  I wasn’t very happy with my 4^th iteration in our IDSE201 – Rapid Ideation and Creative Problem Solving class.  I felt like I had hit a brick wall on what I knew how to implement within the design constraints of the assignment, as well as the constraints I put on myself. After lifting some requirements on myself and spending time with my professor, I spent the past 2 weeks designing a brand new User Interface to my Purdue University course scheduling application. Honesty still intact, I’m pretty darn proud of my 5^th and last iteration for this assignment. Not only is it more visually attractive, but user testing has confirmed that it is much more intuitive than the previous 4 iterations.

Some new concept drawings before the final iteration of ISDE 201 – Rapid Ideation and Prototyping

Iteration5.pdf

My 5^th iteration now features a filter column within the Course Catalog portion. Students may now search and filter for their classes based upon College, Level, Location, and Professor. The course description is now embedded within the Course Catalog, instead of being a pop-up modal. Upon selection of a course, students now see all available sections visually on the weekly calendar, and have the ability to get professor information right within the Course catalog. Moving classes on the schedule is now a simple drag and drop interface.

While I feel like I’ve always been able to recognize good UX design, the past 8 weeks of courses and iterations have given me the tools and general ability to create good UX design.  I wish that I could do another iteration on these wireframes for this assignment to add some polish. Perhaps I will over the holiday break.

Neoclassical economics presents a pretty simple theory of supply and demand to set the equilibrium price of a manufactured good. The supply and demand theory assumes that consumers make “rational” decisions, when choosing which product to purchase. Is a person being “irrational” when choosing to fly a more expensive airline with the same in-flight services? Hardly, the consumer places additional value on the intangible experience of flying with the more expensive airline. With the American economy based 80% on services, companies must design the intangibles which attract customers to their business.

Every product includes some sort of service. The service in this case can be the interaction with the sales person, an automatic sliding door, the delivery method, or a website.  The combination of the physical product along with the supporting intangibles creates a customer experience. Each customer experience lasts longer than the direct interaction and is unique for each customer.

Excellent customer experiences are emotionally rewarding, fuel growth, drives loyalty, and inspire people to share their experiences with their peers. There is tangible proof that organizations that prioritize a clear focus on their customer’s experience enjoy widespread success. The popular brands in a specific an industry always rate in the superior customer experience category. These brands are the 3% of companies which are referenced in 90% of all industry books, articles, and blog posts. These elite organizations have a clear purpose that is visible and understood by all they create and follow a service blueprint to seamlessly synchronize their products, services, and stories to consistently meet, exceed, and often anticipate customer goals throughout an end-to-end experience.  For example, Starbucks has perfected the taste of their coffee and the cup that holds it. These items are the physical product that they sell to the customer, yet one can argue that it’s not just their coffee and cups that makes them so successful. There are a lot of intangibles which Starbucks has intentionally designed. Such as ordering process and flow of the line, the presence of free wifi, the casual conversation with the barista, the coffee names etc. Starbucks has been very successful because the design the entire customer experience, not just their product and logo.

By thinking of a brand’s product as a customer experience, and not a physical good, companies have a better chance of being successful, retaining customers and growing quickly. Build a complete customer experience first, then the “product” and customers will follow.

I recently met with Eric Freedman of Mass Relevance, in part of our project to meet connect with local and influential individuals both in and outside of the Austin Design Community.  We focused our conversation on important things for young interactions designers to know.  I typed up the transcript, and include the most salient points here.  I’ve stripped out specific clients for confidentiality purposes.

In sum, all of these are extremely important things that I am learning through rapid prototyping this quarter.  As it turns out, it wasn’t just enough to hear them the first time.  But after my first iterations though the scheduling software design project, I’m realizing just how key these ideas are.  In my next iteration, I will be going back through each page to make sure that the ideas of progressive disclosure and design hierarchy are embodied.  Does the user have clear and meaningful options on this page?  Does the design match up with their sense of activity flow?

The idea of selling a design every time has been hit on through our presentation coaching, and this piece of wisdom follows the same formula.  Knowing who your audience is, and why they are paying you (or at least why they say they are paying you!) is key.  Design goals will never trump business goals.  But they can be presented in a frame of business goals that can help both the company and the user.

Progressive Disclosure

“One of my first projects at frog was (a fortune 500 website) redesign.  The user just wanted to buy a computer.  The company wants to sell them upgrades and service plans, certain machines, you know.  The company has their goals and the user has his or her goals.

There were a lot of design theories we put in place to make that design work.  Some still hold true.  One is the notion of progressive disclosure.  At the time, if you wanted to buy a computer, there were a lot of things you had to know.  The notion of getting someone down from the top level down to that purchase choice, as simply as possible, required progressive disclosure.  Start with simple decisions before you blow out all of the options.”

Design Hierarchy

“Another thing that is very important is a design hierarchy…we created what was called the “hot dog” button which was really yellow hot dog shape button.  there was essentially one on every page.  If all you did was click the yellow button on every page, you would (accomplish your goal) in 5 steps.

That was the primary button.  And you know there were secondary buttons.  And there were tertiary buttons, which were just a tiny blue arrow.  And behind that was just a real text link.  You use button hierarchy to help the user meet their goals of that page.  What does the user want to do?  Give them the most obvious way to do THAT.  Something as simple as a button hierarchy helps the user understand flow.”

Client Engagement, Balancing Business and User Goals

“We got the job, but we had to prove that the design worked, every time.  If you lead with ‘here are the goals you told us’ that you needed to accomplish here, and then this is what we’ve defined as the users goals, here’s the baseline for describing why we’re making the decisions we’re making, and here’s how we’ve done it, then they’re like, yes that makes sense. Because everyone in an organization then needs to sell it to their boss, to prove they’re doing a good job and made the right choices.”

View Wires.

For this iteration, I focused on the visual elements of the wireframes including changes to font type and size. To ensure the type wasn’t distracting,  I decided to go with Gotham which has a clean look. When reviewing this iteration, take note the following visual improvements: tightening of the header and global navigation bar, improvement of spacing and shading, and different line weights to indicate visual hierarchy.

To foresee future growth of Progress University, all of the MBA programs are now nested under one main header navigation that could easily be added to.

With a continued focus on elements and style I changed the shading and spacing.  This made a world of a difference.  What originally looked like a canvas with a ton of white space is now filled with new features such as pictures and videos shown by elements of grey scale.

All of these changes were made with the intention of providing consistency and overall hierarchy of information.

Overall, this iteration is a big leap forward on the visual elements. In user testing and presentation feedback, it was clear that this version sacrificed a bit of functionality. This version held form over function. The next iteration will combine these successful elements with a keen focus on usability. That’s all for now. See you next week for V.05 of the wires.

Dave