Timeline
Feb 2022 (1 month)
About OANDA
OANDA is a global company in the fintech space that provides innovative trading, currency data and analytics solutions for both retail and corporate clients. Its primary solution is the FX Trade platform offered on mobile, web and desktop that allows clients to trade positions across various financial instruments. The LABS team, who heads platform education related initiatives, focuses on developing new tools and innovation beyond traditional trading practices.
Scope & purpose
In the scope of this project, we want to create the OANDA Education Portal — a digital space which will contain innovative and valuable market information and education content. This may include pre-existing market metrics, new trading tools developed by the LABS team, and educational materials. It should be accessible to the public and by having its access restriction-free, it will help develop a more competitive edge in the market.
⎯ ✾ ❀ ✽ ⎯
Discovery
Understanding the problem
Currently, OANDA has a web help portal that users can visit to look for answers to a particular issue they might be having with the trading platform. Right now it serves more for necessity rather than an effective user experience and has low user traffic — it’s difficult to navigate, it lacks content variety, and traders are leaving with their issues unanswered. It lacks education on industry knowledge and our trading platform usage which, from a business perspective, limits our audience reach.
Assumptions and constraints
Some general assumptions and constraints that I kept in mind for this exploration:
An improved user experience with obtaining help and support will, by osmosis, improve the user experience and satisfaction with the overall trading platform.
We have the resources to develop a variety of educational content given that they are effective and they can housed within a single help & support experience.
A mobile-first approach ensures that the experience can be seamlessly scaled and translated into desktop and responsive web design (RWD) using React Native.
Problem statement
As an OANDA trading platform user, I want to conveniently find the solution to my unique issue on platform usage and/or trading knowledge, so that I can quickly overcome any knowledge barriers preventing me from maximizing my utility on OANDA’s platform.
Ultimately, we want to provide OANDA traders with a single source of truth for all help and support related issues in a way that helps them relieve frustrations while adding value by providing a convenient experience. It’s also an opportunity for the company to build more trust with its users and strengthen its loyal user base.
☞ To keep in mind
There is no single perfect design for a help & support page because every user needs help with a unique issue, and with that, the information we want to direct them towards can change over time. With that, we should be creating an experience that is fundamentally flexible and simple to support a large user base of varying needs.
Competitor benchmarking + industry solutions
I started by doing a deep dive into understanding the visual landscape of current industry solutions and benchmark our current portal against competitors. I explored competitors other products I'm familiar with that provide an exceptional experience in user assistance (i.e. Figma, Wix).
✰ Goal
To gain a holistic understanding of current industry solutions that provide users with excellent education on product usage or industry knowledge and the ways in which they achieve that.
Some of the preliminary questions I had in mind while conducting the research:
How do they leverage visual elements to create a more reliable and familiar experience?
How do they maintain visual consistency in their solutions?
What were some strengths and weaknesses? Are there any opportunities we can explore?
How do they inform users (discoverability) of the availability of help and support?
I documented my research visually in Framer with notes related to strengths, weaknesses, opportunities, and any thoughts that came to mind.
Some key ideas from research that we wanted to build off of were the accessibility of an internal help centre, the full control users should have over content visibility, and a good balance between discoverability and disruptiveness.
⎯ ✾ ❀ ✽ ⎯
Define
Design principles
Based on the business goals of the company, competitor benchmarking, and research into current industry solutions, I defined the following design principles to adhere by with respect to a help portal:
These principles help define these two types of education that we can offer traders and how we can ensure that both components are seamlessly part of one experience.
Centralized, help portal — consolidated in a single location that provides a vast database for education
Contextual, in-app tips — throughout the platform and varying by immediate user need
Contextual tips will be a part of the overall education experience that will be explored after a centralized help portal and for the purpose of this case study won't be touched upon in detail.
Understanding our audience
Based on earlier assumptions and knowledge gaps we had regarding user preferences, we compiled a list of questions that we wanted to ask users to be more informed and gain more insight into their needs and frustrations.
✰ Goal
To be more informed of users preferences and pain points towards platform education to help gauge a sense of where they might find value in a help centre within the app.
☺ My takeaway
After finishing my first draft of the questions and order, I asked the design team lead for feedback. Overall, the use of different question types were varied, well-worded, and focused. One thing I could improve on was having a nice segue into more broad, exploratory questions towards the end. From this I learned that it’s always more pleasant for the users to end on general questions to see more idealistic and creative thoughts.
Our users — stories, preferences, and pain points
User stories
One of the ways we gathered insight was by asking users to describe their past experience struggling with obtaining platform help. This was helpful in identifying common pain points and reasonings behind them.
User preferences
We also asked users what types of educational content they find most useful when it comes to bridging a knowledge gap in usage or finding a solution. The most popular medium was platform walkthroughs as it allowed them to get a better feel of the platform which will become an integral part of the experience.
User needs and frustrations
From their responses to our questions and user stories, we were able to gain and synthesize insights on common pain points and wants to refer back to and guide our later design decisions.
⎯ ✾ ❀ ✽ ⎯
Design
Initial explorations
With research and synthesized user insights, I started exploring different ideas and iterated upon ones that were seemed more plausible in Framer. Here’s a high overview of the iterations I had carried out for a few key screens:
Detailed iterations
Landing page
This is the screen that users are presented with upon clicking ‘Help & Support’ — this is their first impression of the help & support we offer and should feel welcoming and simple. There were two initial approaches I explored:
Direct and consistent
Consistent with high-density pages in the more section and rest of the platform
Everything is uniform, it’s difficult to tell what resource is most important at first glance
Lack of high-level organization for different content types
No additional icons, visuals, colours, or typography making it to absorb and visually communicate information
Engaging and varied
There’s a very clear hierarchy of resources that reflects utility and expected value
More white space for a breathable design which makes it easier to read and scan
Varying components and visual treatments makes it more engaging and easier for users to absorb information
Inconsistent with the compact and high-density design on the platform
✾ Design decision — engaged and varied
While we were concerned about it being visually inconsistent with the rest of the platform, the team came to the conclusion that it would not necessarily be a bad thing — inconsistency can be good. Some arguments for this include:
- Users are familiar with help & support being an external page. We can follow their expectations with a slightly different visual identity that looks separate from the platform to leverage that connection.
- We are trying to introduce a new source of help for users with its own secondary branding, so differentiating it from the rest of the platform draws attention and excitement towards help & support.
- The visual style can slowly be translated into the rest of the app, with the help centre being the first example of a more modern and visually expressive UI to enhance the user experience.
List of platform tours
This list of platform tours to choose from should be clear, straightforward, and easy to digest for traders. I explored various components to contain the content and it came down to 3 main iterations:
Small modal
More disruptive to the user from exploring other resources
Blocks the content in the background
Limited scrolling if there’s a long list of items
Medium sheet
Can browse different tours without leaving the help centre and lose context
Affordance for intuitive scrolling behaviour with a growing list
Not disruptive, can be easily dismissed and reintroduced
Full page
Affordance for intuitive scrolling behaviour with a potentially growing list
While this would work, it’d be an additional screen the user would need to navigate into and out of, adding to the already complex info arch
✾ Design decision — large sheet
One of our key user needs is to find a solution they need in the easiest way possible with convenience and intuitive navigation. Given the nature of a help centre that houses a lot of different resources, it requires high user effort to parse look through in their search for an answer. With that in mind, containing a list of indefinite length that users would often click into would be best fulfilled by a large sheet component.
Browsing help topics
Another key part of the help portal is help topics and articles. I experimented with different layouts and arrangements to effectively display all the topics we offer and these two were final ones for considerations.
Grid layout
There’s more white space and it’s more breathable
Larger tap targets for users which improves accessibility
Users would have to scan in a z-pattern which requires more effort than top-down scanning
List layout
Users can easily scan and read the help topics top down
Content can be extended downwards without feeling overwhelming
Slightly smaller tap targets, but this can be easily improved
✾ Design decision — list layout
Although both provide effective solutions, we wanted to design affordances for growing resources in the future. While the grid layout presents a breathable design with large tap targets, this would have diminishing value with the addition of more content. Since we need the design to be flexible, a list layout provides a more suitable fit as it is easily scannable and adaptable for increased content.
Article page
The article page contains the most important information that traders can directly use to help them with their inquiry. To make content more digestible since these articles can vary in length, I added visual indicators to group certain elements and create a separation between sections.
Large sheet
Article pages house important content and we don’t want it to be easily dismissed
CTA button is doesn’t add any value and takes up a lot of screen real estate
Full page
Breadcrumbs help inform the user where they are within the help centre layers
A full page helps full immersion and concentration towards absorbing content
✾ Design decision — full page
With a lot of content and categories, there'll be a lot of nested layers and many different paths users can take to get from a question to an answer. With breadcrumbs, it helps inform traders about where they are within the experience at any given moment and they can easily return to any previous page or layer above.
Testing with users
With the first concept, we showed static screens with users to validate our decisions and assumptions in our initial designs. Overall, 80% of users indicated that they were very likely to revisit the help portal to look for solutions based on the initial concept, saying it’s simple, straightforward, and just by first impression they have a clear idea of how they would go about searching for a solution. In addition to that, some key findings include:
Positive aspects
Users enjoyed the convenience of staying within the app to search for answers
Users found the navigation to be quick and easy which helped the discovery of pages
Users were able to find an article through the help topics to narrow their search
Opportunities for improvement
Users instinctively would have liked to conduct a direct keyword search
Users expressed the desire to have some online assistance / chat in addition to the read-only resources
Users expect content and resources are up to date and accurate
⎯ ✾ ❀ ✽ ⎯
Final design
Landing page
When traders click into Help and Support, this is what they're presented with: a wide array of resources and tools they can leverage to find an answer to their unique issue. As well, they can directly contact a live assistant if they require further or more specific support so that no trader is leaving with their problem unresolved.
Platform tours
Platform tours are an interactive resource that traders can use to learn more about specific features or functions. This solution address the hands-on learning style for the majority of our traders.
Help topics and articles
By having topic categories, it helps streamline the user journey by providing traders defined paths to help narrow their search. They can leverage this to find a more direct path to the resource they’re looking for. For clear navigation, there are three distinct layers or organization — topics, articles, content page — displayed through breadcrumbs.
⎯ ✾ ❀ ✽ ⎯
Reflection
Key takeaways
Exploration helps maximize creativity
It’s really beneficial to spend time in the beginning to just experiment with some ideas even prior to any user research. I spent the bulk of this project just exploring different approaches in Framer. It helped me get my creativity flowing and identifying as many directions as possible — it’s always better to over-experiment than limit experimentation!
The design process is not linear!
Designers often try to follow a defined design thinking framework, myself included, which is a great foundation but realistically most problems will not follow that. For example, at one point I was doing explorations first and then conducting user research to validate my design decisions. Since I was confident in some assumptions made, it worked out well and was more efficient. Depending on the nature of the problem, there might be different processes suited for that particular work and it’s important to adapt and adjust to those needs — also non linear processes can result in final designs that are just as amazing, if not better, than those adhered to a particular framework!
Test, test, test with users
There’s no such thing as too many tests!! There’s immense value in challenging/confirming any assumptions as well as gaining insight into perceived value from users for particular features. I realized that oftentimes, users can easily identify obvious shortcomings that designers sometimes miss while staring at pixels all day. As well, it’s helpful to test designs at any stage, from concept mocks to prototypes, so that continuous feedback is being received.
Next steps
I would love to see explore more contextual help beyond the little bit that I've already done. As well, thinking of ways to potentially incorporate video materials since traders also find those really useful. While this exploration was done on a mobile device, at some point translating it to desktop is a next challenge to look into. Also, it's important that platform education is kept up to date and relevant with new releases/fixes which would be a consideration to explore further.
