News and blog posts from our students and faculty

Category Archives: Portfolio

Wireframe v.06

V.06 -Final Iteration.

For  version six of the wireframes, attention was focused on the information, navigation, and the interface elements. The main goal was to create a fully functioning and comprehensive version of the wireframes. After going through the process of building the prototype, testing, and correcting it six different times, the process became more fluid.  The tool of indesign was no longer an obstacle in my way.  It started to be used more powerfully to create various layers of depth, shading, and visual elements.

When reviewing this iteration, take note of the following changes: the additional professor and faculty page, the professor modal page, a separate professor rating page, an improved profile page that allows you to edit classes, and a customized email to invite Sarah to sign up for classes.   To review the wires, Sarah is starting her second year of a two year hybrid MBA program.  She has been notified that classes for the Spring semester are open and she can choose her class and pick her courses.  Progress University gives the students the ability to take both online and offline courses.

To foresee future growth of Progress University, we added additional MBA programs which are nested under one main header navigation. With a continued focus on elements and style, the site has a strong functionality.  This made a world of a difference.  Last iteration lacked a flow that would allow the user to move through the site effortlessly. 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 has a strong focus on comprehension and visual elements. Each iteration improved each time, little by little.  The user testing feedback was positive the people that I tested with all mentioned this was something that they had wished they had while they were registering for classes.  That’s all for now.

Dave

Posted in Portfolio | Leave a comment

V.04 Wireframes: Focus on Visual Elements

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

Posted in Interaction Design, Portfolio | Leave a comment

Designers as Poets

“They are often used unconsciously, arising out of the natural activity of creation and interaction with created things. Yet, when consciously understood, developed, and applied, design languages can build on and improve this natural activity, and can result in dramatically better interactions, environments, and things of all kinds.”
- Design Languages, Reinfrank & Evenson

In my mind, design of everyday products can be generally broken down into two broad categories: There are those that were rigorously thought-out and improved upon over centuries of tinkering. Then there are those that “just work,” which everyone has grown accustom to, even if they don’t work…

In the first case, this is because a thoughtful designer took the time to compose the artifact in a way that falls in line with either an environment that already exists, utilizing affordances. This ‘design environment’ can either be of organic origin (like the layering of shingles inspired by the feathers on a duck’s back) or entirely manmade (like scrolling through a website on a touchscreen, mimicking the movement of paper, or looking even further back, literal scrolls of paper).

Take your typical felt-tip marker for example.

The design of a pencil is restricted to a key element: a thin rod of lead (or graphite today). You want the lead as thin and long as possible because a small tip to write with is desirable and the longer the lead, the longer the life of the pencil.

On the other hand, markers don’t have a solid, pre-formed marking material. Ink can be contained in any shaped vessel. So imagine the designer of a marker completely disregarding the already existing ‘system’ of writing implements and making some blocky or perhaps spherical shaped marker. It would work just fine, so long as the ink was directed through a narrow tip. And, in fact, such markers do exist for those with hand/dexterity issues.

But our fictional ‘marker designer’ said to him/herself, why not create a marker that draws upon* the same design system affordances as existing writing implements. That way people wouldn’t have to juggle two ‘languages’ while switching back and forth between pencil and marker.

The two tools live in the same design environment, why shouldn’t they share the same language, right?

 

Well, then there are examples of the opposite. Cases where the user has only trial & error and previous experience to draw upon to navigate a design environment.

Take power-windows in cars. Have you ever been in a friend’s car and had to try rocking the widow switch back & forth before getting the window to go in the direction you wanted? Perhaps this was because the switch was inadequately marked or was placed on a horizontal surface. How is the user to infer which direction the window will go?

The owner of the car likely ran into this same quandary when they first purchased the vehicle, but since has memorized which direction the window travels when the bottom is pushed in either direction. With more complicated systems, the user often is forced to develop other tools to help them remember “what does what.” (think ‘lefty-loosey, righty-tighty)

 

So where did the designer fail? Well, in the case of the window, it’s pretty clear: either install the switch on a vertical surface or, like Toyota has done, design a switch with a recess that allows the user to pull up, involving the action of lifting, a natural affordance that relates to moving the window up.

This is effectively introducing a new ‘word’ into the existing design language.

Even though the owner of the car doesn’t have to think twice about the window switch, and perhaps even scoffs at his passengers when they fumble with it, this is bad design.

 

As Shakespeare was accused** of “making up” words, so the designer is sometimes forced and, in a certain sense, encouraged, to develop new user experiences. But if Shakespeare would have created an entirely new language no one would have read his great works and all would have been for nought.

 

* he he!

** this very word is attributed to Shakespeare!

Posted in Design Education, Portfolio | Leave a comment

IDSE 201 – Learning to Iterate

For the entire 2nd Quarter of our Rapid Ideation and Creative Problem Solving class with Jon Kolko we are doing one thing.

Six times.

The assignment was to develop a new and helpful way for a fictional student to sign up for and schedule classes at a university or college. After some quick brainstorming, I set to mocking up a wireframe of what I created as an online application.

As you see in the PDFs below, the student can click through a simple enough website to see what classes are available, how they will apply to his major & minor studies and add them to his schedule.

What I learned: Get to digital wireframing ASAP! I spent too much time with pen&paper thinking of cool little features that I then didn’t have time to actually digitize.

Good thing the motto of this class, and AC4D for that matter, is “do it again!”

Here’s the first iteration!

 

Posted in Methods, Portfolio | Leave a comment

Position Diagram | Narrative in the Post-Rational World

Posted in Portfolio | Leave a comment

the introduction and application of technology

 

Posted in Portfolio, Theory | Leave a comment

Position Diagram

Posted in Portfolio | Leave a comment

For Posterity: Five Days With Adobe Illustrator

My first time using Adobe Illustrator. This was done with the pen tool. I felt sky high.

Day 2 of Illustrator, using the gradient mesh tool. Going for a Richard Scarry look. Confidence in decline…

Illustrator Day 3. Shapes tool seems oddly limited for anything other than mid-century stylings. Bewildered yet satisfied.

Day 4 of Illustrator, using the clipping mask. This took way longer than it looks like, learning the tool and unlearning workarounds. Confidence plummets.

Illustrator Day 5. Symbol tool. Grapes? I leave that to the viewer. Enjoying the feeling of completion on something.

Posted in Creativity, Portfolio | Leave a comment

What Kind of Designer are You? Positioning Diagram

What Kind of Designer are You?

To me design means problem solving, creating a road map , and executing for good! In my opinion if design means to solve problems we need to define and look at the most pressing problems facing us right now.   So what comes to mind when you think of current problems we face? give yourself 10 seconds go:

Mass consumption
Hunger
Lack of Water
Population Explosion
Education
Food Shortage
Homelessness
Resource Depletion
Pollution
Health Care

So in 10 seconds I came up with 10 Massive problems!  How about you?   So with that being said if Design seeks to solve problems, and we are facing some serious problems why are there so many “designers” still creating widgets, that aren’t tackling these problems.   What if we could somehow reverse the 80/20 rule.  Get 80% of designers to tackle the important problems worth solving right now, and let 20% of of designers create more stuff.



What are the tools needed, the carrot as they say, how do we spin like Bernay’s and
not churn out “garbage that stinks” as Chochinov would say..
My opinion is you lay out the roadmap, you present the consequences, you put on a full court media blitz that we don’t have time to sleep on this stuff anymore.  We need everyone and everything in our arsenal to turn the ship around.

That is why I chose Chochinov and Bernay’s.  Its a combination of intention from the start, the questioning of authority, and covering your ears and closing your eyes to what you are being told, as Chochinov would say.  You take the full court press of Bernay’s, the Grandfather of Spin, you use propaganda, public relations, and execution.   You use what we already have and not produce more, utilized the existing media, platforms, to then take action for Good.   The more people that
combine intention, with action, we will get more leaders, just like Gandhi.

Here is some inspiration!!!
1. Change yourself.
“You must be the change you want to see in the world.”
2. You are in control.
3. Forgive and let it go.
the weak can never forgive, the strong can.
4. Without action you aren’t going anywhere.
5. Take care of this moment.
6. Everyone is human.
7. Persist.
8. See the good in people and help them.
9. Be congruent, be authentic, be your true self.
“Happiness is when what you think, what you say, and what you do are in harmony.”
10. Continue to grow and evolve.
”Constant development is the law of life, and a man who always tries to maintain his dogmas in order to appear consistent drives himself into a false position

Posted in Classes, Portfolio | Leave a comment

Thoughts on Design Portfolios

Designers are typically judged based on their portfolio of work. When I worked at frog, I encountered lots of unsolicited portfolios. The sad reality of sending a portfolio to a consultancy is that your chances of getting a job are a weighted dice roll, based on a mixture of extremely fast first impressions, serendipitous timing, and who you know. When I would receive a portfolio from someone I’d never heard of, I tried my best to actually look at it, but if my schedule was three-deep back to back meetings all day long, the email was ignored. Sometimes, if the sender got lucky, they might send it on the same day that a plea for hiring went out, usually based on a sales cycle accelerating or a deal closing unexpectedly. In these cases, they got the benefit of the doubt. And, in the cases where the email comes with a recommendation from a friend, I couldn’t help but be interested to see the work.

And so, if you made it past the “luck” phase, I would open the .pdf or click the web link.
At this point, you might stop and question things like “HR departments”, “your resume is on file”, and “just apply through the website”, which are probably all good ideas, but that – in my experience – are giant black holes. The human connection is huge.

This portfolio shows what a candidate has done, how they’ve done it, and how proficient they are at it. The “it” has traditionally been print and industrial design, and since these are visual end-artifacts, it’s easy to show the output, and the process is equally as visual.

But designers who work on software, systems, and services encounter a challenge: how do you show the output, and the process, in a meaningful way? Here are some pragmatic pieces of advice that I found myself wishing I could have offered, as I reviewed portfolios. Your mileage may vary, and all usual caveats about how impersonal, cold, and unforgiving agency life is apply.

General Advice
You may be the best generalist in the world, and it might be emotionally difficult for you to pigeon-hole yourself as a “type of designer”, but if there’s an open rec for a “visual designer”, that means the firm has money allocated to hire someone who does visual design work, and a need for that type of work. Your great wireframing skills are a nice supplement, showing you can work in a broader team, but at that critical moment of initial portfolio review, show what the rec asked for.

Your portfolio doesn’t need to be big. In fact, the best portfolios I reviewed usually had two projects in them – one that showed breadth, and one that showed depth. For example, it might contain a project that illustrates the entire design process, end to end; this illustrates if the candidate understands how design works, is familiar with a collaborative and user-centered approach, and thinks about things iteratively. Then, the second project offers only examples that show proficiency in an extremely focused skill area, such as wireframing, icon development, sketching, motion graphics, and so-on. This area of focus shows how the candidate can be resourced on day one: they can be put on a project that’s billable.

Attention to detail matters, a lot. In this very first moment, where someone hasn’t seen your work before and you’ve made it through the cold-call luck round, you have about 10 seconds for an arrogant, over-extended, tired creative director to poke at your material before they find something they don’t like and leave. This translates to:

  • No spelling errors, of anything, anywhere
  • Things in a grid line up exactly (to the pixel)
  • Use Helvetica, Futura, Frutiger, or Meta, and nothing else, unless you actually know what you’re doing
  • The .pdf you send is less than 3 megs
  • The URL you send is actually live
  • The cover letter that you send to frog doesn’t explain why you would be great for the job at IDEO (you would be chagrined to know how frequently this happens)
  • The imagery you include has been cropped, color adjusted, and otherwise manipulated to be appropriate
  • Use big pictures. Little itty-bitty sketches indicate a lack of confidence in the work. Be big and bold.

Design Research
When showing design research, it’s tempting to show photographs of people, particularly of people’s faces. This is irrelevant to someone judging your portfolio. Who are these people? Why are they relevant? What did you do with them? You could explain this in the accompanying text, but at that first glance, no one is likely to actually read that text. Instead of pictures of people, show imagery that includes insightful evidence of workflow, artifact, or space problems – and circle and annotate the important part of the image, so it’s super obvious.

When I review DR portfolios, I care less about your ability to plan and execute design research, and more about your ability to synthesize and make meaning out of the data you found. This means showing diagrams, insights, quotes, and other things that led you to big, important takeaways for design.

Taking pictures of post-it notes is really fun. I do it a lot. But showing pictures of people moving post-it notes around in your portfolio isn’t interesting and doesn’t add any value to your story. Showing pictures of post-it notes themselves isn’t that interesting, either.

There’s an expectation that someone getting a design research job knows how to conduct standard design research. If you’ve done something particularly unique, emphasize it. Did you join the girl scouts to understand teenage girls? Get a job at a grocery store to understand the supply-chain process? Work through co-design activities at a retirement home? Show the unique stuff.

Visual Design
A strong visual design portfolio shows a breadth of platform expertise. This includes designs for web, various mobile platforms, television, print, packaging, motion, and so-on; it illustrates that a consultant can work on a broad array of billing programs.

Show exploratory process. While the final artifact is nice to see, it’s also useful to see how you arrived there. Did you pick a direction on day one, or explore multiple styles over time?

Try to show that you can both take an existing brand language and extend it, and create a new language from scratch. If you never did these things in school, assign yourself a project and do them yourself.

Include both conceptual (blue-sky, experimental) and pragmatic (utilitarian, transactional), because if you can do both, you’ll be in huge demand.

Interaction and Service Design
An interaction and service design portfolio seems nebulous, because these ideas are so big and broad. But while the discipline is huge, the job you are likely applying for is much smaller in scale, scope, and expectation. Research and identify the discrete skills that a particular job expects, and be sure to illustrate competency in these skills. This probably means showing:

  • The ability to produce scenarios and storyboards, showing people in a context using a designed artifact
  • The ability to describe software using wireframes, comps, and interactive prototypes
  • The ability to sketch interfaces, rapidly, in an exploratory manner
  • The ability to use diagrams to sketch complex systems
  • The ability to create a visual map showing how a service extends across touchpoints

Don’t use lorum ipsem, ever, for anything. Include real content in all of the work you show, illustrating that you understand the vocabulary and contextual cues of a particular discipline

Think through all interactions in a given context, even if you don’t intend to show those. Just because you emphasize a particular linear path through an interface or service, there are other things that a user can do at any given stage. By showing these in your work, you indicate to a reviewer that you are thinking comprehensively about a system.

Include an exhaustive level of detail in screen designs. Try to make your work look as real as possible, by including contextual clues (browser chrome, a sketch of a kiosk surrounding a touchscreen, a user’s hand on a mobile phone), detailed form design for controls and inputs, sketched illustrations of framing imagery (rather than big square empty placeholder boxes), etc.

If you can create working or quasi-working digital prototypes, do it – this is a great way of showing you really consider how interactions should feel over time. But if you include these on a website, make sure they work, and make sure it’s clear what features and functions are prototyped and which aren’t functioning. Give the reviewer a clear path through your UI.

*

I hope this is a helpful overview of things I would look for in reviewing portfolios. Keep in mind that my intent was to fill specific roles at a specific consultancy, which had extremely specific needs related to the core business, resourcing, utilization, and so-on. A different business will look for different things. Good luck :-)

*

You might also enjoy reading 7 Steps to a Kick-Ass UX Portfolio, by Will Evans or Five Steps to a Better Design Portfolio, by Jeff Veen.

Posted in Creativity, Personal Brand, Portfolio | 1 Comment