SilverStripe 3.0 UI designs


Published on

Our creative director, Felipe Skroski, presents work in progress on the interface for SilverStripe CMS 3.0, and the process SilverStripe is following for its development.

The latest user interface design work for SilverStripe CMS 3 can be always found at:​silverstripe/​silverstripe-design/​blob/​master/​Design/​, and we welcome feedback at​group/​silverstripe-dev/​

Published in: Technology
  • Be the first to comment

SilverStripe 3.0 UI designs

  1. 1. SS3 UI Redesign Vision, process and outcomes
  2. 2. The vision
  3. 3. Keep it modular, flexible and scalable
  4. 4. Good defaults and robust design framework to help developers build UIs
  5. 5. User centered design
  6. 6. Reduce, reuse, recycle (when possible)
  7. 7. Context over consistency (one size doesn’t fits all)
  8. 8. Improve marketing capabilities (analytics, reports, ads)
  9. 9. Web presence manager(website, SEO, social networks, cloud, APIS)
  10. 10. Prepared for mobile and touch devices
  11. 11. The process
  12. 12. HCDHuman Centered Design
  13. 13. Why?
  14. 14. “Because it can help us connect better with people we serve”
  15. 15. “It can transform data into actionable ideas”
  16. 16. “It can help us see new opportunities”
  17. 17. “It can help us increase the speed andeffectiveness of creating new solutions”
  18. 18. How does it work?
  19. 19. HCD’s 3 lenses:desirability feasibility viability What do What is What can be people technically financially desire? feasible? viable?
  20. 20. viabilitystart here desirability solutions feasibility
  21. 21. H C D hear create deliver themes opportunitiesabstractconcrete stories solutions prototypesobservations implementation
  22. 22. Hhear
  23. 23. 1 Existing knowledge: •10 years of experience •Developers •Designers •PMs •Community
  24. 24. 2 Interviews: •6 users - newbies to experts •Interview & observation •In-context immersion
  25. 25. 3 Outcomes: •User stories and scenarios •Personas •Deep understanding of desires, barriers and constraints
  26. 26. Personas
  27. 27. Che: Casual editor / author
  28. 28. Why can’t I just edit content on mywebsite?I’m not tech savvyI don’t have time to learn using itI don’t know about html, css, or codeI’m too busy with other stuffI use word and excel, can I copy andpaste?
  29. 29. Yummy: Web admin
  30. 30. I need to manage site structure easilyI want to extend functionality withoutcodeHas to be easy to learn, do you havetutorials?I love stats this tells me what I need tochangeI need clever tools to promote my websiteexternally and connect with my webpresenceI want many modules and themesavailableI manage who can do what on the site
  31. 31. Mr Chang: Web designer
  32. 32. I want total control of design, markupand jsThe templates should be easy to learnI need good tutorials and documentationI want to say how much freedomusers have to change my designI can do some hacks in PHPbut I’m not a coderI want to change my themes easilyI want easy to install modules
  33. 33. Ali: Php guru
  34. 34. I want light and powerful framework.Easy to change and extendGood tutorials, documentation, andactive communityI want to make the mostof my code skillsIt should be easy to install on myconfigurationI need an easy way to createthe UI for usersReal men use the terminalCode is poetry
  35. 35. Ccreate
  36. 36. Create activities:•Identify patterns and themes•Prototypes (sketch /wireframe / mockup)•Test & feedback
  37. 37. 1 Patterns & themes •Less abstraction (website x admin) •Task oriented flow (less info = more attention) •Web presence manager •Mobile & touch devices •Social Networks •Web Apps builder
  38. 38. 2 Prototypes
  39. 39. #fail
  40. 40. 3 Test & feedback •SS3 dev-group (google groups) •Github (silverstripe-design) •User test (future) •A/B testing (future)
  41. 41. Ddeliver
  42. 42. Deliver activities1. Evaluate feasibility and viability2. Identify capabilities and resources3. Create an implementation timeline4. Execute (design / code)5. Iterate6. Evaluate
  43. 43. Latest designs
  44. 44. Know more & help• human centered design• silverstripe design github• silverstripe dev list• sapphire framework
  45. 45. Questions?
  46. 46. Thank you