OneClick responsive skin
JHA iPay Solutions
My Role:
- Primary Designer
- Research
- Wireframes
- High Fidelity Design
- Prototyping
- User Testing
Tools:
- Balsamiq
- PhotoShop
- Visual Studio
Team:
- Designer
- Product Manager
- Scrum Master
- 3 Back-end Devs
- 1 QA person
Challenge:
Convert the current consumer product from a fixed size framework to a responsive framework, as to fit within the client iframes and work better when used as a stand alone tab.
- Convert 1500+ client websites to new framework
- Shorten time to onboard new sites, current time 35-45 min.
Solution:
Replace the current HTML framework with BootStrap 3x
Additional considerations:
- Phase 1 of the OneClick project consisted on reskinning 300+ pages with a new responsive skin.
- Created a HTML component library for development to use when rebuilding pages.
- Created app to automatically create new header file with logo, new stylesheets, and place into new institution directory.
- Using same app on new sites shortened time from 35-45 min to 10-15 min.
Process Summary:
-
Discovery
- Discuss vision and direction with product manager
- Stakeholder interviews
- Evaluation of existing product
- planning
-
Ideation
- High fidelity mockups using HTML prototype
- Internal Reviews, design iterations
- External reviews with select CAB (client advisory board) members
- Internal user stories, Size project
-
Validation
- User testing with internal teams
- Pilot testing with select CAB members
- Post launch interviews with CAB members
Prototype: HTML / Javascript
Below: main dashboard / payments tab.
Below: Payees tab.
Below: P2P payments tab.
Below: Transfers tab.
Below: Giftpay tab.
Below: Calendar tab.
