Usability Report

By Keara Chung and Eveyen Sobremisana

Style Mi Report 
 
Executive Summary 
 
On April 18th, 2018 my partner and I hosted a usability testing session for our app Style Mi. 
We performed this testing session to help us identify key features throughout our app that 
require improvement as well as to determine the overall usability of our application. Tests were 
performed with a total of 10 participants who navigated through our app for approximately 
10-15 minutes in a classroom at BCIT. We had our participants explore Style Mi’s various 
interfaces to help define what was relevant and what features could be changed. After 
evaluating all of our participants performances with the app, as well as taking note of their 
survey results we were able to accumulate some major findings.  
 
Users generally found Style Mi to be very straightforward and easy to navigate through. 
Users appreciated the pop up instructions and facts about the app, and responded positively to 
our various interfaces. Participants were impressed by the overall design of the app, and 
enjoyed the minimalist feel on each page. Although users were overall pleased with the app, 
many users found certain functions to be confusing, such as certain buttons that required 
further explanation, and some actions that didn’t quite make sense, or users didn’t expect to 
happen. We have collected these findings to further examine in this report, in hopes of 
improving Style Mi and to ensure it meets its target audiences requirements once launched. 
 
 
Table of Contents 
 
1- ​Purpose of the Study 
2​- Participants 
2​- Methods 
3​- Findings and Recommendations 
4​- Prototype 
5​- Conclusion 
6​- Appendices 
 
 
Purpose of the Study 
 
The purpose of this study is to help identify key features throughout our app that require 
improvement as well as to determine the overall usability of our application. We conducted 
usability testing for our app Style Mi, to later gather our findings in this study to determine how 
participants reacted and interacted while using our app. Style Mi is designed to make the 
everyday life of both men and women just a little bit easier when it comes on deciding on what 
to wear, and while performing our testing we wanted to ensure that was the case for our users. 
In this study we will be explaining our methods, the types of participants we tested and the 

1
 findings and recommendations we uncovered during usability testing. By accumulating all 
these facts we hope they will aid in making improvements to Style Mi to adapt our app to best 
fit our target users. This study is detrimental to the success and final launch of Style Mi and will 
play a big part in the overall design and functionality of the final application. 
 
Participants 
 
Here is an overview of the participants we had complete our usability testing sessions: 
 
  Gender  Age   Contacted  Web Experience  Occupation 

Participant 1  M  21  In- Class  PC and Mac  Student 

Participant 2  M  25  In- Class  PC and Mac  Student 

Participant 3  M  21  In- Class  PC and Mac  Student 

Participant 4  F  23  In- Class  PC and Mac  Student 

Participant 5  F  19  In- Class  PC and Mac  Student 

Participant 6  F  21  In- Class  PC and Mac  Student 

Participant 7  M  17  In- Class  PC and Mac  Student 

Participant 8  M  21  In- Class  PC and Mac  Student 

Participant 9  M  25  In- Class  PC and Mac  Student 

Participant 10  M  25  In- Class  PC and Mac  Student 

 
 
 
Methods 
 
My partner and I sat down with each of our participants one at a time and gave them an 
overview of Style Mi and what it is all about before providing them with an exploratory session 
of the app, followed by a list of tasks to perform, provided by us. The script as well as the task 
list we provided our users can be found in the Appendices section at the end of this report. 
After providing our participants with a general overview of the app they were aloud to begin 
their exploration sessions, where we asked them to think out loud as they navigated through 
our interfaces. We didn’t talk during their exploratory sessions, only asked the participants 
questions about what they were feeling through each interface. Once they felt they had 
completed their explorations we moved onto the tasks at hand. We had the participants 
complete 5 tasks in which we read out loud to them one step at a time. After the completion of 
tasks we had the participants share anymore comments they may have, before moving onto the 

2
survey portion of our testing. The survey included 15 questions which they completed to help 
give us insight on specific areas we wanted extra input on. After that we thanked the 
participant and moved on to the next. The main goal of our methods was to gain a better idea 
on how participants would interact with our application being first time users, as well as to 
identify and issues or areas that needed improvement.  
 
 
Findings and Recommendations 
 
What worked: 
● Layout and colour scheme 
● The overall design of the app 
● Variety of clothing selections 
● Emphasis on some key text in the instruction page 
● The flow of the app is straightforward 
● The graphics 
● Minimalistic and friendly feeling to it 
● Fully functional 
 
What didn’t worked: 
● Hover State( it’s a mobile app, hover doesn't work) 
● Clicking on the about us sections again to close it 
● Icons and buttons are too static, could use design elements to make clear. 
● Settings icon is misleading as it doesn't work as a settings button 
● The closet button on the first page- when you click on it, it will redirect you to an empty 
closet. 
● The clothes on the avatar are not in the right place. 
● The facts in the speech bubble are too small to read. 
● On the closet page, when you click on the clothes that are saved it will deleted the 
clothes which is confusing, 
● No clear ending for the app 
 
Recommendations for improvement: 
 
After analyzing all the above usability testing results and figuring out what worked and 
what did not we were able to identify the problems and find solutions. Because the hover 
function does not work on mobile apps we gave each icon a label below it so users would 
understand what clicking on that icon would do. We improved the look and functionality of the 
landing page so that the “about us” and “about the app” buttons were clearly defined with 
borders and included an “X” at the top corner to close the pop up. We also included clicking and 
other sound effects to provide feedback to the user. Because our settings icon confused so 
many of our participants (as it returned users to the form page) my partner and I decided it 
would be best to change the icon to a home button, making it more clear that it would return 

3
you to the first page. While navigating through the app many users became confused on which 
button to click first (the “change my look” button or the “closet” icon). To ensure there was no 
confusion in the final version of our application we made it so users could not click on the 
“closet” icon without changing their look first. As for the dress up page in Style Mi, my partner 
and we have fixed the clothing alignment on the avatars so they fit perfectly and we’ve also 
included a new “information” icon which users can click to get educated on their clothing 
selections at a reasonable font size, rather than squishing the facts into little speech bubbles. 
Once users navigate to the closet page we have improved the functionality so that users saved 
outfits don’t disappear when clicked on, but rather take the user to a “final look” page provide 
an overview of their chosen outfit and an ending to the app. As for deleting outfits we will be 
introducing a trash can icon or delete button either on the closet page or the final look page. 
We believe that once these changes are implemented Style Mi will be ideal for its target user. 
View figure 1 below for a visual understanding of Style Mi’s areas of improvement. 
 
Prototype: 
The screenshots below are an overview of the Style Mi Prototype we used for usability testing.  
 
Figure 1 

4
Conclusion 
 
This study helped us accumulate all our results in an organized and efficient manner, to get 
better insight in to Style Mi. By performing usability tests and recording the results my partner 
and I have identified the problems and made improvements to ensure the success of Style Mi. 
Users responded positively to our various interfaces and were impressed by the overall design 
of the app. Any concern users had we have found a solution to and we hope to impress them in 
our final reveal of Style Mi. We have appreciated the participation of all our usability testers, as 
their findings have helped us to dig deeper into the UX and UI design of Style Mi for great 
results. We look forward to our reveal with many new additions and improvements to Style Mi. 
 
 
 
 
 

5
Appendices 
 
1. The following charts fall under our blank data collection: 
 
Chart 1 - Flow of the app 
 
Chart 1.1 Chart 1.2 
 

Chart 2 - Instructions 
 
Chart 2.1 Chart 2.2 

 
 
Chart 2.3 
 

6
Chart 3 - Illustrations and Layout 
 
Chart 3.1 Chart 3.2 
 

 
Chart 3.3 Chart 3.4  

Chart 3.5 

7
Chart 4- Education Section 
 
Chart 4.1 Chart 4.2 

 
Chart 5 - Feedback 
 
Chart 5.1 Chart 5.2 

Chart 5.3 

8
 
2. Summary of qualitative comments: 
 

 
 
 

9
Style Mi Official Usability Testing Script

Hi there, we are Style Mi, and today my partner and I will be presenting you with a general overview
as well as a series of instructions to help you better understand our application. Our app is designed
to make the everyday life of both men and women just a little bit easier when it comes to deciding
what to wear for upcoming occasions, or even just on a day to day basis.

The objective of this usability testing session will be to help identify key features throughout our app
the require improvement. To ensure our app meets all of our requirements as well as your expectations
we have gathered you here today to explore Style Mi’s various interfaces to help define what is relevant
and what features could be changed or improved. We would like our audience’s perspective on the app,
as well as tips as to what aspects of the app are helpful or useful to the user. Each usability tester will
receive tasks which will involve navigating through the app and pointing out features that work or do
not work for them. This session should take about 10-15 minutes, and will aid in the final creation and
launch of Style Mi.

Throughout this usability test please keep in mind that the information recorded is solely for the
purpose of further development of the app and identifying any issues. This session will be used only
for evaluating the application, not the tester. During testing please ensure you use Style Mi, just as
you would on your own device. Take your time, and go at your own pace for best results. Though we
will be recording the amount of time spent on each interface throughout Style Mi, please do not feel
pressured, and do make yourself comfortable. If a task exceeds 10 minutes we will ask that you move
on the following task.

The homepage on your web browser or mobile device provided by us will be set to Style Mi’s about
page. From there you will be able to get more information about the application before navigating to
our form page which will ask you to enter your name and gender before pressing start. After pressing
start you will be redirected to our homepage where you will be given the option to style your avatar or
view your closet. Ensure you click on “change look” since as a new user you will not have any outfits
in your closet yet. From there you will be prompted to choose a weather option and style to best suit
your event before reaching your final look. It is from there that you can then save your outfits to the
closet or restart. As you’re navigating through Style Mi we would like you to imagine you are trying
to plan an outfit for an event of your choice. This application is completely based on your inputs so be
sure you stick to the event you’re thinking of. If you become confused or feel you are unable to com-
plete a test please have us know and we’ll move on to the next.

Before we begin are there any questions?

Please take some time to independently explore Style Mi before we begin the tasks. While doing so
please think out loud or jot down some notes of each thought that goes through your head as you
navigate through the app. We want your opinion on each feature or bump in the road you may en-
counter. Please feel free to explore any styles that may be of interest to you. Please have us know
when you have completed your exploration of Style Mi and we will move on to the tasks at hand. En-
joy yourself and please remember to help guide us through your thought process during your explora-
tion. Before moving on to the tasks please return to the form page by clicking on the settings icon.

10
Style Mi Usability Testing Tasks

The following tasks are to be preformed after the independent exploration session. Before preforming
tasks please ensure you are on the Style Mi form page and begin reading tasks out loud. Here are some
things we ask you think about while preforming these tasks: “Is this confusing?”, “Is this relevant?”, “Is it
easy to navigate?”... Please be aware that during the performance of your tasks we may ask you some
questions.

Tasks:

1. Fill in the form, select “change look”, then select cloudy, then casual. Click on the arrow on the right
hand side to change outfit, and the arrow on the left to return to the first outfit.

2. Click on the back button, then change your selection to rainy, then fancy. Click on the arrow on
the right hand side to change outfit, and the arrow on the left to return to the first outfit. Click the
button “save to closet”, then click the closet icon on the bottom right to navigate there.

3. Click on the back button then click and change your selection to sunny, then business. Click on the
arrow on the right hand side to change outfit, and the arrow on the left to return to the first outfit.
Once you’ve selected the outfit you like add it to the closet. Click on the closet icon to navigate to
the closet. Once there click on one of your saved outfits to delete it.

4. Click on the settings icon to return to form page. Change the name of your avatar to “test” and
press start. Click the closet icon to view your closet.

5. Click on the back button and add four more outfits of your choice to the closet. Once you’ve added
them, navigate to the closet and delete two of the outfits.

Once you’ve completed the above tasks please feel to ask any questions, or provide any feed-
back you may have. Thank you so much for your time.

11
Style Mi Usability Survey
Style Mi is an event based planning app for both men and women. Respondents will be asked to
rate, answer yes or no, answer open ended questions and are expected to provide us feedback
about the app to help us improve its interface and usability.

* Required

I. Flow of the app

1. Style Mi has a user friendly interface. *

1 2 3 4 5

Disagree Agree

2. Style Mi is easy to navigate and I know what to click next

without thinking too much. *
1 2 3 4 5

Hard to Easy to
navigate navigate

II. Instructions

3. Style Mi offers help/information section about the app and

the creators. *

Yes

No

4. In line with the question #3, can the help/information section

be easily be found? *

Yes

No

5. Style Mi's instructions are easy to understand and remember.

*

Yes

No

III. Illustrations and Layout

6. Style Mi's colour scheme works well for both men and women
who are using the app. *
1 2 3 4 5

Disagree Agree

7. How do you nd the layout of Style Mi's app? *

Your answer

8. How would you describe the graphics and illustrations all

through out the app? *
1 2 3 4 5

Needs more
Amazing!
work

9. Was there any content that was distracting or out of place?

Yes( please answer the next question)

No( skip to question 11)

10. If you answered yes above, list any contents that you feel are
distracting or out of place in the app.
Your answer

IV. Educational Section

11. Style Mi provides information related to the app. *

Yes

No

12.Rate how relevant the information provided is *

1 2 3 4 5

Irrelevant Very relevant

V. Feedback

13. Was there something missing you were expecting to see? If

there is, what is it? *
Your answer

14. List your 3 favourite things about the app. *

Your answer

15. List the things that you would change about the app. *
Your answer