Orion’s Fintechgrate
Orion was already using financial technology to help their clients save money. They saw a need for this in the FinTech industry and needed help bringing it to life.
Business goal: Design a sleek, easy to use product that could be demoed at Finnovate 2018 to attract potential clients and sales.
Responsibilities: Involved from start to finish and included UX • Research • Visual Design • Branding • Illustrations • Iconography • Copywriting • Prototyping • QAing
Animation: Tianying Lyu
Dev Team: Prabhath Kovuri and Renjith Surendran.
Framework: Bootstrap.
Asking the right questions
Q: Were there other companies already doing this sort of stuff? A: Yes.
Q: Was this some kind of new technology only Orion had developed? A: No.
Q: So why would someone use ours vs others? A: Not sure.
Switching hats
This is where I had to turn the UX switch “off” for a sec. My branding and marketing background kicked in and I started asking how we could position ourselves to be that go to preferred choice.
Research
We viewed the competition. Most of the existing products looked intimidating, possibly designed by engineers and focused on power users, not novice ones. Good design would be how we would stand out.
Learning Curve
This was definitely out of my comfort zone. I did not understand how this technology worked (I still kinda don’t!). I knew nothing about data integrations, file validations, data requirements etc. What I did know was Orion felt confident this would make a splash at the conference and they knew their audience best.
Solution
Learning in digestible steps became the inspiration to the design. I focused on the flow and organized it into digestible steps.
The flow was designed with the presenters and audience at the conference in mind. I knew the presenters had about 3min to demo the product and the audience needed to understand the story, value, plus feel it looked simple enough to use. Friendly custom icons were designed to enhance the tone of the product.
Data Visualization
With an aggressive 2 week deadline, I quickly turned to the web for inspiration. While there were many great looking dashboards with fancy animations, we needed something that developers could actually build. We suggested a JavaScript library for manipulating documents based on data and provided the CSS to match our design.
Homepage
The landing page was designed to briefly explain the product. I worked with the developers and stakeholders to understand the value of the product and translate it into copy that could be used for marketing.
A minimal illustration of the product was designed to keep users focused on the copy and not the content on the dashboard.
Prototyping
Putting the UX hat back on, I produced a prototype to communicate the different flows between existing customers, new customers, and for those just looking to demo a sample file.
Shortcodes: I aligned this next to the Test Case field for quick assisted access and stylized it to contrast against regular text fields.
Results
Stakeholders were happy. Sales guys were happy. Orion now had a nice shiny project to add to their case studies (So did I).
Communication with dev was key in making this a successful project. Having knowledge of constraints and flexibilities helped in compromising on both ends.
Staying available and not walking away after handoff was also key to bringing this home. QAing, making recommendations and assisting on any additional assets needed, helped to reinforce that this was a team effort.
