Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Responsive Design for SavvyMoney Credit Score

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige

Hier ansehen

1 von 28 Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Anzeige

Ähnlich wie Responsive Design for SavvyMoney Credit Score (20)

Anzeige

Responsive Design for SavvyMoney Credit Score

  1. 1. RESPONSIVE DESIGN FOR SAVVYMONEY CREDIT SCOREWendy Fischer UX Lead June 27, 2014
  2. 2. ABOUT SAVVYMONEY CREDIT SCORE• SavvyMoney Credit Score is a a product that is a result of a pivot in SavvyMoney’s business strategy. • The goal is to have a consumer finance product that can be marketed and sold to credit unions and community banks to generate revenue, and then market to consumers to build traffic once there is revenue for marketing. • There of plenty of pfm solutions, no credit score for CU market.
  3. 3. CONSTRAINTS • Initial release was coded in HTML4 and CSS2 • Let’s code for the credit unions - credit unions aren’t the customer • SM is a small team. • No mobile first strategy. Desktop comes first.
  4. 4. CONSTRAINTS • All development, including front-end development is outsourced to the Ukraine. • No money for outside developers/designers • CEO prefers we execute rather than do a plan and strategy first. It gets messy often. • Design & development are done very rapidly. We use Confluence and Jira to track and document product and UX requirements. • We use rapid prototyping in Invision to convey specifics about the interaction design, navigation, use cases and visual design.
  5. 5. CONSTRAINTS • Time to market and execution are most important. • We do usability testing through usertesting.com. • We ‘know’ whom the user is. Time to execute is most important and resources are scarce, so personas, user journeys, user/task analysis is considered a luxury we don’t do.
  6. 6. PROCESS & ACTIVITIES
  7. 7. WHY RESPONSIVE? • Lowest cost way to get SavvyMoney Credit Score to mobile and tablet channels without developing expensive native apps • Credit Unions are increasingly asking for mobile and tablet solutions from white-label vendors.The trend in the credit union industry is towards responsive design. • Consumers want to be able to access their Credit Score and associated information from any device. • Having a separate mobile web platform is cost prohibitive and requires more resources whereas a responsive design increases the cost of design and production by about 25 over a traditional desktop web page.
  8. 8. UX STRATEGY • Educate team on responsive design strategy & workflow • SavvyMoney has 2 week Agile sprints. Roll out the responsive design feature by feature, sprint by sprint. • Roll out a responsive design with 960 px/768 px/480px breakpoints for each new feature and/or redesigned feature. • We have to recode the whole UI anyway and port it the Laravel PHP framework so it’s an optimal time to recode in HTML5, CSS3 & use the Bootstrap framework to support responsive design.
  9. 9. CONS • It’s the Frankensite, • The user experience is not optimal since some features will be responsive design enabled and others won’t. • What’s the story anyway?
  10. 10. PROS • We will get a responsive design faster across the website by rolling out an responsive design feature by feature. • We are adding new features to the credit score product and optimizing the user experience for existing features.
  11. 11. THE UX DESIGNER • Responsive design was my idea. • I’m the only one who has any experience with it in the company. • Last time I designed for responsive design, I was part of a team of contract designers and experienced developers working on a responsive design product. I was responsive for the Android client and mobile breakpoint. • I don’t code very fast in HTML and CSS. • I don’t speak Ukraininan.
  12. 12. PROCESS FOR OFFERS
  13. 13. OMNIGRAFFLE WIREFRAMES
  14. 14. VISUAL DESIGN
  15. 15. DEVELOPMENT • Ні, ми ніколи не робили чуйний дизайн раніше.
  16. 16. PROTOTYPE • Invision walkthrough prototype for 960 breakpoint • 768 and 480 screens were put on invision, no prototype created, but specific comments about any changes were put on invision through the conversation mechanism.
  17. 17. TEST
  18. 18. LESSONS LEARNED • If the Ukrainian UI developer says he codes for responsive design, make sure he has actually done it before. • If outsourcing UI development, you have to have a prototype to convey fluidity and scaling to the developer. Static breakpoints do not work by themselves to convey fluidity and scaling.
  19. 19. LOOK AT RESPONSIVE DESIGN WORKFLOW Look at responsive design workflow in depth. Try to answer the question “How can one person design a responsive UX/UI as quickly as possible?” 1. Need to convey breakpoints 2. Need to convey fluidity and scaling 3. Need to convey flow and specification
  20. 20. RESPONSIVE DESIGN TOOLS• Axure • Price point/learning curve • Bohemian Coding Sketch 3 • Great tool, Fireworks replacement, allows for breakpoints, generates CSS • Mac only, developers can’t use, no responsive design prototyping
  21. 21. RESPONSIVE DESIGN TOOLS • Macaw, Antetype • Too new & beta, only pastes images from other programs like Omnigraffle or Illustrator, you end up recreating everything in the design, Mac only, extremely buggy; • Creates html prototypes • Antetype meets Sketch 3 would be my ideal tool. • Online tools like HotGloo, Easel.io, • Low learning curve • There’s not one tool that does everything perfectly so you end up with multiple tools (Invision, HotGloo and Proto.io) • Slow latency with online tools versus desktop tools • What happens if they go under? How do you work if you don’t have internet? How do you get a history of the prototype other than a PDF? What if I don’t like their format and don’t think it looks good in my portfolio?
  22. 22. ADOBE PHOTOSHOP AND REFLOW • All SM files are already in PSD • Photoshop is powerful, and even more powerful with plugins like Adobe Generator, Specctr Pro, CSS3Hat, Ink, etc. • Cross-Platform • Adobe isn’t going under anytime soon.
  23. 23. ADOBE REFLOW WORKFLOW• Integrated with Adobe products & workflow • Responsive Grid • You prepare the Photoshop file by using Adobe Generator and export as Reflow Project • All the assets are already generated • Text, styles and graphics are imported in prepared layout; you can refresh assets • Easy to do breakpoints; you don’t have to do ‘views’ • Conveys fluidity and scaling of breakpoints; • You can recycle html and css code generated.
  24. 24. DOWNSIDES TO PHOTOSHOP & REFLOW• Doesn’t support Bootstrap framework or other frameworks out of the box • Throw away prototype • You can reuse the code, but the code is not great; there are ways to massage it. • Learning curve • Beta Preview • No symbols • No styles palette
  25. 25. REGISTRATION • Continuous improvement in the process • Registration needed a redesign due to usability improvements from testing and a refined visual design to improve the aesthetics and information design of the registration process to increase trust about security 1. Sketch designs for breakpoints out 2. Jump straight into visual design using photoshop since we already have a style guide based on Bootstap 3. There are no wireframes, but you end up doing an invision prototype to show flow and capture specification. 4. Use Adobe Generator and Edge Reflow to build HTML prototype demonstrating breakpoints, scaling and fluidity to developer.
  26. 26. SHOW
  27. 27. DEVELOPMENT • Easy to test in devices using html prototype • Clear to developer what scaling/fluidity are • Can create walkthrough prototype with some state changes • Can demonstrate to customers new features and responsive design.
  28. 28. QUESTIONS?

×