ux for startups 1107

[email protected]

UX forStartups by Idean

Thursday, November 7, 13

mailto:[email protected]


Idean works very closely with startups through carefully selected incubators and accelerators. We also work with a few selected early stage startups with our UX Ninja offering, with which we conceptualize, wireframe and create visuals for typically 5 core screens of the service for the startup to go and raise funding based on the work we have conducted for them.

This experience led Idean's head of design to conduct a presentaGon and a large group workshop on October 17, 2013 for 8 startups at the Blackbox incubator.

Kindly find the presentaGon aRached. It has some screens of different research methodologies. Enjoy!

Please don't hesitate to contact us to learn more:

Idean Enterprises411 Kipling Street, Palo Alto, CA 94301

Phone: [email protected]

Introduction




Tips from a designer

UX demys8fied

Cornerstones for visual style crea8on

Workshop

Q&A

Agenda


Tips from a designer


Focus. Solve one problem well, rather than 10 things poorly.


Designing a product is a full time job.


Communicate your value proposition clearly.


If you outsource design, outsource the meaningful bits.


Involve your users. Learn from them, but don’t trust what they say.


Be humble, not excited, when you ask for impressions or opinions.


UX methods demystified


BenchmarkingReviewing compeGng soluGons and analyzing their strengths and weaknesses. Finding paRerns of use, copy/improve.

Full screen naviga.on #1Reeder organizes data into stacks and enhances naviga8on with a s8cky sidebar. This works for a lateral hierarchy but not that well for more complex applica8on with different

Full screen naviga.on #2NPR organizes content into horizontal strips that are scrollable. This would be inline with the current STB design. However, going deeper into the sec8ons or opening subsec8ons will

Fixed sidebar naviga.onInto_Now uses a large sidebar for naviga8on. This makes skimming content easy and fast. Sidebar also removes the need for a single “main screen” that collects stuff from elsewhere. Use standard naviga8on in iPhone with this.

No naviga.on / featured viewBBC iPlayer has “filters” instead of “naviga8on”. Using this method would force to narrow the content of the applica8on quite much. This type of layout would work quite well as “today”-‐view with hidden naviga8on.


PersonasFicGonal users of your product. Represent archetypes, not specific persons. Best built on actual user studies.


I want...• to be alerted on nearby deals on products that I am interested in

• to get great discounts of products (>50%)

• to have my deals to be personalized based on my interests

• to see relevant results when searching items

• to find products and see which stores sell them and at what price

• to be rewarded for my loyalty and efforts

I do not want...• to be bombarded by irrelevant adver8sements

• to bombard my friends with irrelevant adver8sements

• to spent unnecessary amount of 8me on finding beYer deals

• to pull out my phone and do something weird in front of others

• to worry about my privacy

• to go to redeem a deal to find out that the items are out-‐of-‐stock

I want...• to increase traffic and sales in my store

• to see what I’m paying for (i.e. conversion)

• to cheaply market new products and discounts

• to have clients return to my shop and purchase more

• to have my clients recommend my store to their friends

• to know more about my customers and what they want

• to control how the deals play out (schedules, amounts etc.)

I do not want...• to use excessive amounts of 8me and effort on any off the above

• to educate my staff with difficult processes

• to invest in new devices

• to bring any more steps into the POS

• to worry about several different services

CharlesTHE CONSUMER

MarkTHE MERCHANT

Needs analysisMapping the needs of different users of service. Especially useful when the soluGon is centered around different users with conflicGng interests.


ScenariosThinking of the context of use. WriGng user stories. IdenGfying goals of users. Translates into prioriGzed feature lists and understanding the users flow.

John is walking across town He gets a targeted adver8sement for a nearby store.

There are other cool products on offer too

He heads to the store

The Purchase

Jane is surfing the web She sees an adver8sement for a product on a website.

She gets coupon offers and saves them to her mobile.

She heads to the store


Analysis of current serviceAnalyzing exisGng usage paRerns of service, and creaGng acGon points based on analyGcal data. Expert evaluaGon and idenGfying “quick wins” is a cheap way to improve.

A Good startThe right star8ng place was quickly found.

Ini.al depositThis should be on its own page. Best prac8ces tell us so.

Where’s logic?What is the concept of “ePossu”, it should be explained on page or with a tool8p.


Product tourUser introduces exisGng or comparable soluGon and demonstrates current usage. BeRer in context.

This method has been u8lized to understand how people interact with different kinds of services and tools: cell phones, desktop computers and professional tools (e.g. mining drills of firewall management so`ware). We are able to pick up current usage paYerns, task flows, contexts of use, user frustra8ons and UX requirements out of these sessions.

“Here I’ve picked up the apps I use most often. But it took me 3 months before I learnt the home screen can be edited.”

Tuuli, 23 years, first smartphone


This method picks up usage paYers, use cases and contexts of use. O`en this method is performed as a diary with addi8onal room to share ideas for new services or features.

Day in the life / DiaryUser introduces a typical day in their life. How is the soluGon involved? What features are used on at what Gmes? For what purposes?


This method helps draw out UX requirements and useful UI elements out of exis8ng services, and helps tune in with the users mindset. This same method can be used with compe8ng concept approaches.

vs.“Oh, neither is good, but I prefer the list of services over the step-by-step wizard. But preferably I’d have the best of both worlds. In the list I see all available options, and in the wizard I get help knowing what is most suitable for me.”

Tarja, 47 years

Match raceUser compares exisGng services or concept drags. Services score for the characterisGcs that users value, and lose scores for annoying features. What is valued? What is disturbing?


Example of a tablet game sketched by a group of 3 users at Idean’s co-‐crea8on session.

Designing together with the users helps designers draw out ideas from the users -‐ they are the best experts of their own needs and contexts. The lowest fidelity prototyping is to debate concept ideas sketching them on paper.

Co-‐creation / Co-‐ideationWith proper facilitaGon users can be equipped to sketch designs for themselves, or debate design opGons with the Designer.


It is cri8cal to involve users in the design phase and iterate designs based on the findings. However, it is also important how the feedback and observa8ons are analyzed, so that the findings are put in context of the fidelity-‐level of the s8mulus materials. For example, image prototype is missing some effects which may have significant role in communica8ng func8onali8es.

User testing / User validationUser tesGng can be organized with sGll images, image prototypes linked together with hot spot areas, or real clickable prototypes with real effects and transiGons.


UX in Product Development

User Needs(par8cipatory design, feedback, contextual interviews, market

analysis, user stories)

Design sketching(low fidelity dra`s,

wireframes)

Valida.on(low fidelity prototyping,

moderated and unmoderated tes8ng, par8cipatory design)

Interface Design(detailed wireframes, interface visuals)

Valida.on(beta tes8ng, high fidelity

prototyping)Implementa.on

Follow up(surveys, analy8cs,

interviews, integrated feedback components)

New Cycle


Cornerstones for visual style


Simple & elegant classicCosy and personal

Colorful without being naive

So` paper feel

StatementContent makes the object valuable, not the object itself

Design inspiration…


Leather texturePres8gious, comfortable material

IconographySimple no-‐nonsense pictograms

PalleMeWarm and ac8ve colors palleYe

HeaderMagazine-‐like element calms the screens

Simplified expressionSubtle use of effectsNo unnecessary boxes, borders and lines or other messy elements

Efficient, professional look & feel

…into design principles…


…into design


Finding a unique visual gimmick

Icons play important role throughout the service. Unique icon style or shape help you stand out.

Unique illustra.on styles can be used to differen8ate otherwise simple interface graphics.

PaMerns, repe..ve backgrounds and color schemes also help establish a par8cular style


Functional vs. Self-‐expression value

vs.

Any digital service has either funcGonal value (a car navigator) or self-‐expression/social value (Instagram). It is either a tool, or thing to be used for leisure. This also affects how the thing is expected to look and feel -‐ clarity vs. playfulness.


Application or website?

vs.

Why applica.on?Looking like an applica8on makes the service feel more reliable, and the product feels more valuable: it is a tool that is worth paying for.

Juxtaposing the service, and the context of it’s use helps idenGfy what it’s supposed to look like. What are users expectaGons, where do you need to posiGon the service?


Workshop


• Typical workshop agenda for working with startups

• Goes from defining the users and their problems into offering solu8ons through the service features

• Helps in crea8ng a unified vision that all can agree on

• Helps in priori8zing features and flows

• Gain basic understanding of target audience

• Typically takes about 3h to run through

Workshop agenda


4 Exercises individually and in pairs

Who? How? What?

...is the user of my service?

...will he achieve his goals through

my service?

...is the solu8on I provide him with?

When?

... and under what circumstances,would he

use my service?


Results of exercises

Persona Scenario Flow Features

Descrip8on of the users

Story that tells the use contexts

and needs

Analysis of scenario, lis8ng of

features

Drawing of the service and it’s

features


Who are the users of your service?Name them, and describe who they are. 1 per post it.

5minIndividual work


Jim is a salesman for a large corporation. He travels a lot, often to places he hasn’t been and meets new people constantly. He is very people-oriented, competitive and outward. He is used to managing everything on the go.

Who are the users of your service?Name them, and describe who they are. 1 per post it.

Imaginary user of “Hotel Tonight”


Group up with your startupShare your personas

You need to pick one together

5minWork together


Pick a user

Evaluating personas

Low value user

High value user

Small marketsize High marketsize


10min

When and why would this person need your solu8on? What are the contexts?

Write scenarios, 1 per post it.

Individual work


Jim is on a business trip that got extended suddenly. He needs to find a hotel for next night. It needs to be within walking distance of tomorrows client meeting, needs to have breakfast, needs wi-fi.

When would this person use your solu.on? What are the contexts?Write scenarios, 1 per post it.


Group up with your startupShare your scenarios

You need to pick one together

5minGroup work


Identifying scenarios

Frequency vs. Urgency

Not urgent

Urgent

Not frequent Frequent


10min

Think of all the individual steps for the user to fulfill his goal through your

service. Draw a mindmap.

Group work


How do I check in?

Is it in walking distance of client?

Does it have breakfast?

Find a placeto crash tonight

Browse places

Does it have wi-‐fi?

What does it look like?

Navigate to place

How do I get there?

How much .me from there to my morning mee.ng?

How much doesit cost?

Purchase service

How to expense it?

How to reserve it?

How do I pay?

Arrive in place


5min

Now sketch the UI that allows the user to fulfill his goal through your service.

Individual work


1 week later…


Q&A


Thank you Contact [email protected] for more information.


