fiserv.

Fiserv Architect is a touch-enabled, handheld prototype that illustrates 13 different customer journeys. Framer was used for this coding prototype.

Timeline
2016

Role
Experience Designer

Tools Used
Sketch, Framer

Research Methods

User Journeys

Design Methods

Agile
Consulting
Wire-framing
Prototyping
Visual Designs
Interactive Design

develop methods

Development
Coffeescript

how might we questions

Create a prototype that is easy-to-use and feels like the real deal?
Provide intuitive steps on how to demo specific flows within the prototype?
Increase customer influence on wanting to use the new software?

challenges

Learn how to use Framer while developing the prototype simultaneously in a matter of 2 months.
Refresh my memory on Javascript and learn a new code language of CoffeeScript.
Was the only active designer on the project that sought out for assistance from 2 other UX designers that had more Framer knowledge than I did (both were part-time on the project).

prototype development process

After receiving the criteria of what type of user journeys needed to be added into the prototype, we (myself and one of the designers that helped me with Framer) started diving into our Sketch files that had the newest designs to each specific user journey. Since the prototype had to be responsive on all device types from iPhone 6 to iPhone 8 Plus and iPhone X, the designs from Sketch had to be transferred over to Framer. There are two toggles in Framer, design, and code. I had to utilize both areas of the software in order to create the prototype.

The biggest obstacle of the project was pinning each layer of design, framing each layer, and then creating targets that would help maneuver the prototype with code. Instead of transferring all designs of the user journeys into the Framer file, we took one user journey at a time. We would set up the artboard and then start coding the flow. We did this for all 13 user journeys before conjoining all coded Framer prototypes to 1 ultimate Framer prototype that the sales team would demo for their customers.

Out of the whole two months of learning how to use Framer with limited guidance and two tutorials on how to use the software, I took reigns of the project after getting the assistance of consolidating all 13 prototypes into 1 ultimate prototype by having one of my designer teammates create the foundation of the ultimate prototype.

Overall 2 prototypes were created:

Responsive prototype to be used on all device types.
iPhone X only prototype since there isn’t any known support on X, Xr, and Xs yet.