18

Locastyle standards: creating interfaces in an agile, scalable and responsive way

Embed Size (px)

Citation preview

Italo Oliveira

• Digital Designer

• 12-year-experience on interactive

projects, websites, apps, e-

commerce, and more…

• 2 years of Locaweb, as Visual

Design Coordinator

Cargocollective.com.br/italoliveira

José Cipriano

• Musician and marathoner in his free time

• Major in International Relations and Marketing

• 12 years trying to find out solutions to problems of users

• 1 year and a half handling products interfaces of Locaweb

zecipriano7 jccipriano jccipriano jccipriano

About Locaweb

• 15 years

• +1000 employees

• Hosting & Infrastructure

Services leader in Brazil

and Latin America

• +260 K customers

• 25 products (SaaS, PaaS

and IaaS)

+

450 KActive

Websites

+

2

MillionE-mail

accounts

+

7,5 KCloud

Servers

+

800 KDomains

About Locaweb

• 15 years

• +1000 employees

• Hosting & Infrastructure

Services leader in Brazil

and Latin America

• +260 K customers

• 25 products (SaaS, PaaS

and IaaS)

Locaweb UX Team

• 10 members

• Works directly with Locweb

Product Teams

• Recently started working

with Website and

Customer Support Teams

WE BELIEVE IN LEAN UX

• Create the main

personas

• Identify goals and

problems

• Formulate

hypotheses about

interactions

• Draw, draw, draw

• Invite members of

the Team to draw

• Design

wireframes and/or

prototypes from

the best ideas

• Show them to the

Team and ask

feedback

• Invite real users and

who is near you to test

• Adjust the prototype

and keep iterating

Think Do Test

=

DEVELOPING STANDARDS

WHAT IS OUR PROBLEM?

• Difficulty to conduct processes concerning panels implementation

• UX Team is not close to Front-end Team

• User Tests? NO WAY!

• Lack of time to draw and code Panels interfaces

There is no pattern to our product interactions

Recently updated Panel

Research and Interview

with customers

Personas created

Tests performed with

real customers

LOCASTYLE BOTTOM LINE

Easy customization

Easy maintenance

Large number of

elements

Scalable

Customer Workbench

• Simple and low impact panel

• Elements created on demand

• Work of co-creation between

some members of the UX

teams and front-end

• Prototyping and test

application with users

• Ready in 2 months

BETA PROJECT

• Remodeling of Email Marketing

panel (a “core business”

product of the company)

• Crucial for creating standards

to the next panels

• +80% of Locastyle elements

were created during this project

THE EVOLUTION

THE EVOLUTION

AND FINALLY…

• We released our Library to the

GitHub developers community

• Remodeling of Email Marketing

panel (a “core business”

product of the company)

• Crucial for creating standards

to the next panels

• +80% of Locastyle elements

were created during this project

…UP TO NOW:

10Panels

40GitHub

+1500Projects

OUR BENEFITS

• Nimble creating of high fidelity

prototypes

• Helped in the design of new

products and the remodeling and

improvement of existing ones

• Today the user test is included on

a daily basis

NOT ALWAYS A BED OF ROSES

• Responsiveness and Library documentation process

were postponed

• Some elements did not fit all cases

• Not all members of the Team were involved

Next steps• Mobile First

• UX Library documentation

• Validating individual and

combined elements (mobile

first requirement)

• All members of the Team

joined activities of creating

elements

• Co-creation workshops with

UX and Front-end Teams