Responsive Design Workflow

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 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. 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. 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 don’t 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 it’s an optimal time to recode in
HTML5, CSS3 & use the Bootstrap framework to support
responsive design.

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. 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.
• 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. 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 can’t 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
• 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. 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. 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. 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. 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.

28. QUESTIONS?