Wireframes and User Flow
As an UX Designer you will create wireframes on different stages of your project. Being the fastest and easiest way to illustrate the structure of a web page or an application, they’re the key tool of interaction design not only when it comes to communicating your concept and ideas to the stakeholders.
As a student of Ironhack, I had the challenge to ‘reverse engineer’ one Interaction Design and user flow of an app I had chosen before. In addition, the second mission of this challenge was to dissect the task of the user flow by using Task Analysis.
So I have chosen the Coinbase Pro app because its one of the apps I use most often and secondly, the user interface is very user friendly in the operations, especially when you haven’t much experience in crypto currency trading so far.
Second step was to identify the user flow I want to work on. In general, this whole task was quite challenging to me as I’m a total newby to UX/UI design with less than zero technical background. So of course I decided for the user flow I think is the easiest to use. The sign in flow…Surprise! Beyond that, the sign in flow is a standardized flow for the users, no matter which application or website they use. And, most important, it’s the user’s first interaction after getting in touch with the product.
After inventory the UI elements, I started to create the wireframes. So here we go:
Based on this, I continued with the user flow:
For the task analysis I followed the steps recommended by UXPA’s Usability Body of Knowledge when decomposing a high-level task:
- User goal and motivation:
I assumed that Charlie, a 27 years old creative, adventurous coffee addicted who likes to travel, wants to sign in to Coinbase Pro to buy crypto currency. He is using crypto currencies as an alternative investment method, even he wants to be flexible and spontaneous with his investment decisions. Also he just have fun while trading with crypto currency and willing to take the risk in the game of luck. Charlie uses his mobile phone for trading.
- Breaking the goal down into subgoals:
Goal: 1. Sign in to Coinbase Pro
1.1. Open the application on his mobile phone
1.2. Hit the “sign in” button
1.3. Type in email adress and password
1.4. Hit the “sign in” button
1.5. Type in the verification code
1.6. Hit the “confirm” button
Also I visualized the subgoals in a layered task diagram:
And last but not least, I had fun in creating a prototype for this specific user flow in Figma including a kind of wireflow which I also want to present here:
