Oskar Jelonek's profile

Wireframes and usability testing

Wireframes and usability testing
Introduction
This time assignment is to prototype an engaging and exciting sign-up process. Design requirements go as follow:

• Recall the engagement factors: aesthetics, adaptivity, activation, authenticity, flow, immersion, narrative
• Think about the visual hierarchy and the order of steps, this can have a big impact on the overall experience

Since we were provided with tool flexibility and a lot of useful software licenses, for this time I decided to learn and use Balsamiq wireframes.
Wireframes
Before evaluation
The first to screens are both for collecting information and welcoming the user. I placed the logo to show the user which app they are logging into and make them familiar with the brand. Then there are lines for filling in user details. I wanted to keep it simple so I used lines instead of boxes. Furthermore I decided to not make user include their username. It's just additional thing to remember and it doesn't introduce any value and probably this is why most platforms are getting rid of that. Also on the side of the bars there are violin and bass key to help the user feel the theme of the app which is music. Then there is option for already registered users which in my case won't be functional since it's not the part of this project. Instead of sign up button I used the play button also to make the app look more engaging and playful and make the user feel like they're entering this musical world.
The idea of this screen is that after clicking the play button it will transform into this standard music control panel available in all music players to give user a sense of starting their music listening journey and the lines which were for putting users' details will become staves. Then on those staves various musical notes will start to appear one by one.
Idea of the next part is that those notes will start falling down also one after another and as they reach the height of the music progress bar they are going to disappear and the bar is going to fill up part by part. On the top there is this user icon and "Creating your account" text to signalize for the user that the work is in progress and the account is being created.
In the end there is confirmation for the user that account was created for them.
After evaluation
After conducting user testing I increased the size of the play button and put the "Sign Up" button inside because of the small size users weren't sure where should they click and also increased the size of "Creating your account" as it is feedback important to user and should not be accidentally missed. 
Evaluation process
Testing protocol
1. Informing the participant what the test is about and how the gathered information will be used.
2. Getting the consent of the subject to use their data.
3. Doing the initial interview.
   • Asking participant to think out loud
4. Asking questions after testing.
   • What did you like about the prototype?
   • Is it easy to understand it?
   • What could be improved?
5. To gather the data, I decided to record the screen and audio of the interview.
User testing
User were introduced to the wireframe setup and asked to create an account. Then everything was done according to the protocol. Below I'm including 3 user testing session videos.
Gathered feedback
• Play button should be bigger or there should be sign up written inside it or below because it can be confusing as it is now
• Creating your account writing should be bigger
• Password showing button should be clickable
Reflection
Creating engaging wireframes was a really challenging exercise because of the limitations of the software and specifications of the wire-framing process. However I understood that in this way this assignment wants to push us to come up with an interesting concept itself instead of staking everything on fancy animations. I decided to redesign Soundcloud platform sign up process. My main finding from this assignment is that sometimes it can be hard to find a balance between some design decisions. For example how to make the app good-looking and playful and at the same time provide all necessary feedback for the user. I think signing up process should in the first place be easy to go through and not overwhelm the user. Another finding is that choosing a prototyping software can have a big impact on the quality and process of making a prototype. In this project Balsamiq wireframes wasn't the best choice. It is because there are lots of limitations and it operates using mainly icons already existing inside the software. For this project where we have to make the process engaging another, more flexible tool which allows for more freedom in terms of user icon adjustments could do a better work.
Wireframes and usability testing
Published:

Owner

Wireframes and usability testing

Published:

Creative Fields