I Tried Creating 10 Sketches to Determine the Best Choice for User Experience
After reading the book titles Sketching User Experiences: The Workbook by Saul Greenberg, Bill Buxton,Sheelagh Carpendale, and Nicolai Marquardt, I decided to do one of the challenges, which is to create 10 sketches of ideas for an app where people can connect and virtually do a “handshake”. On Picture 1 I created a short comic strip to illustrate what I think the challenge means. However, instead of creating sketches, I wanted to do 10 wireframes for the same flow, which is as Picture 1 illustrates, how to connect people and establish the connection. So I list down what I want the system to be able to do, which are;
- Using Bluetooth connection and GPS location to determine people near the user who uses the same app,
- And if the user found someone they want to hangout with them, they can send a request via the app, and if the person accepts the request, they will be able to contact each other and share their exact location to meet,
After that I started creating the 10 wireframes, iterating and managing new ideas on how to make it fun and easy to use.
Sketch 1
At first I thought that it would be best if the app doesn’t automatically has access to the phone’s bluetooth, so I came up with an idea to put a button which a user can tap to turn on, and then the system will access the phone’s Bluetooth and start searching people near them, creating a list where the user can tap on which will activate a pop up for more details. If the user wants to hangout this person they can just tap on the “ask to hangout” button and an invitation will be sent.
At the top of the fourth page in Picture 2 are two buttons which are the result of the search which the system did, and also requests, which redirects to a page with a list of people who requests to hangout with this user.
Sketch 2
For the second one I was inspired by Tinder, where users can swipe left or right to send invites to hangout, and also add an option to click on buttons to send a hangout request or not, which I called “Ask to Hangout” and “Nah… Skip!”
Sketch 3
For the third one I went ahead with the first design, but changing the contacts to the form of a list of cards. I also had another idea, where users can search their friends near them. I assume it’s technically possible by having the app later on be able to add people into the user’s circle of friends which at this point I don’t really think much about it. Also, I eliminated the Bluetooth access button because I assume some users doesn’t mind having the app able to access their GPS and Bluetooth at all time for less hassle. Another thing I added is a notification button to notify the user about requests from people near them.
Sketch 4
For the fourth one I decided to go back to the third idea, but incorporating it with the idea in Sketch 3 where it’s possible to specifically search for the user’s circle of friends, by adding a home page with 2 buttons, the first one for searching friends near the user and the other is for meeting new friends near them.
Sketch 5
With the same assumption as Sketch 3, I have another assumption, which is that a user would want to be able to visualise on how close or far people who uses the app is to the user. So I tried to add a map to it, with a pin for the user and an account icon for the other users and when the user taps on one of the account icon, a pop up will show and the that user’s profile will show up along with a button to send request to hangout.
Sketch 6
For the sixth one I incorporated the first sketch and the fifth sketch, and a change, if the user taps on an account icon, it’ll highlight the name of that particular user, which is explained in Picture 7.
Sketch 7
I decided to add the home page from Sketch 4 again, and also Sketch 2 because at the time I thought it would be a good idea to have 2 options, to search from the map, or just do it tinder style.
Sketch 8
After finishing all the sketches and finalizing, I realized that I haven’t changed anything on the 8th sketch. Oops.
Sketch 9
For the ninth time, I decided to change the homepage (or dashboard, I guess it’s more accurately called) and change the “Find My Friend” button to a list of cards like in Sketch 3. I also moved the Bluetooth button from Sketch 1 to the design, with a sliding switch button.
Sketch 10
For the tenth one, which I though will be the last, I starting to do the UI part, just so I things can start to make more sense and also look better. On the sliding switch button I also added a Bluetooth icon, also an alternative page i the user turns off the switch.
Final
And this is the end result. I deleted the tinder inspired part because I think it’s just not the experience I wanted for the user to have and that I want the user to user the map feature as the main way to search for people to hangout with near them. Other than that I just added a feature to go back to the dashboard, and also a bottom navigation bar.
Verdict
Creating ideas for the same thing again and again is rather tedious and boring, I admit. Especially when you force yourself to create a number of them, in my case, 10. Nevertheless, I think that this is a really fun and amazing way to find out new user experiences because I get to try a lot of different approaches. The most new thing I tried is creating a comic strip just to understand more about the flow itself.
I realized that by forcing myself to create 10 and make sure that everything is well documented (as in I don’t directly edit on the previous flow), I see that it really helped me see in more directions and possibilities on how to achieve a goal, in this case a userflow with the goal of sending a request to hangout. In conclusion, I am satysfied in the Hi-Fi Prototype I came up with after a lot of tries. I really recommend anyone new to this field to try do this challenge.
Also, here’s a picture on the changes per page:
