Intro to product design for non designers at Oxford Uni for GeekGirls

I gave a talk on Product Design, User Interface Design and User-Experience Design, at the Said Business School, Oxford University organized by GeekGirl, for students and future entrepreneurs.

Let’s start with a visual metaphor: Imagine … your product, your website, your App, your software, is a house. And you are throwing a party!

You are the host and you welcome your guest in, show them the way to the lounge, through the hall, pass some doors, offer them a drink, make them feel welcomed. All that movement and interaction between you the host and the guest, is your user experience design. And the way you decorated your space, the wallpaper, the furnishings, your choice of lamp, the table, the lighting, the atmosphere, that is your user interface design.
What holds your house together, the bricks behind the wallpaper, the beams, the heating, the electricity, that is your back-end development: your code: your programming which uses languages such as Objective C, Python, Ruby on Rails . Your user-interface deisgn and user experience design, everything you can see is your front-end web development, which uses programming languages such as HTML, CSS, Java-Script and J-Query.

But Design is not just visual, its not just about aesthetics, it’s about problem solving, it’s a way of thinking.

DESIGN THINKING

Design Thinking is a problem-solving process: solution-focused approach: a tool, which helps business’s to innovate: to develop your start-up ideas.

Design Thinking is human-centered, it is about studying culture and context, before we start thinking about ergonomics and putting the buttons in the right places. It’s about learning by building prototypes, Minimum Viable Products, and then through participation – user testing / feedback – re-iterating, we can quickly incorporate that feedback back into the product. It’s an ongoing process, back and forth. As your business will grow, there will always be expansion, evolution. So these iterations, and tests will / should, naturally happen.

If we study the way designers approach problems, how they come up with design solutions, we can replicate this approach onto your business development, help to develop your start-up idea, to create innovative ideas and this is what Design Thinking is about.

THE DESIGN PROCESS

Below is the Design Process, as a double-shaped diamond. At the discovery phase: we research, listen, interview our customers, understand their culture and the context, their needs, problems, goals. But we are designers, visual people, so we also add to the mix cinema for inspiration, go to art galleries, this is part of the culture after all. It was mentioned that is was not the product that solved the problems, but the technology, I would like to take that one step further and say it is the imagination. A combination of analysis and imagination. That’s the discovery phase.

We then define the problem and the solution, develop prototypes, do user testing, re-iterate, and deliver : launch.

START-UP IDEAS

So design begins with a problem. To quote Paul Graham - the founder of the incubator Y Combinator. A very inspiring man who writes great essays, you must read them. “The way to get startup ideas is not to try to think of startup ideas. It’s to look for problems, preferably problems you have yourself”

We need to be solution focused: this involves both analysis and imagination in problem-solving to create preferably a world-changing, habit changing innovation but most often solutions to first world problems!

RE-IMAGINING

I have chose the the above examples of start-ups not only because they are very successful, but because they have a designer on their founding team, or count design as crucial to their success.

I have designed in other mediums too, animations and short films, print, interiors, but what I enjoy about working in technology, is not only that have I discovered a new medium for my imagination to play with, but the idea that everything that exists in the real world, the off line world can be recreated, re-imagined online: objects, behaviors, and habits. And that’s exciting, it’s like a second world.

Lets look at at some examples:

Instagram re-imagined the camera, with instant digital effects, share, sync, discover.

Twitter re-imagined real-time news flow, citizens can report news via mobiles devices, global reach.

Flipboard re-imagined a pile of magazines: too many sites all over the place, this all leads to one place: a digital magazine, always up-to-date, access everywhere, interactive, share. And super well designed, making it a pleasure to use.

PEOPLE AND STORIES

Ok, so we design by starting with a problem, and our problem starts with people!

So let’s imagine this problem: “When I travel I don’t want to stay in a hotel but a home abroad, I don’t want to feel like a tourist, and I want my home comforts” - Yeah, am talking about Airbnb, someones already on it! What AirBnB would have done is interviewed not only travelers but hosts, and discovered tons of insight of what to include on their website, from discovering that travellers would want to know whose house they are staying at, so creating social profiles is important. Discovering that one fo the most important factors in our decision making is what the place looks like: so photos and photography are very important. Now AirBnB have the luxury of sending a photographer to come over to your place and doing a proper photoshoot!

So we need to listen to our users, by listening to them, we can connect the dots of opportunity and need and this will instruct, influence and inspire not only your start-up idea, but your design, your User Experience Design (UX) and User Interface Design (UI) and inspire your Brand’s Persona. That is very important too. What will your brand‘s philosophy and values be?

When I listen to people’s start-up ideas, I want to say: have you checked the App store? cos it’s there! It’s most likely already be done. But I know that maybe the user-experience is rubbish, it doesn’t look good, it hasn’t be done properly, and you’ll need to differentiate yourself from your competition, stand out, be better, create a better brand, offer a better solution, be a better company: start-up.

PLANNING YOUR JOURNEYS

Interview whom you think your typical customers will be: get some insight into their behaviour, habits, needs, goals, note their demographics, social network and create personas and stories. Stories that demonstrate a situation that will lead your user to interact with your product, and the smaller but equally crucial stories of what will happen once they are on your site, and leave your site. What happens once they pressed BUY. I love Apple’s customer service, when I purchase an item, I receive the email confirmation, an email with delivery date and info, a reminder closer to that date when it is on its way.

The whole journey matters. There is no person at the other end of the site, it’s just your product and the customer, you need to have a dialogue and offer the same quality of services, that you would get offline, but without a person, this has to be communicated with interactions visually and written.

So through crafting your persona, you will get insight into the most important features to include in your first prototype, you will have a web of routes, when things go right or wrong too, and will be able to decide what info goes on what page.

Above is a simple version of a sitemap - home} Products – Checkout} About Us} Support} Blog - the pages on which all your information will be stored.

from there, these basic pages need to be filled in with the details.

So if this App wireframe above was meant to sell hats, the layout wouldn’t be right, we would want the image box to be more dominant.

CASE STUDY: DESIGN SOLUTIONS

When designing page, also try to think about the real world equivalent. When you are in a store, and for example there is a shoe display, placing a hat nearby that might suit the shoes, could encourage you to purchase that too or either, websites must do the same. The website page wireframe (above) illustrates this concept in the form of ‘upcoming events’.

Below, is an example of 2 similar companies, Craigslist and AirBnB with 2 totally different design solutions to their home page.

First impressions count online too, and the number one rule is “don’t make your users think” - on the internet we do not read information, we scan first. And reading requires more thinking! So images, colours, placement, all this makes scanning easier to do.

On the listings page below, same content, and a totally different way to display this information.

DESIGNERS IN ACTION – video

Below is a video of the making of the Brazilian Olympics Logo – non-designers have found this insightful as it shows the process of creating a logo, designers in their studio, and the evolution of their thoughts and ideas. This makes good priming for going into talking about visual communication and User Interface Design.

MY TOP 3 DESIGN RULES

So I want to share with you my top 3 design rules, because one day you will be working with designers, and it might help to communicate: gage, and get involved with the visual design conversation.

NUMBER 1. Form Follows Function

None of the good design solutions we saw have been used because it just looks good. Every design choice we make has a reason. Don’t follow trends or fashion because it will soon be out of date. Good design is timeless.

NUMBER 2. The Gestaldt law of proximity

If you place lots of dots close together, it looks like one whole, and if you move the circles further apart from each other, you can see the individual dots. For example if you place 2 buttons one against the other, you need to separate them enough so they can be noticed. But then there’s responsive designs: all the different devices out there with their different screen sizes which make it harder for us to plan this, so colour is important.

RULE 3. Colour Wheel

This is how the colour wheel works – opposite colours of the spectrum compliment each other, so look good together, whilst at the same time contrasting each other. So if you want to make 2 elements stand out from each other, but yet look good (of course) choose complimentary colors.

Analogous colors are colors that are side by side on the color wheel. So like different tones of green – you often see in a website footer, say a dark green background with text in 2 different shades of the background, it is not the most important part of your site, but it’s there, sleeping but present at the bottom of the page.

USER INTERFACE ELEMENTS

These are the elements UI Design Elements that will speak to your user and guide them through your site.

You will have decided all the path, movement, navigations when designing the user-experience design. With the Design Principles of colour, harmony, balance, the User Interface elements – buttons, menus, icons, controls, tabs etc. – have been designed carefully choosing the right color, typography, size in order to gently persuade your user to accomplish your business goals.

CHAT LIKE A DESIGNER

Like here: I am gonna geek out, and tell you why I like the design of this page. (I have chosen AirBnB, because the founders are Designers from Parsons, and I like their design and use their product!)

I think the use of light grey as a backgrund is interesting: it makes the images pop-out more, and I think that if the background was white, with the quality of photograPhy, it could look like a page out of Architectural Digest, which would create a contrast strong enough to give us a reality check – actually that isn’t such a nice place, lol – it’s actually just well ordered, taken from a good angle… and I guess during the user research that they realized that price was a huge factor in decision making – one of the first things we look at, and also what determines whether we will make that choice – so I like how there is like a ray of sunshine behind it: the yellow gradient .. And also the Buy Button is green – green is positive and healthy – so I click BOOK and it makes me feel good.. and then there is that heart, a little Grey heart, and I want to click it..it looks a little sad…

SMALL DETAILS CAN MAKE A BIG DIFFERENCE

Heart clicked and a pop-up dialogue shows up and I can share this place I like with my friends. (Over-sharing? Pah!) What’s interesting is the star use to be a heart, but the designers found that the star is a generic utilitarian symbol. So when they changed the star to a heart, engagement went up 30% and inspired AirBnB to create Wishlists – which helped turned their listings into content. So we dont just click on AirBnB when we are thinking of going on a holiday, but can go on the site for fun, to wish. Small details can make a big difference.