touch hero

Q4 Touch: Investment App On The Go


Our team of two designers and fifteen developers that created Q4 Desktop was also creating a mobile app version of the application. It’s 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 challenge: Investor Relations Officers want to be able to check their company’s investments, record roadshows, and record and review contacts without the complexities of the desktop platform.


Problem

Our users wanted the ability to use Q4 Desktop on their phone, outside of the office. 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.





Interviewing users to uncover what they need

A year prior to starting this project, the company tried to create Q4 Touch alongside Q4 Desktop but failed to understand what features were actually relevant to users. So, in this version we wanted to find out exactly what users needed. My product manager and I surveyed existing customers of Q4 Desktop to find out what features they use most frequently outside of the office.

  • Users must be able to view detailed information for institutions, funds, and contacts.

  • Users must be able to search for all available institutions, funds, and contacts.

  • Users must be able to add existing contacts and create new contacts.

  • Users must be able to create roadshows and take notes.

  • Users must be able to view their usual AI based dashboard summary.

Investor Relations Officers need the flexibility to access critical content and insights from anywhere, at any time due to the volatility of the stock market.


I’m designing for investor relations officers who are attending in person meetings and roadshows. They require certain types of business related information accessible to them while meeting investors and networking.



High-fidelity 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.

A big challenge was how to show extensive amounts of financial information on a phone screen. Especially when users actually want to have this information apparent to them at all times.

These wireframes were also made high-fidelity so our developers could use them to see what direction I was going in. We were so pressed for time that we were developing and designing at the same time.




Narrowing down the UI

Creating the same look and feel as our desktop product on a phone app proved more difficult than I expected. Outside of text, the general colour palette, and button styles, there was no clear-cut answer as to what this app would look like.



Making sure the data visualizations didn't look overwhelming and gave users a detailed view of the institution was still something I had yet to figure out.

I added an interaction that allowed users to scroll horizontally on the graph to see older data. This interaction is pretty important to the usability of the graph and I tested it with five of our customers in order to see if they realized it was there and knew how to use it. I released the current app to them via TestFlight in order to allow them to use the app for a few days. I then had a follow up call with them to get any feedback. Four out of five users were aware of the interaction and knew how to use it, which made me feel comfortable going forward with this solution.





Reflection and next steps

The limitations we set on the features were useful to the team and overall were better for users as well. There are many things I would go back and change if we had the time:

  • 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. This is something I would like to address in the next iteration.

  • Accessibility was not strongly considered during this project due to time constraints, however, I would want to change that in the next iteration. If everyone can't use the app, then we have a big problem that needs fixing.