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

  • 421 views
Uploaded on

This theme was presented in Recife (Brazil) 11/14/2013 during ISA-IXDA'13. …

This theme was presented in Recife (Brazil) 11/14/2013 during ISA-IXDA'13.
More info: http://locaweb.github.io/locawebstyle

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
421
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
1
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Italo Oliveira • Digital Designer • 12-year-experience on interactive projects, websites, apps, ecommerce, and more… • 2 years of Locaweb, as Visual Design Coordinator Cargocollective.com.br/italoliveira
  • 2. 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
  • 3. About Locaweb • 15 years • +1000 employees • Hosting & Infrastructure Services leader in Brazil and Latin America • +260 K customers • 25 products (SaaS, PaaS and IaaS)
  • 4. + 2 Million About Locaweb E-mail accounts • 15 years • +1000 employees • Hosting & Infrastructure Services leader in Brazil and Latin America • +260 K customers • 25 products (SaaS, PaaS and IaaS) + 450 K Active Websites + 800 K Domains + 7,5 K Cloud Servers
  • 5. Locaweb UX Team • 10 members • Works directly with Locweb Product Teams • Recently started working with Website and Customer Support Teams
  • 6. WE BELIEVE IN LEAN UX Think • Create the main personas • Identify goals and problems • Formulate hypotheses about interactions Do • Draw, draw, draw • Invite members of the Team to draw • Design wireframes and/or prototypes from the best ideas Test • Show them to the Team and ask feedback • Invite real users and who is near you to test • Adjust the prototype and keep iterating
  • 7. = DEVELOPING STANDARDS
  • 8. WHAT IS OUR PROBLEM? There is no pattern to our product interactions • • • • 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
  • 9. LOCASTYLE BOTTOM LINE Customer Workbench  Recently updated Panel  Research and Interview with customers  Personas created  Tests performed with real customers  Easy customization  Easy maintenance  Large number of elements  Scalable
  • 10. BETA PROJECT • 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
  • 11. THE EVOLUTION • 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
  • 12. THE EVOLUTION • 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 AND FINALLY… • We released our Library to the GitHub developers community
  • 13. …UP TO NOW: 10 40 +1500 Panels GitHub Projects
  • 14. 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
  • 15. 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
  • 16. 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