A UX design process: TALK2ME, an app prototype

A UX design process, as it should be


About one year ago, I enrolled in the Interaction Design Specialization led by University of California San Diego Professor Scott Klemmer and offered via the Coursera platform. My main goal was to fill the gap between my education and my professional practice. I used to be a self-made UX designer, but, with no specific training, you can never be sure that you are applying the right approach and process to your projects. UX design spans multiple expertise areas and I’m convinced that practice and talent are not enough to make a good job!

It was amazing to go through this UX journey, focused on applying research and design methods to real world challenges through hands-on activities.
At the end of this 8-courses journey, I was required to set up and complete a final “Capstone” project. Actually, a new journey was starting and it was more focused than the one I went through in the previous courses and activities.

Setting up my final “Capstone” Project

When starting a user research process, I love to get my very first inspiration while observing people around me in “safari mode”, although, to be honest, for my final project, I didn’t have any specific requirement to start with and I had no clue of what was going to be my research area. 
I just went out with open eyes and open mind and I was inspired by one person that I meet everyday while commuting to work. After observing him for a few days while staying completely silent, I approached him and I got my first interview done!

Every day, I commute to work by a local railway that is also a cheap and quick way for tourists to travel to one of the most magnificent areas in Italy: Sorrento and the Amalfi Coast. I had the opportunity to observe for a few days this guy that used to sit in the compartment with me, who often spent all his time while commuting, engaging in conversation with tourists, in English. A few minutes of listening were enough to realize that, despite of his good intentions, he had a lower-intermediate proficiency in spoken English with a pretty poor dictionary and native language interference, that, sometimes, made the conversation awkward.

A brief and a challenge

So, I got the insight I was looking for: people might CHANGE something in their language practicing. 
Then, my first goal was to observe how people that needed to reach a good level of a foreign language ability for work or study or just for a personal interest usually practice it, both in a learning context and in an everyday life context.
I learned that for work, study or leisure, nowadays, most of the educated population are aware that they need to improve their linguistic skills in a second language beyond those standard course lessons centered on writing, translation, reading and all those activities based off non-interactive/dialog teaching methodology.

My challenge was to explore the opportunity to improve their foreign language listening comprehension and conversation skills through an engaging and pragmatic experience.

Ideally, I pinned on my inspiration board quite a few items, both digital and physical and, thanks to them, I produced a list of words related to my design idea.

This step in the process gave the final shape to my point of view: everyone should be able to improve his/her linguistical skills, in a second language, being able to practice conversation and listening in a realtime environment, with native speakers that they can pick, as if they were a partner for a date, that seems to be the perfect match for his/her needs.

Scissors, paper and… a sharpie

The storyboards and paper prototypes, that I draw, were about two different features of the app: one was for performing an instant voiceChat and the other was for scheduling a voiceChat. Some highlight was also put on the feedback and review system both for learners and natives.

One of the two storyboards I draw for TALK2ME app

I made two paper prototypes out of these storyboards and I was ready to start the first in-person evaluation session. At this stage, I was able to find out the weak points of the architecture of the app. A precious Hang-out session with my peer Carlos gave me the opportunity to conduct some extra iterations and he was able to find quite a few useful heuristic violations, that he suggested me to fix. That was a very helpful and supportive experience!

One of my two paper prototypes for TALK2ME App

Early results from the first tests on paper prototype

The major problems that both me and my Heuristic Evaluator identified in both prototypes of mine were about navigation, in freedom and visibility domains. When you build an app with a quite complex activity flow, you have to pay attention to the navigation architecture, both to avoid dead-ends and to make the experience natural and consistent based off the user mental models and expectations.

Me and my HE also brainstormed for potential solutions while coming across some points of the experience in navigation: all these ideas came out in a very natural way. Also a reflection about how to make the best out of the actionbar and the footer menu was needed, because in those areas there should be placed all those buttons that can be useful to let the user get to some other area of the app in a smooth and fluid way, every time he wants to move on to another task.

This is the first wireframe for the home screen of TALK2ME App

After revisiting the heuristic evaluation feedbacks I had collected, I was ready to build a skeleton of the app and also to create a plan for developing my app prototype. I needed to define tasks and, for each of them, deadlines and estimated hours to complete them. I was going to keep this plan up to date until the end of the project.

Thanks to my HE, at this stage of the process, I realized that it could be a good idea to put the two main features of both paper prototypes in the digital version of the app, I was starting to build. So, I was going to give a chance to users to engage in a conversation to practice a second language right away, when they have some spare time, while also supporting those users who like to plan activity ahead and need to have things set to feel encouraged to complete them. And, actually, I had observed both kind of these users!

Make it digital and start the iterative process through versions!

My prototype was made with inVision. I soon realized that I was facing a pretty tough challenge. It was a huge work and week after week, I added some stretch goals to complete as much as I could, out of the two main core features. My final prototype was made of 99 screens all designed and put together to simulate the experience with the “schedule a voiceChat” form, the experience of performing an instant voiceChat, the one for getting notified and perform a scheduled chat, as well as the one for leaving a review to a learner and getting a feedback about your proficiency level from a native.

My final stretch goal was to add the sign up process. At the beginning, to make this part quick and easy, I had provided the app with a “Login with Facebook” button, but some of my user testing participants, both the ones I met for in-person sessions and, later on, some of those that I observed in recorded video sessions on usertesting.com didn’t seem to be comfortable at logging in with their Facebook account. This could be a stumbling block, resulting in the loss of potential users with a high bounce rate at the very first launch of the application.

The last addition: thesignup activity flow in TALK2ME App

Will they get it? Will it work?

Our last activity in all this UX design process was to launch an A/B test that had to be performed on an online testing platform! I had to A/B test a specific element of my UI. In this application users need to build a reputation based on social proof. Feedbacks/reviews are important to users, both as learners and as natives and to building a solid context for the user experience in the application. Thanks to my in-person user testing sessions, I had realized that it’s important to remind the user about his coin balance at the end of the call and push him to leave a review for his chat pal with a call-to-action that includes a promise for a reward (earn coins that he can use for the next voiceChat). My A/B testing was meant to proof if a more straightforward call-to-action on the “Leave a review” button was more effective in persuading users to leave a review for their voiceChat pal.

Talk2me: redesign for A/B test

Well, the A/B test result based off 4 users might not be very significant but I decided to go for the B version.

During the online testing sessions on usertesting.com, it was amazing to see how different people can follow different interaction patterns. Two participants freely explored the whole app and it sounded like they really enjoyed it! One of them, said in her final considerations:”I immediately found the app interesting and started to press all about to find out what it was about”. Also those interactions that were not part of the main tasks I had set for the test (schedule a voiceChat), seemed to have a quite clear UI. All of participants comments were very enthusiastic about the service provided by the app as well as about how easy it was to use and navigate. This final experience just proved how worthwhile all the walkthroughs and the revisions made during the previous weeks had been.

After that, I just made the final last tweaks, and now that time is over… Try it yourself!

https://invis.io/XR84MXBTA

Wrap-up

A very precious experience has ended and, now, I just have to carry on my everyday struggle to make people (i.e. nerdy IT professionals in Italy) understand how valuable the UX design role in a project is.

Thanks to those who got to this point after a 8 minutes reading and thanks to Professor Scott Klemmer that, during the last 6 months was so patient and attentive with my questions (both as a student and as a mentor for two courses in the Specialization) which, summed up, made far much more than an 8 minutes reading!

And now, go drop a like on TALK2ME Facebook page and you are done! :)

https://www.facebook.com/talk2meApp