Year: 2018
Role: Principal Product Designer
Role: Principal Product Designer
tl;dr
I did the product design and designed app store marketing assets for Cryptograph. This smartphone app allows Android & iOS users to check on-time data for more than 2,000 cryptocurrencies and tokens using CoinPaprika’s API. This was a passion project of myself and Jonas Hartmann, using Flutter & Material Design for the first time.
Brief
The motivation for Cryptograph came from 3 factors:
1. Google launching a stable version of the Flutter SDK.
2. The lack of well-designed smartphone apps enabling users to just check cryptocurrency rates.
3. A desire to move towards an OS agnostic approach to product design and development.
Deliverables
1. Use Material Design principles and design a UX/UI appealing for Android and iOS users.
2. Optimize data visualizations for small screens in portrait mode.
3. Provide a way to see key data at a glance.
Background
Emkore Limited has been a big proponent for OS agnostic software since its inception. When in the spring of 2018 Google released a Beta version of its Flutter SDK, we took this opportunity to experiment with a new designer/developer workflow.
Flutter is a cross-platform framework that seamlessly integrates Material Design principles, while also allowing native UX/UI components. Coinciding with Flutter’s Beta release was the popularity of cryptocurrencies. Looking at available smartphone apps, we saw an opportunity to produce an app offering users with on-time information on exchange rates, trading volumes and trends.
We designed & developed, from scratch to launch, during evening hours over the course of 10 days.
Flutter is a cross-platform framework that seamlessly integrates Material Design principles, while also allowing native UX/UI components. Coinciding with Flutter’s Beta release was the popularity of cryptocurrencies. Looking at available smartphone apps, we saw an opportunity to produce an app offering users with on-time information on exchange rates, trading volumes and trends.
We designed & developed, from scratch to launch, during evening hours over the course of 10 days.
User Experience
Defining Cryptograph’s UX I focused on 4 core features:
1.A home page listing all cryptocurrencies and smart tokens plus some basic data (USD exchange rate, trading volume and percentage change).
2. A detail page providing the user with specific details on a selected currency or token, including a trend line chart expressing FX rate in USD and Bitcoin.
3. Filters to enable the user to select data and information.
4. A "Favorite" feature enabling the user to create a watch list with currencies and tokens.
The biggest challenge in designing the user experience was to create an insightful line chart. While we didn’t intend for Cryptograph to be used in detailed currency analysis, I still wanted to design a chart offering more information than just trend direction.
Keeping the UX simple, I stuck to a single chart type (line chart), omitting more complex box plots. Box plots do provide more information, and have since the launch of the app been frequently requested (we added them in 2023). However, they also complicate both design & development and ultimately, we decided to forego this feature in the interest of time. To enhance the graph’s usability, I added filters enabling the user to set a custom time range. Swiping over the chart will reveal the currency or token FX rate for that moment in USD and BTC.
The biggest challenge in designing the user experience was to create an insightful line chart. While we didn’t intend for Cryptograph to be used in detailed currency analysis, I still wanted to design a chart offering more information than just trend direction.
Keeping the UX simple, I stuck to a single chart type (line chart), omitting more complex box plots. Box plots do provide more information, and have since the launch of the app been frequently requested (we added them in 2023). However, they also complicate both design & development and ultimately, we decided to forego this feature in the interest of time. To enhance the graph’s usability, I added filters enabling the user to set a custom time range. Swiping over the chart will reveal the currency or token FX rate for that moment in USD and BTC.
User Interface
I decided to keep the UI straight-forward and focus on the on-screen information. Using cards, I lifted detailed currency information, while keeping “big-picture” information like filters and charts on the background. I limited the color palette to shades of white and blue, giving the app a neutral aesthetic, pleasant to use by day & night (dedicated dark/light mode was out of scope).
Placing emphasis on the currency trend lines in the chart I used yellow and turquoise for respective prices in BTC and USD. Red and green are only used as semantic colors conveying currency gains or losses. As a homage to Emkore’s first project (Rebase) I used Exo 2.0 as a typeface for all text in the app.
Cryptograph looks great and is the most successful independent app Emkore published to date, with several thousands of users. Since the launch we switched from CoinMarketCap’s API to CoinPaprika’s API, and have added premium features.
Cryptograph looks great and is the most successful independent app Emkore published to date, with several thousands of users. Since the launch we switched from CoinMarketCap’s API to CoinPaprika’s API, and have added premium features.
Credit
Jonas Hartmann, Lead Developer