Matador

TapX

Role: Product Designer
Tools: Adobe XD, Zoom, Excel

Project Background

Founded by two college graduates that majored in Economics and Finance, TapX is a stock exchange app with a social aspect. It allows users to quickly research and process trade transactions in real time. The app tracks up-to-date reports, and allows users to share their trading history. 

Problem

I was brought on in the early stages of the project to help the two founders with the design and visualization of TapX. They had a lot of great ideas they planned to build into the app. However, there wasn’t a solid process in terms of research and design to help build the product.

Solution

I went through multiple stages of research to get a clear understanding of the fintech industry, focusing mostly on stock trading. At the same time I worked closely with the clients through a design process in order to create an app that is as intuitive to use as possible.

Discovery & Research

Stakeholder Interviews

The discovery process began with interviews of the founders of TapX. Through this process I learned a lot about the industry in general, some of the problems they wanted to solve, and the overall goals for the app. At the time, stock trades were institutionalized and had to be done through a middleman. With TapX, the clients hoped to empower the regular consumer, not only by bringing the ability to trade directly into their hands, but also by providing them with accurate and relevant information to make the best decisions.

Above: Examples of the first set of sketches I created after my initial conversation with the clients.

The Competition

After gaining sufficient knowledge about the industry, a study of possible competitors was done. This is essential to understand some of the established conventions and practices, some of the pitfalls, and some of the features that might set TapX apart from the rest. While there weren’t too many direct competitors at the time, one feature the clients were really keen to implement was to promote a social aspect of trading, which was quite unique in the field.

Deeper Dive

The next stage of my research revolved around understanding the types of information someone might need in order to make an informed trade, the possible sources of that information, and a working knowledge of some of the standard industry practices. This involved looking at publicly available resources such as Yahoo! Finance, as well as an interview with a fund manager of my bank, resulting in opening my own investment account. The clients were also valuable source of knowledge.

Design & Prototyping

Rough Sketches

Throughout the different stages of discovery and research, I was able to create three rounds of rough sketches to help conceptualize and visualize some of the ideas that were being conveyed. After each round, I was able to gather feedback from the clients that would be carried over to the next step. This was very helpful converting ideas into something that was a bit more tangible. Blatant pitfalls can be discovered early and really helped to focus discussions on problem solving.

Above: Examples of the three sets of sketches I created after each stage of research. The sketches become more refined as research and feedback are incorporated.

Left: Example of the first set of wireframes I created based on previous sketches. It is immediately apparent this is too information dense as things are put into close to proper sizing.

Wireframing

Once the sketches had sufficiently evolved, I moved onto more detailed wireframes using sourced images and texts. This allowed me to demonstrate relationships between different elements, information density, and user interactions in a clearly defined way. One of the major concerns that was made more apparent was over-saturation of information, which can be overwhelming for the user. I worked with the clients to come up with three different ways to address this issue:

  • Reduce lengthy complex language to concise wording that’s easy to understand and quick to read.

  • Break long scrolling information pages into easily discoverable sections (expansion panels and pop-up modals).

  • No more than one detailed chart per user view.

Finalizing Design

Translating the wireframes into the final designs was a fairly smooth process. Since the app was going to be exclusively released on iPhone’s App store, we mostly followed Apple’s design guidelines for UI elements. Modifications were done where it made sense for the app UX and the TapX brand. Seeing the app in the final UI element really brought forward a sense of reality, and a final round of review was done to iron out the last of the kinks.

Above: Example of the first set of designs using proper UI elements. Small tweaks were made based on feedback.

37

Hours of Research

4

Rounds of Interviews

68

Hours of Design

Final Thoughts

A proper design process can help produce well designed products that are easy and intuitive to use. I was able to help alleviate a lot of the clients’ anxieties by clearly outlining the process, and work closely with them to follow through. By doing plenty of research and speaking with subject experts (including the clients themselves) I was able to help the clients to clearly define their ideas and outline project scopes. A well defined plan can help save a lot of headaches, especially when coupled with plenty of rough drafts. By ironing out the majority of the kinks and pitfalls during the initial sketching phase, finalizing the designs becomes a much quicker endeavor.