1. The Dashboard/Home/Overview
2. Coin Price Market Trends
3. Simplified transaction
However, we don’t want to obsessively fixate on what others have built and end up with a “me-too” product that doesn’t solve the problem better than what’s already out there, so we also decided to add some cool new features that the cryptocurrency holders have been expressing their needs for to the HyperPay app, including:
1. Earning profits from current crypto holdings
2. A portfolio value chart to show if one is investing wisely
3. Using cryptocurrency off-line in the real shop
Prioritizing features: team members used open card sorting to consider which features are most important and used most frequently
Prototyping & Testing
In the previous stage, everyone in the team has a chance to express their ideas, the project goals have been identified. So this stage is all about creating tangible design outputs which can be shared with the team for discussion and usability testing.
In order to create a smoother user experience, the UX team created low fidelity prototypes which could be quick sketches linked together to make a clickable user interface. These are used for demonstrating ideas to the rest of the team and stakeholders. Then our amazing UI designers will go from there and create high fidelity UI screens and Specs which to then be used to create a more realistic clickable prototypes.
The home screen
To further demonstrate the process, we’ll use the home screen as an example. Home screen is where the user will be seeing his overall portfolio.
Data to show in this page:
1. Overall Wallet Balance
2. Individual Coin/Token Portfolios
3. Recent Market Trends in the
These are some initial variations for the home screen:
Initial wireframes for the home screen
Once we have the options laid out, we discuss the pros and cons as a team: The first one gives the main balance at the top and the individual coins as cards that scroll vertically. But the individual coin cards are smaller in size and it’ll be a great challenge to fit in higher numbers and bigger name balance.
The second one has bigger individual coin cards, but the user has to slide to move through and see other coins. As HyperPay is an all-in-one kind of crypto wallet, limited amount of data at a single glance is not what we are after.
The third and forth are a more compact view, giving space to the main balance since that is what the user will need to focus on more. Other coins are split up as a scrollable vertical list. We also add high frequent action buttons the last one.
Final Mockup & Animation
Based on the HyperPay brand style guide mentioned above and the wireframes and clickable prototypes from the UX team, UI and motion designers are able to deliver the final mockups. Ideas are better conveyed when stakeholders can see the end results and the process.
Hi-fi interactive mockup for the home screen