Challenge 2: Binance App Wireframes
Reason
The objective of this task is to reverse engineer a popular mobile application and demonstrate the user flow of a specific task attributed to this application.
Binance is the leading cryptocurrency exchange platform in terms of trading volume and user base, providing an easy and simple gateway to the world of cryptocurrencies. I chose Binance, as I use the application on a daily basis and it is my preferred exchange app, due to the excellent user experience achieved by their modern and clean interface.
The particular flow I have chosen for this task involves the steps from opening the app, navigating to the market overview, choosing a market, placing an order and finally viewing the purchase in the wallet.
Inventory Elements
The Binance User Interface contains the following elements:
Input Controls
- Dropdown Menus
- Buttons
- Dropdown Button
- Text
Navigational Components
- Search fields & boxes
- Breadcrumbs
- Vector Icons
- Image Carousel
Informational Components
- Notifications
- Progress Bars
- Diagrams & Charts
Initial User Flow Drawing
In order to assess the user flow in a visual manner a lo-fi mock up was sketched out. Following six screens contain the basic user flow for the aforementioned task, which will be dissected in more detail in the task analysis below.
Task Analysis
The macro task for this challenge was to navigate to the Binance App and find and purchase a cryptocurrency, asset or other derivative. Our macro task can then be broken down into 9 subtasks, which outline the flow the user must take when performing the main task.
Subtasks:
- Open application.
- Navigate to markets.
- Browse markets.
- Choose exchange pairing
- open chart
- Press buy / sell
- Choose order type and enter price
- Buy — wait for order to be filled
- Open wallet and check purchase
Wireframe
To develop the mid-fi wireframe I chose to use Figma, alongside the Ironhack Wireframing Kit and various icon databases, which allow the efficient usage of various assets, in order to build prototypes.
Following you can find my Wireframes. As you may notice, an additional screen was added after Screen 5. This contains the placed order, which was missed on the lo-fi version. In my opinion, this already somewhat demonstrated the power of a usable model to develop a sense of flows and usage patterns.[As the mentioned screenshot involves creating an actual order, I avoided taking that screenshot].
Prototype
Based on the developed Wireframes, I was able to create an interactive flow of the task outlined previously, namely to find and buy cryptocurrency.
Breakdown and assessment of micro tasks:
- Open application. The user opens the application via the icon on his mobile home screen and lands on Binance’s home screen.
- Navigate to markets. As Binance’s interface and platform are the definition of a transactional website, it becomes apparent there are multiple routes to market. The chosen user flow involves navigating to the ‘markets’ icon in the bottom bar.
- Browse markets. The user now has the possibility to browse various markets and currency pairings through the provided lists or alternatively through the search bar at the top.
- Choose exchange pairing. The user can now choose a pairing or use the search to find a specific market. Our user flow entails choosing a provided pairing from the list.
- Open Chart. Upon choosing a currency pairing, the chart view is opened providing the user with all relevant market data.
- Press buy / sell. To create an order the user navigates to the bottom of the screen and presses buy or sell to enter the trade screen.
- Choose order type and enter price. By entering order type, amount and value an order is created on the exchange.
- Buy — wait for order to be filled. The order can be viewed at the bottom of the screen until it is filled.
- Open wallet and check purchase. To view the acquired coin or token the user navigates to the wallet via the bottom bar.
Concluding Remarks
Overall, I enjoyed this task very much as it allowed me to engage with an app that I use daily on a totally different level. I became aware of elements and processes that had been ‘hidden’ to me previously, and it is interesting to see how aware one becomes from a simple user flow assessment and wireframe development.
By using this clear approach [inventory > lo-fi sketch > mid-fi wireframe] one could experience the various levels of development and how these elements define the characteristics and experience of the application. By cutting out all the unnecessary elements, one was quickly able to spot the relevant sections and blend out ‘the noise’.
