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.
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
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 )
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.
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.
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.
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.
Created a look and feel of the product based on existing branding guidelines. Created design system and libraries to ensure consistency
Flesh out all the approved functionality into final production screens incorporating all the design guidelines and systems of the project.
Handoff final designs on Zeplin, and detailed documentation in Overflow files.
Business objectives for the project were as follows
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
Three main Categories
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.
Below are the final production wireframes for the project. (In some projects I cannot showcase all of them due to confidentiality issue).
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.
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.