ux for startups - designing for complexity

74

Upload: parasuet

Post on 06-Jul-2015

516 views

Category:

Design


1 download

DESCRIPTION

This presentation is in Turkish. Parasut.com is a financial management SaaS for small businesses in Turkey. A central challenge we wrestle with during our design process is designing for complexity. Complexity arises with more added features, but it is critical to maintain consistency so the user can always know what to expect. Managing this complexity effectively can make even the most sophisticated applications feel intuitive.

TRANSCRIPT

Page 1: UX For Startups - Designing for Complexity
Page 2: UX For Startups - Designing for Complexity

Fahri ÖzkaramanlıKURUCU ORTAK

TASARIMCI

Page 3: UX For Startups - Designing for Complexity

Sean X YuKURUCU ORTAKİŞ GELİŞTİRME

Andaç TürkmenKURUCU ORTAK

YAZILIM

Fahri ÖzkaramanlıKURUCU ORTAK

TASARIMCI

Page 4: UX For Startups - Designing for Complexity

Use a team of three for version 1.0

For the first version of your app, start with only three people. Start with a developer, a designer, and a sweeper (someone who can roam between both worlds).

Page 5: UX For Startups - Designing for Complexity
Page 6: UX For Startups - Designing for Complexity
Page 7: UX For Startups - Designing for Complexity
Page 8: UX For Startups - Designing for Complexity
Page 9: UX For Startups - Designing for Complexity
Page 10: UX For Startups - Designing for Complexity
Page 11: UX For Startups - Designing for Complexity
Page 12: UX For Startups - Designing for Complexity
Page 13: UX For Startups - Designing for Complexity

Alfa 3AY Kapalı Beta 11AY Açık Beta 4AY 1. Versiyon 6AY

Toplam 24AY

Page 14: UX For Startups - Designing for Complexity

Andaç TürkmenCTO

Barış GümüştaşYAZILIMCI

Oytun E. YücelYAZILIMCI

Tuğçem YalçınYAZILIMCI

Emre KutluYAZILIMCI

Nergis SungurPAZARLAMA DİREKTÖRÜ

Sena YallagözPAZARLAMA UZMANI

Fahri ÖzkaramanlıTASARIMCI

L. Daniel SwakmanTASARIMCI

Yazılım Tasarım Pazarlama

Sean X YuCEO

İş Geliştirme

Page 15: UX For Startups - Designing for Complexity

instagram.com/barisgumustas

Page 16: UX For Startups - Designing for Complexity

PARAŞÜTKULLANAN

FİRMA

ƣ

SATIŞ FATURALARI

÷

ALIŞ FATURALARI

÷

HARCAMALAR

1

MAAŞLAR

Ù

÷

÷1

Ù

TEDARİKÇİLERİ

ø

MÜŞTERİLERİ

ø UYARILAR

ô

OTOMASYON

EPOSTAILE PAYLAŞIM

â

RAPORLAR

İÇE / DIŞAVERİ AKTARIMI

Ʒ

MOBİL

ċ

ONLİNETAHSİLAT

°

EFATURAENTEGRASYONU

ê

BANKAENTEGRASYONU

Ɠ

API İLE 3.ŞAHISENTEGRASYONU

ğ

MUHASEBEENTEGRASYONU

F

ÇALIŞANLARI

Ä

DEVLET

å

BANKALAR

Ɠ÷

÷1

Page 17: UX For Startups - Designing for Complexity
Page 18: UX For Startups - Designing for Complexity
Page 19: UX For Startups - Designing for Complexity
Page 20: UX For Startups - Designing for Complexity

PARAŞÜT Android App Screens and Guidelines

Home Screens

Today, Past & Future Items Measurements1.

Login,Navigation &Add New Menu

App NavigationLogin Form Add New Menu2.

Fonts & Sizes Colors Today & Overdue Empty Past Empty Future

Measurements Fonts & Colors

90x90px 90x90px Roboto Condensed Bold 36px

Roboto C. B. 24px

Roboto 24px

Rob B 32px

Ubu B 37px

FAw 29px

20x20px20x20px

40 80

12012px radius

140px

40 90 130 150

Ubu B 46px

FAw 28px

FAw 37px

4px border outside

#E5DADA #373636

#999593

#403637

#FFFFFF

#999593

#BDBBBA

#ACA9A7

#EDEDED

App Background-#DEDDDC

border outside #DBDAD9

border outside #D6D5D4

App Background-#DEDDDC

#22C39E

#FFFFFF

#188f73

#bd4639

#FD5C4B

FAw 140px

Roboto C. B. 24px

4030

9090

100

30 20

10

10

2px border

40 70

60

70x70 Rob.B.24Rob.24

Rob.C.B.32

#999191

#E5DADA

#E5DADA

Background #373636

Border #292828

Measurements, Fonts & Colors

Rob.C.B.32

90x98

FAw.42#999191

2px Border #292828

border outside #D4D3D2

Expenses

Expense Show - Without Photo Expense Show - With Photo Expense Edit - Without Photo Expense Edit - SpinnerExpense Photo - ShowExpense List4.

Faw 56px

Faw 28calendar

Faw 42caret

Faw 28try

Rob 24

UBU B.28Rob B.C.24fa-camera 42px#999191

background:#f2f1f0

Specs. same as inv. show

fa-caret-left

#999593 20px

80px

80px fa-trash 42px

80px

Expense Photo - Take Expense Photo - Confirm

fa-camera 70pxfa-undo 42px

fa-camera 70pxfa-arrow-left 42px

110px

fa-trash 70px fa-th 56px#999191

fa-times 56px#999191

fa-check 70px#E5DADA20px

150px#373636 opacity.75

#000000

#E5DADA

#bcbab8 Start

#e9e8e7

Border#c5c4c2

Shadow #000000Opacity 0.25

Distance (x,y) 0Size 10px

#b0aeab End

Login Form Measurements

50x50

50

50

50

50

40

30

40

30

50

50

40

50

30

2010

10

Rob.24#6e5f5f

#685f5d

#5b5251

60px

60px

10px

10px

60px

Page 21: UX For Startups - Designing for Complexity
Page 22: UX For Startups - Designing for Complexity
Page 23: UX For Startups - Designing for Complexity
Page 24: UX For Startups - Designing for Complexity
Page 25: UX For Startups - Designing for Complexity
Page 26: UX For Startups - Designing for Complexity

!

Page 27: UX For Startups - Designing for Complexity

Mr Hitchcock,

What is your deffinition of happiness?

A clear horizon — nothing to worry about on your plate, only things that are creative and not destructive…

Page 28: UX For Startups - Designing for Complexity

"! #

Page 29: UX For Startups - Designing for Complexity

"! # " !

Page 30: UX For Startups - Designing for Complexity

" ! "

"

"

"

""

"

Page 31: UX For Startups - Designing for Complexity

Elements of User Experience

The aim here, at the user experience development process is to have total control over every aspect of your site, meaning that you need to consider every action the user is likely to take and understand your user’s expectations throughout the entire process.

Jesse James Garrett

Page 32: UX For Startups - Designing for Complexity

!Selen Selviler

Karbon Ltd.

!Gökçen Öğütçü

Brew Interactive

!Cenk KıranGeneration M.

Page 33: UX For Startups - Designing for Complexity

!$

Page 34: UX For Startups - Designing for Complexity

Pazartesi Salı Çarşamba Perşembe Cuma Cumartesi Pazar

! ! ! ! ! ! !

Page 35: UX For Startups - Designing for Complexity

T U T A R L I L I K

Page 36: UX For Startups - Designing for Complexity

"!$%

Page 37: UX For Startups - Designing for Complexity
Page 38: UX For Startups - Designing for Complexity

Designing Interactions

To Bill Atkinson — Why don’t we try something new, why dont we put the menu on top of the screen.

Larry Tessler

Page 39: UX For Startups - Designing for Complexity
Page 40: UX For Startups - Designing for Complexity
Page 41: UX For Startups - Designing for Complexity
Page 42: UX For Startups - Designing for Complexity
Page 43: UX For Startups - Designing for Complexity
Page 44: UX For Startups - Designing for Complexity
Page 45: UX For Startups - Designing for Complexity
Page 46: UX For Startups - Designing for Complexity
Page 47: UX For Startups - Designing for Complexity
Page 48: UX For Startups - Designing for Complexity

20px

Page 49: UX For Startups - Designing for Complexity

1.5x

1.5x

2x

2.5x

Page 50: UX For Startups - Designing for Complexity

1.5x

1.5x

2x

2.5x

Page 51: UX For Startups - Designing for Complexity
Page 52: UX For Startups - Designing for Complexity

Satış

lar

Gid

erle

r

Müş

teri

ve T

edar

ikçi

ler

Hiz

met

ve

Ürü

nler

Kas

a ve

Ban

kala

r

Satış

Fat

uras

ı

Alış

Fat

uras

ı

Har

cam

a

Tahs

ilat

Öde

me

Müş

teri

Page 53: UX For Startups - Designing for Complexity

Roboto Ubuntu Mono Fontawesome

Page 54: UX For Startups - Designing for Complexity
Page 55: UX For Startups - Designing for Complexity
Page 56: UX For Startups - Designing for Complexity
Page 57: UX For Startups - Designing for Complexity
Page 58: UX For Startups - Designing for Complexity
Page 59: UX For Startups - Designing for Complexity
Page 60: UX For Startups - Designing for Complexity
Page 61: UX For Startups - Designing for Complexity
Page 62: UX For Startups - Designing for Complexity
Page 63: UX For Startups - Designing for Complexity
Page 64: UX For Startups - Designing for Complexity

Elements of User Experience

The aim here, at the user experience development process is to have total control over every aspect of your site, meaning that you need to consider every action the user is likely to take and understand your user’s expectations throughout the entire process.

Jesse James Garrett

Page 65: UX For Startups - Designing for Complexity

Elements of User Experience

The aim here, at the user experience development process is to have total control over every aspect of your site, meaning that you need to consider every action the user is likely to take and understand your user’s expectations throughout the entire process.

Jesse James Garrett

Page 66: UX For Startups - Designing for Complexity

Kullanıcı İhtiyacı

Paraşüt’ün iş fikri Paraşüt kullanıcılarının gelir ve giderlerini takip edebilmeleri

Çalışanlarının maaşlarını takip edebilmek

Page 67: UX For Startups - Designing for Complexity

Spesifikasyonlar

Page 68: UX For Startups - Designing for Complexity

Akış Diagramı

Page 69: UX For Startups - Designing for Complexity
Page 70: UX For Startups - Designing for Complexity
Page 71: UX For Startups - Designing for Complexity
Page 72: UX For Startups - Designing for Complexity

www.parasut.comtwitter.com/parasutcom

facebook.com/parasutcom

Page 73: UX For Startups - Designing for Complexity

T E Ş E K K Ü R L E R

Page 74: UX For Startups - Designing for Complexity

www.parasut.comtwitter.com/parasutcom

facebook.com/parasutcom