About the Project
For this assignment we had to create a wireframe for an app's sign-up and waiting page. We could choose if we would like to re-design an existing app or come up with one on our own. I used this opportunity to create the 'OIiver's mind' app. I used a tool, called Balsamiq, which is especially for creating wireframes. I've never used this tool before, however I found it very useful. It has premade elements for websites and mobile applications. The look and the style of the wireframes is simpe. It makes the designer not to think too much into the aesthetic part of the design, since it is easy for a designer to start go into details quickly, which is not the goal of wireframing.
The Prototype
This is a low-fidelity digital prototype. The goal was to create the wireframe of the app, in other words to place different elements like images, text boxes, input boxes etc.. Since the easthetic is not in our focus this method allows us to test our app's main functions and change them easily according to the feedback.
Sign Up Options
Registering via email
To make the signing up simple and not overwhelming for the user there is a different page for each data like name, email etc.. There's also an image, which divides the space and make the interface more immersive and easthetically pleaseing. I also implemented the dots at the bottom on the screen, so the users will know exactly how much pages and time left from the registration. This will put them in easy, since they will see from the start that it is a short process.
Loading screen
The loading screen connects to the theme of the app. The user sees a human 'loading' as if they would be being loaded into my mind. It also functions as a progress bar, which let the user know that the application is working in ceating the account.
Testing
Feedback
After testing my prototype my friend could give me feedback on it. He told me that on an app, people don't log in on a daily basis, so maybe I could focus only on those users, who don't have an account. He also told me that if there is an option to sign up with google or apple, there is no way he is going to do it via email. In his opinion it is good that on the final step it says 'sign up' instead of 'next'. Also, he liked that most of the interactions happened on the bottom half of the phone, since that is easily reachable with the fingers. This makes it clear that the process is finished and this is the last step. He told me that at some point the text that should stay in the same position moved, and made him confused a bit. This is probably because on one of the artbords the position is different than on the other one.
Conclusion & Changes
To make the sign up process easier, users will see the options on the starter screen. I also checked the static elements on each screen, so they won't change position.
Reflection
Using a new tool is always tricky at the beginning, but I'm happy that I tried Balsamiq out. It helped me focus ot the main elements of the app and not go into details. I'm sure I will use it later during my projects too. The testing went good. However, it would have been nice to film the screen and the tester's face at the same time. Unfortunately, the place, where the testing was conducted did not make that possible.
