Company Background

Xen App


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 create Xen's trading application. The core functionalities of the app is to serve as a wallet and a trading application. Initially Xen's business model was to deal in cryptocurrency in the form of "Security Tokens" Xen's security tokens would serve as a staple coin base currency instead of fiat. The commission of the App was vital to their business model which is to break into the trading security token market.

THE UIUX BRIEF

The app's main core functionality was to revolve around trading and acting as a wallet. The core USP of the business was Xen's unique Security token product. For this application our goal was not to reinvent the wheel but to take the best elements and ideas of other successful platforms such as Stashaway and Robinhood to create a product that focuses on conversions and onboarding. The brief was to make an App that feels secure and has very easy and clear navigation. The effectiveness of how fast a user can easily signup and start trading would reflect the succesfulness of the user experience design.

DESIGN CHALLENGES

  • Understanding basic trading flows and business terminology
  • Convey the sense of security and efficiency within the UI design
  • Condense the User experience with the goal of engagement and conversion

    • My role

    In this project I held the position of lead UIUX designer.
    A big part of my role was to oversee the information architecture with business owners.

    I was to assist with the creation of design systems, prototypes and documentation for developers to translate into a final product.

    Project timeline

    1-2 months ( excluding development time )

    2. My Design Process

    Due to time constraints we had no time to create a high fidelity prototype after establishing look and feel. We adopted a more agile development approach. Instead we worked closely with developers feed back during the planning stage and went straight into high production screens. Heavy reference to the zeplin documentation. Overall we managed to make the deadline.

    Step 1. OVERFLOW

    User Journeys

    Flesh out user journeys and identify the different User Personas to develop the Application main objectives, making sure they match up with the business objectives of the company.

    Step 2. FLINTO

    Prototype core behaviours

    Low fidelity prototypes were made to flesh out ideas so that critical errors could be addressed and more time allocated for developers to concept software architecture.

    Step 3. Sketch

    Look and Feel

    After establishing core functional specs I then proceed to creating the initial look and feel. Mood-boards with brand identity guidelines. This is the base that will continue into my design systems.

    Step 4. Sketch

    Design Refinement

    Created a look and feel of the product based on existing branding guidelines. Created design system and libraries to ensure consistency

    Step 5. Sketch

    Production Screens

    Flesh out all the approved functionality into final production screens incorporating all the design guidelines and systems of the project.

    Step 6. Zeplin

    Hand over and documentation

    Handoff final designs on Zeplin, and detailed documentation in Overflow files.

    3. UNDERSTANDING THE PROBLEM


    Business objectives for the project were as follows

  • conversions - The app should have a reduced amount of clicks to get to important buying and selling scenarios

  • Fast sign up process - Easy sign up, User should be able to get started in less than 2 mins.

    • Persona type:
    Traders

    Persona type:
    Fund managers

    User journey - Trader

    Overview of user journey for a Trader. The bulk of activities happen in the main dashboard area. From the main dashboard the user can navigate to trading menus, view balance, profile and trade

    4. INFORMATION ARCHITECTURE

    Three main Categories


  • The Left side of the screen holds all the actions pertaining to balance, top-ups and history would be accessed on the left side of the app.

  • The right side of the screen leads to accounts. From KYC to account information.

  • New trades can be quickly accessed via a trader button icon on the bottom middle of the screen.


  • With most platforms the users are overwhelmed by information. By categorising the menus into 3 sections I felt this helped communicate better
    the actions the user needed to perform and clear understanding of how to navigate there.

    • 5. INITIAL IDEAS

    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.

    Low Fidelity Wireframes

    Layout of information based off the product requirements. Here we establish the placement of buttons, form fields and images.

    Hide Button Nav on scroll

    To save screen real estate Icon navigation items will fade out on scroll down and reappear on scroll up

    Off-Canvas Navigation

    Replace Text with Icons to save space and have off canvas functionality

    Investment strategy with sliders

    Control Investment strategy with sliders custom or preset

    Keyboard inputs or slider touch

    Select Values with slider or bring up keyboard on tap. Also confirmation of values will appear and be fixed bottom and sticky on scroll.

    (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

    Type Font treatment cleanly labelled. Also included a brand guideline for colours used in the project as swatches.
    Reusable components are labelled in Zeplin with sliced images.

    8. Final Thoughts

    I was very happy with the final look and feel of the application. The app conveys a sense of security and reassurance which is very important in a platform that deals with transactions in the 100 thousands. It has a itimidating theme that stands toe to toe with other leading competitor designs in the fin-tech industry.

    Key takeaways

    This was my first project that I worked on at XEN. I was very happy with the final design. Unfortunately the business owner shifted their business direction into a more traditional model and hence the application development was put on hold. I would like to see the final application if they ever decide to use the design schematics I made.