Company Background

Xen Secondary Trade Market


Xen is a next-generation platform for private investments.

Xen's mission is to bring together a new community of investors that value access, liquidity and transparency
Markets are more fraught than ever with uncertainty. Traditional channels often charge high fees for generic products. Xen cuts through all that noise, providing a smarter way to build wealth.

1. PROJECT OVERVIEW

In this project I was tasked to design Xen's secondary trading market application. For this project the focus was on the creation of trading behaviours, addressing how the graphs would look like, buying and selling and the information architecture surrounding these activities. The project doesn't include onboarding because a lot of the flows were inherited from the Xen mobile application.


THE UIUX BRIEF

The two main personas of this product are the accredited investor and the fund manager. Both have assuringly low tech literacy and hence the final product should embody a very clean and easy to navigate user interface. My main goal was not to reinvent the wheel but to take references of the best functionality ideas from other platforms whilst insuring it follows the integrity and brand guidelines of the corporate identity.


DESIGN CHALLENGES

Made for Fund Managers

  • Fund managers should easily recognise how to use the interface and feel at home with all the common terminology and functionality behaviours of a trading platform.
  • Reference Robinhood design

  • Our CEO likes the layout design of Robinhood so the design should reflect a similar layout.
  • Graph look and feel

  • Discussion with developers on what sort of graphical javascript libraries there are available on the internet and what they are comfortable with building to speed up development
  • Short deliver time

  • For this project we are working closely with developers from the start and we have to turn our design concepts in a matter of days for review and then amend them based on feedback and changes.
  • Locked access

  • Until the user fully registers a big challenge is not allowing preview of all the information of the data room and this will be challenging to insure that the design is compliant with the rules and regulations surrounding this.
  • Reverse enquiry

  • According to some legal requirements investors are not allowed to be advertised products and must make a request for more info. The user journey must reflect this.

  • My role

    Lead UIUX Designer

    Project timeline

    3-4 Months ( Excluding Development )

    2. My Design Process

    In this project I was tasked to design Xen's secondary trading market application. For this project the focus was on the creation of trading behaviours, addressing how the graphs would look like, buying and selling and the information architecture surrounding these activities. The project doesn't include onboarding because a lot of the flows were inherited from the Xen mobile application.


    Step 1. OVERFLOW

    Collecting Requirements

    We go through the requirements of the project with the Product Manager. We then start organising the requirements into information trees that help us plan out the user journey and flows of the application.

    Step 2. OVERFLOW

    Information Layout

    After step 1 we move into low fidelity designs. The goal of this step is to layout where the actions on the screen should be. These range from buttons, Images and forms. We also discuss behaviours and functionalities to apply to different areas in the application.

    Step 3. SKETCH

    Look and Feel

    We do a benchmark analysis of the competitors designs and create a mood board of ideas from reference around the web. Following the brand guidelines we create guides for text treatment and colours.

    Step 4. FLINTO

    Low Fidelity Prototype

    Low - High Fidelity prototypes are introduced to communicate the behaviour ideas inside the application. The goal is to make sure the product owner and the developers are on the same page. Clarity of functionality saves a lot of Development time.

    Step 5. Overflow

    Documentation

    We organise the sitemaps and user journeys with Low - High fidelity screens. Each screen is labeled with its corresponding Zeplin url link. Developers can reference the data flow and the css codes for reused components.

    Step 6. ZEPLIN

    Hand Over

    Making sure that every reusable component is accounted for and neatly organised in Zeplin. Combining components to form nested components like lego pieces. This gives very detailed reference to the constructions of design components.

    3. UNDERSTANDING THE PROBLEM


    The main end user of the application is the Fund Manager. The Fund manager has two types of personas. One as a consumer and another as a Admin where they have the ability to create their own Corporate page and listing. The two flows show the relationships of choices and actions that they can perform in their respective roles.


    Persona type:
    Fund Manager - Investor

    Persona type:
    Fund Manager - Product Offering

    Fund Manager - Investor

    Trading Platform Mechanics

  • Create a trading application that its intuitive to traders. The goal wasn't to reinvent the wheel but take a typical solution and make it cleaner and more condensed.
  • Fund Manager - Product Offering

    Trading Platform Mechanics

  • Accounts with CRUD functionality. Fund manager should have the ability to create offerings that will appear as listings in the platform.
  • 4. INFORMATION ARCHITECTURE


    5. INITIAL IDEAS

    In this section we explore different ideas to condense the information. We also explore available Javascript libraries for functionality behaviours that the developers are comfortable with adopting into their software architecture. Behaviour functionality should be addressed early in the project to give developers more time to weigh in on the decisions of the engineering side of things.


    Information Layout

    Worked closely with product owner to concept out the layout of the information.

    Product Cards

    The information of the product condensed to a preview.

  • Company Name
  • Fund Size
  • Region
  • Investment Type
  • Company Image
  • Bid Amount
  • Reference Menu Behaviour

  • Important Content Menus are fixed and the user can alter the data via bread crumbs below the graph which tabs through different information
  • Restricted information

  • Until the User has passed our KYC onboarding process. It is a key requirement that sensitive information is locked. This is a concept of hiding the content.
  • (click thumbnails to see more)

    6. Production wireframes

    Below are the final production wireframes for the project. (In some projects I cannot showcase all of them due to confidentiality issue).


    7. Design Systems


    8. Final Thoughts

    I was very happy with the final result. We put the application through several user tests with real fund managers and the feedback was very positive. My only negative reflections are that for private investment platforms with heavy onboarding processes the general user base is very low. Knowing this, I find the decision to use react components very counter productive. Reusable components only make sense to very large scale projects like social media platforms where the user base is well over the 100,000.


    Key takeaways

    Overall the project was a winner and a success. This project is a good example of how introducing developers early in the discussion can have such tremendous benefits to the quality of the production process. I was very proud of my documentation input and that clearly translated to the overall effectiveness of the development timeline. We were able to deliver the project early by 1 week.