A year back, I decided that I want to learn more about User Experience Design and how you can add value to your product. Searching the web I’ve found on Coursera, the Interaction Design Specialization, from University of California, San Diego.
I’ve never expected to have such epiphanies.
The Ideea
Imagine that you arrive at home in the evening and you are upset that you didn’t do today what you wanted to do. You are upset on yourself because you were lazy and you procrastinated a lot.
Maybe an app that can record your promises which you make to yourself in the evening (like a letter to your future self), and then, in the morning when you wake up, you would wake up listening your words (“Wake up! Aren’t you forgetting something? Those muscles won’t grow by them selves! Start your morning by doing some pushups!”) can help.
After you wake up, you resonate with your own words and try to fullfill your wishes through the day.
You would receive notifications, enter the app and record your reflections about what you did or did not do in that day. And later in the evening, you will check the memorize from the current day, and record another motivation, another letter to the future you, and tomorrow you will become more happy and powerful.
Myself, I always wanted an app where I can talk to my self, more like a mirror.
Do you go to your bathroom in the morning and start talking to yourself in the mirror? If not, believe me, you’ve got to try it. It’s a real power, energy and self esteem booster for the whole day.
Needfinding / Observation Study
I’ve started to work on this idea by running an observation study with some friends.
So, I grabbed my phone to record, and watched them in their own moments to better understand how everyone usualy plan to beat procrastination.
There where some major findings. A girl said that she usualy add alarms (a lot of them) and then put post-it notes all over her place because she usually forgets stuff. Asking her why she forgets something that feels important to her, she said: “I think, because I don’t stop to think about the things that matter the most”.
That gave me an epiphany on how the app should look like: a messenger app where you can talk to yourself, reminding you what’s important.
Having an idea in my mind on how the app should look like, I started to go in the next phase, the Ideation phase.
Ideation
This is a must have part in your workflow, because, mainly, from here you will generate the ideas.
Having that in mind, I had to extract the user needs from the observation study, define the main point of view, define what user problem the app solves, a real world scenario description and, one of the most important, an Inspiration Board containing verbal inspiration (words triggering ideas) and visual inspiration (images triggering UI ideas).
Prototype
Having the User Needs and the Inspiration Board in mind I started to work on the first Prototype.
First I created some storyboards to better understand how the app should be used and how the app solves the user needs. And then started to craft 2 paper prototypes, describing 2 ways on how the app should look like.
Heuristic Evaluation
I started to think about the multiple scenarios in which a user can interact with the app. I refined my paper prototypes, and then started to conduct an In-Person Evaluation.
Having the In-Person Evaluation I’ve seen that it’s essential to change all the things that you can change before conducting a Heuristic Evaluation, because it would be useless if the app needs to be changed for usability. Then you will have to conduct another HE anyway.
Heuristic Evaluation needs to be addressed in all apps. It’s essential to not forget the 10 Usability Heuristics. Without them, the application becomes unusable.
The design should be made with the 10 heuristics in mind.
But even so, if you are creating an application, service or product, please keep in mind this thing: First, do usability tests and address changes before Heuristic Evaluation. Second, conduct the Heuristic Evaluation.
After HE, I started to work on the first wireframe: the first screen.
Plan and Skeleton
In this phase, we had to create a development plan for the app, containing the changes from the usability test and from the Heuristic Evaluation.
Then, I created all the wireframes for the application and started to build the navigational skeleton, connecting them together.
Getting ready for testing
Having the Navigational Skeleton and the wireframes, I prepared for testing. I created the first clickable prototype, which was built in POPApp.
You can see it here: https://popapp.in/w/projects/579238de1fd1b9f13de039fd/preview
Then, I created a list of task that the user should take:
- Recording a motivational speech
- Set a reminder to recall it
- Memorize the recall
Testing the prototype (AB Test)
In this phase I created an alternative design (Prototype B) which was slightly different from the first (Prototype A).
I changed the way in which the user can categorize the motivation speeches.
In prototype A, I let the user type the text, while in prototype B, I let the user select from a list of predefined categories.
I had to make a Testing Protocol, to be sure that all the users get the same information. This testing protocol contains:
- Setup instructions
- Scope, purpose and hypothesis of the test
- Participants
- Tasks
- Scenarios
- Questions
- Consent Form
- How the recording observation will be extracted
Prototype A: https://popapp.in/w/projects/579238de1fd1b9f13de039fd/preview
Prototype B: https://marvelapp.com/3ee9fa4
I decided to use Marvel instead of POPApp because I can create more than 2 prototypes. Plus Marvel is Marvelicious.
I will use Marvel from now on for my clickable prototypes.
Running the AB Test
Having the Test Protocol prepared and the two Prototypes, I started to create 2 tests on UserTesting.com.
The results where phenomenal.
Only 1 from 4 users understood what was app all about (which was a kind of a pro user).
I rapidly understood that I didn’t do the usability testing as it should have been done.
Even if the users did not understand what the app it’s all about, they gave me the answer for the AB Test: 3 out of 4 want to write themselves the category.
I created a list of changes with what should I do in the next prototype:
- Create a methodology or process to be followed because the user doesn’t understands what the app is all about.
- Remove the screen to add reminders. Give only 3 reminders, for each step in the provided methodology/process.
- Add a wizard explaining to the user what the app is all about, and how he/she can use it.
- Use more vivid colors to attract the user to use the app.
- Remove video feature. Leave only the text and audio version. — Make play/record buttons bigger.
It should have been only one change: the change from the AB Test.
Instead of that I have a lot of changes to make, and that’s because in the first stage of the prototype, you have to iterate a lot on usability studies.
Then iterate a lot in heuristic evaluations.
And only then, you can start to think about particular AB Tests. Without good usability studies and good heuristic evaluation, the user would not understand what the app it’s all about. For example, instead of understanding the idea of a category, they would thing about the idea of an independent element (they won’t see a category of items). This was one of my problems here and I decided to remove the category and that’s because the user won’t understand the idea of a category in this kind of app.
The Latest Prototype
Soon after testing, I decided to implement all the planned changes.
Here is the latest and greatest prototype:
And now, of course, I will have to start all over again: usability studies, Heuristic Evaluation, AB Tests. And that’s because I changed a big part of the app, to make the user see/understand the idea of the app.
I am really curious if they will understand what the app it’s all about, after redesign.
If you have the time, please take a look on the Final Prototype on Marvel (embeded above) and give some comments about it.
What do you think? Would you use an app like this one?
