Designing a fully interactive prototype for Crypto app in UXPin: UX/UI design case study

Published in

Meet Shah Design

4 min readAug 23, 2019

UX and UI design shot of crypto currency app designed with UXPin (GIF) — Walkthrough of fully interactive prototype

In this case study, I’m going to tell you how I designed a wallet app for Crypto coin called XUEZ. Also, I’ll be explaining how I leveraged advance features of UXPin in order to give almost realistic experience with prototype prior to development, which helped stakeholders to take fast and accurate decisions. I also got featured on UXPin’s global showcase platform for this prototype. Check out: https://showcase.uxpin.com/sign-up-form-for-crypto-app/

Project name: Mobile app for Crypto-coin with wallet and community modules

Company name: XUEZ coin ( https://xuezcoin.com/)

Live project: http://bit.ly/xuez (UXPin prototype)

Brainstorming

I have scheduled multiple Zoom conference calls for initial brainstorming and problem understanding. To begin with, I made paper-flow and concluded the 4 major modules of the app.

Wallet
Bounty
Cards
Profile

Mocking the Signup flow

The stakeholders wanted detailed yet interesting sign-up flow for onboarding the user for the first time. So I’ve come up with unique indication in the title which would sub-consciously remind the user where exactly they are. I always believed that,

“Mico-interactions are the backbone of interface design. It’s not visible but if it’s not there user will definitely miss it.”

Micro-interaction example for phone app UI design — Shot showcasing micro-interactions of the progressive Signup flow

Interactive prototype with real-time interactions

With the help of UXPin’s advanced features like interactive state, variable, dynamic inputs and conditional interactions I crafted out the prototype with interactions just like the real app would have. They experienced the prototype in UXPin’ mirror app and provided feedback instantly.

Signup flow part 1: Email and Password

I’ve imitated email and password validation in the prototype. If you pass the test then only you can go to next! Also, I defined the input type as email and password respectively for the fields so it uses the native android keyboard(in the UXPin mirror app) to take input.

Here you can notice, by using variables feature of UXPin I mocked show/hide password interaction.

UX and UI design shot of email and password authorization designed with UXPin (GIF) — https://dribbble.com/shots/6907578-Fully-interactive-prototype-using-UXPin-Signup-flow-Email

UX and UI design shots of email and password authorization designed with UXPin (Images) — Stage by stage shots of Sign-up flow part:1

Signup flow part 2: Phone and OTP

I’ve imitated phone number validation(should be 10 digits) in the prototype. I defined the input type as a number for the phone-field so it uses the native android keyboard(in the UXPin mirror app) to take input.

Here you can notice, by using variables feature of UXPin I took phone number to another screen for a realistic experience.

UX and UI design shot of phone number authorization and OTP flow designed with UXPin (GIF) — https://dribbble.com/shots/6917661-Fully-interactive-prototype-using-UXPin-Signup-flow-Phone

UX and UI design shot of phone number authorization designed with UXPin (Images) — Stage by stage shots of Sign-up flow part:2(Phone)

UX and UI design shot of OTP flow designed with UXPin (GIF) — Stage by stage shots of Sign-up flow part:2(OTP)

Signup flow part 3: Profile and Fingerprint

I’ve imitated phone number validation(should be 10 digits) in the prototype. I defined the input type as a date for the birthday-field so it uses the native android keyboard(in the UXPin mirror app) to take input.

Here you can notice, by using variables feature of UXPin I took a name from the user and suggested ‘username’ in real-time.