Written by: Paul O'Connell | Nephronim
Skype and coffee are my two basic tools when I’m on the job of talking to startups who ask me to look over their product or site and give a practical honest critique of it. I’m a startup guy and I love helping out as much as possible so handing out tid-bits of advice on direction or usability can be alot of fun. After doing quite a few of these I realise that many of the startups don’t have designers and are winging it themselves. This in mind I thought that I would volunteer some ‘cliff notes’ of design advice when putting together the identity and structuring your website or even app.
To this end here are 8 things to avoid when starting down the road of putting the website together or starting into the iterative process of your MVP. Obviously this is all dependant on your product but there are some universal design constants more startups can aim to avoid. On average a startup team constitution is made up of the lead developer and the Marketing/business guy. I will assume for the purposes of this article that either two will have some understanding of Photoshop / Illustrator / Fireworks or another design program they feel comfortable with.
1/ Design isn’t what you might think it is:
Design is communication. The interaction, behaviours, flows even down to the copy that you talk to your users with, all of this is designed communication and process. But most importantly design is problem solving through process and ingenuity. This is me setting out broad context.
2/ A fixed identity at the beginning is crazy:
In my opinion like the motivations of every user the product should begin with itself and move outward. If you are young and still in the discovery stage there will be alot of questions still in the air. Who the company is, what problem you are actually solving and how you will go about it. A logo, Identity and the guidelines that a brand needs are fed by the direction and vision that a company has established. In a few months time you could be pivoting into a completely different area so the visual identity you need has to be as fluid as you are right now. Logo’s are the heart and soul of companies so wait until you have finished the discovery phase to begin putting the full identity together. Setting out a simple colour palette and some rules to what those colours are and how they should be deployed can be a great time saving measure. When deciding on colours understand that every colour has a meaning and have their complimentary and contrasting partner. Have a look at this article on the Huffington Post on The Psychology of Color in Logo Design (INFOGRAPHIC) . This will start down the path of defining your look and feel: instruments of how you talk to the user/customer.
Decide on a font. Whether that be Googlefonts/Typekit integration or just the basic web-safe font choices it doesn’t really matter just pick one and stick to it. I have seen alot of startup websites where pages have different sized fonts on multiple pages. This breaks the rhythm that you build from page to page. Make it large enough to comfortably read with a good line-height so paragraphs of content don’t look cluttered and give it space to breath. You will hear designers mention the fact that most images and content aren’t left to breath in layouts and this is very true. Simply giving elements enough space to communicate and not overwhelm the user can make the experience for the user more comfortable. I read a good article entitled ‘Don’t let your startup make these design mistakes’ by Matias Corea on the TNW blog and it addresses column size and basic typographic rules for layout in detail.
3/ Don’t launch into it and hope it all comes together:
When starting the site design process ask yourself “What do you want the user to learn or achieve?”. With this in mind structure your sequence of pages to accomplish that goal. My philosophy has always been ‘One page one focus’. When planning out your website pages and wireframing what elements really need to go into them?. Set the mantra for each page, whether this be an about page or a set of intake screens to ingratiate users into the process of website. It’s very easy to get lost in the complication of trying to explain something clearly and quickly.
I am a big believer in mapping out every page of your site or app. I have worked with many startups who added pages as needed and then have to come back at a later stage and try and rework the tangled mess of pages that it has become. In building terms this becomes akin to adding an extension to an extension of a new house. It becomes a costly measure and can be easily avoided with a little planning at the early stages.
What I do at the start is add all the elements I think should be on each page. Then I slowly reduce it back to where clarity in communication is achieved using the simplest mixture of elements possible . Try and aim for simplicity at all times. This is the first point where user feedback can help you refine the features and options that users actually interact with and takes the guessing game out of the equation.
4/ You are not the target audience:
Gathering feedback during any part of the design phase is absolutely essential. This can be done during the simple identity phase or when you get the bones of your designed MVP together. You are not the target audience and thinking that the shade of purple you like is what all your audience will adore will ultimately prove not to be as insightful as actually talking to your actual users and audience. Just remember to gather as much information and data as possible and set upon the task of deciding what data is useful and what isn’t. Not all feedback is good or relevant feedback but gathering it all together will help you make informed decisions now and in the future.
Any UX designer will tell you the power of user scenarios. This is simply defining the story of your user so you can refine tactics to fully engage with them in a more directed manner. Alot of User eXperience revolves around defining context and mapping out the needs of the user. Then you move to meeting these needs. Being user centric should be your core rationale behind near all design decisions taken as it only serves to build a strong more connective experience for the individual user. Here is a well laid out guide to user scenarios.
5/ Designing with a kitchen sink mentality:
How your present content is incredibly important. Creating an effective homepage can be a huge task, balancing the content, visuals and an explanatory process. Understand density of content and the different levels of understanding that you might cater to. Here you can take the idea of ‘Cater and layer‘. I worked with a not for profit multi-national company and they possessed thousands of pages of content that needed to opened out for users that were very familiar with the organisations goals and also to visitors that happened upon the website for the first time. Make access points from the homepage to different densities of information. We did this using hubs for the content so you can get an overview of the section and lay it out to be explored.
Use a grid system. Whether that be the Golden Ratio or a proportional responsive grid system, use one of the many permutations out there. It unifies all the elements of the page that you rationalised should be there. The grid offers some solid structure so you can align features/headers/navigation systems from one page to another so the user doesn’t have to notice small errors in placement of buttons or texts.
"A design should have some tension and some expression in itself. I like to compare it with the lines on a football field. It is a strict grid.In this grid you play a game and these can be nice games or very boring games." — Wim Crouwel
6/ The website should be the same as the mobile experience:
No. Design for context. Different situations demand different actions and functionalities from the UI. Mobile and responsive setups only help refine the focus of the features but the whole feature set doesn’t need to be available when you are mobile. I have made this mistake on some projects directly translating feature sets without thinking about whether they will be used. I personally believe that the mobile experience is not where users will input alot of data or go beyond a few clicks to achieve their goal, it’s a browse and consume content while being mobile. The pay-off needs to be very clear to even get the user to input text on an iPhone for example so keep reassuring proposition and pay-off without over-playing your hand.
7/ Don’t talk at your users:
It seems like common sense but know who you’re talking to. When putting the copy together for the pages decide the tone of voice early on and how you want to talk to users. This flows not only to the copy for the web pages but also for automatic mailings you set up and even to 2 pagers for gaining investment interest at the beginning. Keep language simple and accessible. Test out the copy on as many people as you can for grammar/spelling but also that the text makes sense while making sure you don’t talk at them with jargon and buzzwords. You are the authority on your product and you want to introduce it to the uninitiated.
8/ Rounded corners and textured backgrounds are not the key:
Reading up on current trends, whether your visuals should be flat or skeuomorphic, it’s easy to get caught up on the wave of what feels popular. Even looking around on having the style web2.0 or 3.0 for that matter it really doesn’t matter. Whatever style allows you to keep changing, testing and iterating will be fine to prove your product. As along as the experience feels well put together and thought out then even small design errors will be forgiven until you fully stand on your own two feet and are more suited to better address them. Your users want to help and support even in the early days. We all love the underdog! Remember to shorten the path for yourself by creating good ground work now (and record it) this will help you further down the line.
There are many useful tools and plugins to help bridge the transition from design to implementation but I like to use UberLayer which is an app that allows you to position a translucent image of the design over the actual in browser output of the code. Very helpful for positioning and getting everything aligned.
Bringing everything together in a nice bow-tie, I would say that the keys to tackling the mountain of doing design without the a dedicated designer is keep it simple for yourself and for implementation. Know who you are talking to and design for them. As much as possible be inclusionary and test assumptions whether that be the main concept to the feature set, the user is part of the design team. Plan and set out your decisions well from colour choices to things you definitely don’t want but record them and put them on the wall so they aren’t forgotten. If you can achieve just a few of these goals this will help you make the first-steps to a comfortable personal experience for your users and maybe begin the journey as a design culture startup. The next stage will be to find and bring a designer in to pull all the ground work you started together. Good luck with it.