Q4 Touch: Investment on the go


OVERVIEW

Our team of two designers and fifteen developers that created Q4 Desktop was also creating a mobile app version of the application. The functionality of this app was limited to certain features such as your contacts, activity, organization’s profile, events, and the ability to search the profile of any institution, fund or contact in the system. These were the features that our product managers deemed our users would use while on their phone. It’s also important to note that this project was on a strict timeline as it was supposed to be presented at The National Investor Relations Institute (NIRI) within three months.



THE PROBLEM

Our users wanted the ability to use Q4 Desktop on their phone. We realized the main issue is that Q4 Desktop has far too many complexities to simply create an Android and iPhone version of it. We needed to be selective about what the user would be able to do and how they’d be able to do it.

financial mobile app loading screen

RESEARCH

Initially we tried to create Q4 Touch alongside Q4 Desktop but failed to understand what features were actually relevant to users while on the road so we ended up designing things that were difficult to design for on a phone, such as certain reports. So, in this version of Q4 Touch we knew exactly what we needed to develop and what was not necessary for users. We surveyed existing customers of Q4 Desktop in order to ask them what features they use most frequently, which features were the smallest and most consistent tasks, and which features they thought they would use on a phone if they could. Once we had this information we all understood the scope of the project and began designing.



WIREFRAMES

My wireframes were mainly to explore different forms of navigation and how to display any fund or institutional data. I explored a few different forms of app navigation and settled on a typical navigation bar at the bottom of the screen. It allowed for easy access to all our features, and this application wasn’t intended to be very large or have that many different sections, so I didn’t feel that would limit the future scale of the app.

My second biggest challenge at this phase was how to show extensive amounts of financial information on a phone screen. I didn’t try to squeeze everything onto this small screen, I knew that wouldn’t work. We’d have to limit any visualizations to one most likely, if any at all. And our tables of information would have to be completely rethought. I needed to make sure this information was digestible for users.

financial mobile app concepts


MOCKUPS

Creating the same look and feel as our desktop product on a phone app proved more difficult than I expected. I went through several completely different styles since some elements didn’t have a one to one relationship. Outside of text, the general colour palette, and button styles, there was no clear-cut answer as to what this app would look like. My creative director approved the general look and feel and then I began putting that into practice.

financial mobile app financial mobile app

We struggled with the sign in and dashboard pages from a marketing perspective. I felt our current desktop designs for those sections didn’t transfer well to a phone. It’s something we had to explore and come to an agreement on. The background imagery could be a little jarring depending on the image and how you used it.

Even though I spent so much time figuring this out in the wireframe stage, creating mockups of the institution’s profile still needed some fine tuning. There were so many icons used to identify certain types of institutions, and it would be rare that an institution has all of them but I had to design for the worst-case scenario. Organizing that as well as making sure the data visualizations looked attractive was still something I had yet to figure out. We settled on keeping it as minimal as possible. It was legible and looked good enough, but we couldn’t make the data visualizations look identical to the web app versions. To a degree it wasn’t going to be possible if we also wanted it to be legible on a phone and we were also pressed for time when exploring this area.

financial mobile app

CONCLUSION

This version of Q4 Touch was definitely a huge improvement to our original attempt which was never seen by users. The limitations we set on the features were useful to the team and overall were better for users as well. There are actually many things I would go back and change if we had the time. Just like Q4 Desktop, I feel that Q4 Touch is not scalable enough in its design patterns. We ran into a couple of issues when product managers would want to add information, and now we were suddenly stuck design wise. And once again, accessibility outside of text sizing and a proper target area wasn’t a goal of the company and something we couldn’t adhere to considering this app had to have similarities to Q4 Desktop.