Page 1

Portfolio design for mobile devices AD 611 - Advanced Web Design Matias Ferrari

Portfolio App Showca Loadign Screen

Home Screen


ase Projects

Project Details



Sitemap and Transition effects

Home Scr
















Education Slide up




Resume Publications



f Flip

Open Apps

@ Contact




Colors & Typefaces

Process Blue C

Red 240 Green 130 Blue 25

Red 51 Green 51 Blue 51

Usability Research The term usability, generally refers to how easy or fluent the user

There are three main categories to have in mind when defining us-

interaction is with interfaces.

ability testing methods: Lab-based, remote moderated, remote.

In webdesign, or screen interfaces, usability is these days a matter of

The three of them present advantages and disadvantages that range

ruin or success. In an environment overloaded with different websites

from sample size and resources, to cross-cultural test availability.

and applications, users hardly will give second chances to interfaces that won’t deliver a positive experience.

After chosing one category, the following task is to define how to de-

That is why testing interfaces, and understanding users behavior

fine a positive user experience. There many ways in which an inter-

is a key factor while developing websites and applications. Due to

face might be defined as successful and it will depend on the goal of

the relevance of testing usability and user experiences, there is rich

each of them.

literature that goes in detail and from different perspectives, trying to

For this project [Design Portfolio], the relevance is to quickly deliver

explain what to do in order to maximize or enhance the user expe-

the information that a user is looking for.

rience. These [what to do] are commonly known as Usability Testing

My portfolio intends to function as an online and non-personal ex-


tension of my business card. When I give a business card is usually after a conversation in which I have the chance to say “Hello [...], this

is what I do [...], this is why you can trust me [...], you should contact

Voice Recording

me[...]�. So my goal is to be able to cover the same ground. As my

Another usability test method is to request the testers to navigate

portfolio has a directed goal, there are two ways I found relevant to

through the website or application speaking everything that they do

test if the users are capable of gathering that information.

while performing tasks. In other words, they function as narrators of their experience. They need to state their actions, sensations, frustra-

Click Testing

tions, etc. Every word counts and not just the words, but the silences

In the scenario of web design and mobile app a common technique

and tone of voices too.

to test usability is to perform a list of tasks for the tester, define the optimal and most accurate path, track both time and amount of clicks spent on the achievment of that goal. It will be important also to track where users click or touch to define if there are any distracting or confusing elements within the interface. Test their confidence (rating). Finally, test the difficulty by asking the testers and compare results with the ones provided by other testers.

Usability Test Method Selected: Click Test / Lab based.

The first set of goals is: Find if the designer has ever designed any

The selected method was recorded as a video display of the testers

projects related to poster design. Then read the details for that proj-

using the App. in a provided smartphone Apple iPhone 5, both in-

ect. And assuming that you are looking to hire a poster designer, call

terviewed users were asked about their previous experiences using

this designer.

iPhone 5, which they had no experience, but they owned iPhone 4s

The second sets of goals is: Find if the designer has experience in

with the same iOS version that the used iPhone 5 had.

teaching. Then find if he has any research or publications. Finally, assuming that you want to contact this designer, send him an email.�

To test the level of usability of the application, the subjects were


approached by the moderator and were asked to succesfully accom-

In the two sets of goals, both of the subjects were capable of perform

plish two different settings of tasks. The information provided to the

the set of goals.

subjects was: “This is a test of usability for an App. that functions as the online mo-

For the first set of goals, the minimum amount of clicks to achieve

bile portfolio for a graphic designer, in that context, you will be asked

the final objective, was seven. Both of the users took more than sev-

to accomplish two sets of goals


Subject A used 9 clicks, because there was more than just one project


related to poster design, and the subject felt attracted to investigate

Both users were able to perfor the task, and whithout even asking

more about the second project of poster design. But both evidence

their opinions or feedbacks after the video was stopped, they both

and the subject’s off camera comments, reveal that there was noth-

were strongly positive with the aesthetic and intuitivness of the

ing wrong on the navigation, that she was never lost.

Application. It is important to mention, that Subject A is a grad stu-

Subject B used 12 clicks. He also stated that he was not lost, he was

dent of Interaction Design, with relevant theoretical and professional

just curious about seeing the entire application even if it was not

experience in the field of interactiond and user experience.


For the second set of goals the minimum amount of clicks was again seven, and both of the users took seven clicks to achieve the goal (Although both experienced the issue of the pop-up window that flinto has as default when double-clicking).

Matias Ferrari - Book  

Process book for AD611 - Portfolio Prototype