1. RESPONSIVE DESIGN FOR SAVVYMONEY CREDIT SCOREWendy Fischer
UX Lead June 27, 2014
2. ABOUT SAVVYMONEY CREDIT SCORE SavvyMoney Credit Score is a a
product that is a result of a pivot in SavvyMoneys 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. CONSTRAINTS Initial release was coded in HTML4 and CSS2 Lets
code for the credit unions - credit unions arent the customer SM is
a small team. No mobile first strategy. Desktop comes first.
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. 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 dont do.
6. PROCESS & ACTIVITIES
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. 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 its an optimal time
to recode in HTML5, CSS3 & use the Bootstrap framework to
support responsive design.
9. CONS Its the Frankensite, The user experience is not optimal
since some features will be responsive design enabled and others
wont. Whats the story anyway?
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. THE UX DESIGNER Responsive design was my idea. Im 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 dont code very fast in HTML and CSS. I dont speak
Ukraininan.
12. PROCESS FOR OFFERS
13. OMNIGRAFFLE WIREFRAMES
14. VISUAL DESIGN
15. DEVELOPMENT , .
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. TEST
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. 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. RESPONSIVE DESIGN TOOLS Axure Price point/learning curve
Bohemian Coding Sketch 3 Great tool, Fireworks replacement, allows
for breakpoints, generates CSS Mac only, developers cant use, no
responsive design prototyping
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 Theres 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 dont
have internet? How do you get a history of the prototype other than
a PDF? What if I dont like their format and dont think it looks
good in my portfolio?
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 isnt going under anytime soon.
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
dont have to do views Conveys fluidity and scaling of breakpoints;
You can recycle html and css code generated.
24. DOWNSIDES TO PHOTOSHOP & REFLOW Doesnt 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. 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. SHOW
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.
