ADRIANA CERROTTI UXD

Welcome to my portfolio!

UX design icon
UXD
Frontend icon
UID/CODING
Illustration icon
ILLUSTRATION
Animation icon
ANIMATION
UID & Coding

Styling, Visualization, and Coding

I have a passion for designing graphical interface that would interact with data!

Card image cap
Sandusky Community Library Project (Part 2)

Website re-design project.

  • UID
  • Visual Design
  • Hi-Fi Sketch Prototype.
Explore the project.
Card image cap
MY UI PROJECTS AT DRIBBBLE

Check my prototypes, icons, and other UI designs projects at Dribbble.

  • UI Design
  • Sketch
  • inVision
  • AdobeXD

Visit my dribbble portfolio .

Card image cap
INTERACTIVE QUIZ

This is an interactive quiz. I designed and developed it. It tests people's knowledge about HTML and demonstrates my coding skills.

  • UI Design
  • Responsive Hi-Fi Mockup (HTML5, CSS, Javascript, JQuery).

Visit the Quiz page.

Illustration

I highly enjoy illustrating. As a digital illustrator, I use tools such as Painter, Illustrator, Adobe Flash, and Photoshop. I have a background in fine arts from where my abilities as a colorist developed, and a solid drawing foundation that I applied for years to the fields of traditional animation, character design, layout, and storyboard creation. These is a selection of illustrations and infographics.

Card image cap
Children's Book Illustration
See the selection.
Card image cap
Logos, Infographics and Other Illustrations
See the selection

UX Design (UXD)

I am trained to design effective user experiences and workflows. I completed a Master of Science in Information Architecture and Knowledge Management degree with a concentration in UX design. I am passionate about both, visual and interaction design.

Card image cap

The Upper Sandusky Community Library project is a re-design enterprise. It involves two Parts. Part 1, and Part 2 which you'll find on the UI & Coding section of this portfolio. .

Explore the Design process

Card image cap

Reminder X is a reminder app for iPhone and Android phones.

Explore the Design process

Card image cap

Lunch Application designed for parents to order student's lunches online.

Explore the Design process

Card image cap

Redesign of Adriana Cerrotti's app for toddlers and small children.

Explore the Design process

Card image cap

Usability test report on the ability of Papa John’s Pizza website to deliver the best user experience to its clients.

Explore the Design process

Card image cap

Case Study (Content strategy).

Explore the PDF document.

Children's Book Illustration

Book Cover Illustration
Book Cover Illustration
Book Cover Illustration
Book Cover Illustration
Book Cover Illustration
Book Cover Illustration
Book Cover Illustration

Illustrator

(Working with Shadow shapes)

Book Cover Illustration

Logos, Infographics and Other Illustrations

Alphalink Inventory Auditing

Responsive Image
Alphalink Inventory System. Page 2
Responsive Image
Alphalink Inventory Scanning Page 2

Illustration for Report on UX Testing

Responsive Image
Eye tracking. testing Illlustration.

Logo Design

Responsive Image
Responsive Image
Responsive Image
Responsive Image
Responsive Image
Responsive Image

About Me

Adriana Cerrotti

I am...

A UX/UI designer passionate about creating solutions, efficient information architecture, software interaction, and user-centered design from a design thinking approach.


I have a Master’s of Science in Information Architecture and Knowledge Management with a concentration in User Experience Design from Kent State University.


I enjoy working on all areas of the design process, from research to hi-fi prototyping. I am a perpetual learner who loves innovation and is remarkably comfortable with change, uncertainty, and innovation.

Portrait Image

What do I do?

  • UX Design

    I hear and respond to the business' specific needs, and those of the individuals they might target using the following design modality.

    Design process
  • UI Design and Coding

    I have a passion for producing quality responsive websites with exceptional user experience using efficient interface design systems.

    Atomic Design

    Animation

    I have a vast experience in the field of animation, character design and storyboarding.

Interested in Hiring Me?

I'd love to hear about your project!


Lightning RFID
February 2019

I created this project with the purpose of illustrating some of my UI design and coding skills while helping a small start-up company called LightningRFID to design a potential home page. This section of my portfolio is focused more on the graphics and digital design aspects of a product. To explore my user-centered UX design projects and their processes, please visit the UX design section of my website.

    ● UI Design ✓ ● Responsive High Fidelity Mockup (HTML5, CSS, Javascript, JQuery). ✓
Responsive image
Responsive image

Palette

Responsive image

Font Family

Responsive image

Mobile First

SPOON Restaurant
February 2019

I designed this website with the purpose of illustrating my UI design and coding skills. I applied the mobile-first responsive design approach with a progressive enhancement mindset where content was the priority.

Please note, this piece of my portfolio is mainly focused on general aspects of the human-centered experience of the product. To explore my user-centered design projects and their processes, please visit the UXD section of my website.

    ● Responsive, Mobile-first, Web Design (HTML5, CSS, Javascript, JQuery). ✓ ● Logo Design.✓
Responsive image

Mobile First

Responsive image

Palette

Responsive image

Font Family

Responsive image
Responsive image
Upper Sandusky Community Library Re-Design Project (Part II).

User Centered UI and Branding Re-design

About The Project

The Upper Sandusky Community Library re-design project was big. I divided the project into two parts. Part 1 is about the first stages of the UX re-design project, and Part 2 is the continuation (UID and re-Branding). If you are interested in exploring how I arrive at the conclusions that guided this section of the process, I invite you to visit Part I from the UXD section of my portfolio.

Responsive image
Upper Sandusky Desktop UI re-Designed.
Deliverables
    ● Logo Design & Brand voice. ● User Research (Please check UX section for this project) ● UI re-Design. ● IA re-Design. ● Sketches, UI style guide, Wireflow, Wireframes and hi-fi Prototype.
Tools
● Treejack, Sketch, Photoshop, Omnigraffle, and Lucidart.
The Client

The Upper Sandusky Community Library Website
301 N. Sandusky Ave.
Upper Sandusky, OH 43351
(419) 294-1345 | info@upper-sandusky.lib.oh.us


The Problem

The Upper Sandusky Community library's website was technologically outdated. It was difficult for users to find content. The site was not easy to maintain - most particularly because of the lack of funding for the project and the small size of the staff to serve this purpose.

About The Process

This section of the Upper Sandusky Community Library re-design process involved the creation of a new brand image and user interface.

Previous to the re-design of its user interface, I run an iterative process that that involved understanding the user and his/her context, creating and assessing labeling and taxonomy, and finalized with the design of the required wireframes. To learn more about this stage of the process, please visit the UX section Upper Sandusky Library research and IA re-design.

The Original Version of the Website
Responsive image
Responsive image
Website Branding Exploration

I chose to used technics such as cart sorting and bran auditing to make my UI re-design and re-branding desitions. It helped me to distinguish the strengths and weaknesses of the business and plan corrective strategies.

Responsive image
Bad ideas first.
Responsive image
Brand audit and other notes.
Responsive image
Initial cart sorting.
Mood Board

I chose to create a Mood Board, a very helpful practice, especially for the re-branding face of the project. It stimulated my creativity and inspiration. It surfaced feelings that made ideation easier and helped me to improve information recall.

Responsive image
Brand audit and other notes.
UI Design Audit

I performed a quick UI Design Audit to identify user interface problem areas for users in addition to the IA and interaction issues that my research revealed.

Responsive image
Old Version's Home Page UI audit.
Responsive image
Old Version's Collection Page UI audit.
Responsive image
Old Veresion's About Page UI audit.
New Logo
Responsive image
Responsive image
Color Palette
Responsive image
Typography

I chose the famous and widely used sans-serif typeface, the Helvetica or Neue Haas Grotesk. Helvetica has great clarity, no intrinsic meaning in its form and it is a good choice for an accessible website such as a library.

Responsive image
Buttons and Symbols
Responsive image
Responsive image
Photography

Images are great ways to communicate ideas, concepts, and categories. When used with a text they are powerfully effective. Images should relate to the user and the label they represent. These are some of the photos the prototype uses.

Responsive image
The New Navigation

The following is the sitemap of the new navigation design with labeling, taxonomy, and classification adapted to the user’s needs. It illustrates where the high, medium, and low task priorities are accessed. How they related to each other, and how the content distributes within the site. I based my decisions on the research I conducted at the beginning of the re-design project. If interested, you can find it in the UX section of my portfolio.

Responsive image
Wireframe Quick Sketching

It is essential not to jump into the temptation of designing hi-fi wireframes before quick sketching and iterating some tentative options on paper. This step is fundamental to the design process.

Responsive image
Lo-Fi Wireframes
Responsive image
Responsive image
Responsive image
Responsive image
Responsive image
Sketch Prototype

Sketch allows me to create fast prototypes for iterative testing and feedback before jumping into coding and a live product.

Considerations

Maintaining brand consistency was challenging but also an interesting test. A brand must build awareness and create trust and loyalty with users and customers. This is why standards for brand consistency are essential. Given the time and opportunity, I would deep into this section of the project.

The Navigation Structure was an important block of work on this project. Finding the right organization and classification scheme highlighted the importance of knowing our users before making any pertinent decision. Anticipating what the user might do without proper research would be impossible and highly inaccurate.

Upper Sandusky Community Library Re-Design (Part 1)

Content Audit, Information Architecture (IA), Research, Interaction.

Introduction

The Upper Sandusky Community Library re-design project was big. I divided the project into two parts. Part I is about the first stages of the UX re-design process, and Part 2 is the continuation (UID and re-Branding). If you are interested in exploring how I arrived to the first hi-fi prototype, I invite you to visit Part II from the UID & Coding section of my portfolio.

Background

The Upper Sandusky Community Library website had some practical and tested value. However, I suggested to redesign it from the ground up, to help people find objects and information in better ways, and incorporate thematic elements. The site was technologically outdated, had a confusing design with too many inconsistent elements. It should be easy to maintain, but it is not. This is important because of the lack of funding for it, and the small size of the staff to serve this purpose. Then, the goal of my design is to improve the overall website’s functionality.

A good information architecture (IA) design will offer the Upper Sandusky Community Library the opportunity to empower the site’s users by improving their ability to learn and make better decisions, from the site’s organization and content. Good usability depends heavily on effective IA. This concept guided me throughout the realization of this project.

About The Site’s Original State

The site’s main navigation used a hierarchical structure. This kind of organization goes from broader categories of information to more specific ones. Within the body of the homepage, there was a matrix structure, where users were allowed to choose diverse paths. Most pages within the site used a matrix structure (image links, links within the text, etc). The home page’s main organization scheme was a subjective organization, organized by topic.

Some Valuable Aspects of The Original Site
  • The page’s top-down navigation allowed users to start with broader categories and later move deep down into the structure of the page to find my information if desired. As a consequence, the user could predict where to find information on the site.
  • The option of using multiple navigation paths - when these are organized properly - can help the user access the information in diverse ways. It facilitates the user's chances to always reach it.
  • A few pages — unfortunately not enough — used bottom-up navigation, enabling the user to rise to the surface while searching.
  • The site used some supplemental browsing, this was positive because it involved accessing adjunct views of the site.
Suggested Improvements
  • At all times, the user must know where she is, and how she got to the destination. This is a fundamental principle to guarantee easy and fluid navigation. If the user does not know where she is on the site, she cannot know where to go or where she came from. This could be highly confusing to the user.
  • Some additional button-up navigation would enable the users to rise to the surface while searching.
  • The site’s IA was improved by offering to the user diverse navigation options. This was achieved by using a variety of components (navigation systems, searching systems, labeling systems) and browsing aids.
  • To meet a wider variety of needs, supplemental browsing using extra tools improved the site’s efficiency. These tools restructured the content, and content objects, into different guides that help the user find information allowing her to move from one place of interest to another within content elements.
  • The embedded navigation is now more clear and organized. Thanks to the improvements, the users can have more control over the content. As it was, the navigation was often visually incoherent. At certain points, the design did not relate to other pages. This made the navigation confusing. For better comprehension and findability of the content, the site was ordered by visual and content categories.
  • The site needed some essential tools, such as browsing aids. They allow users to better decide where to go. Users now know exactly what is available on the site to make these choices. Now, they can find the items with no effort.
  • Usability depends on good organization. Elements (images, links, and menus) were not properly organized on the original site.
  • The use of images is only recommended when the user can identify them, or when she is familiar with them. Otherwise, it could be confusing. I scanned the site for this kind of issue and found proper images for each case.
  • The homepage needed to include a primary searching option at the top of the page.
  • The pages needed to preserve the site’s graphic design style to avoid confusion, reduce cognitive effort, and easily create a mental model on how to navigate the page.
  • Each page organization needed to be consistent with the other, as it is now.
  • The pages needed a footer navigation.
  • All content should fit in the page and avoid cut texts or images because it confuses the user to think she or he is missing information.
Project Plan
1-USER RESEARCH (Understanding the users and the context)

Before I started the project I worked on better understanding who the user was. This is fundamental to be able to group and label content in ways that would make sense to her or him. It is essential to improve access to information.

Understanding context is equally important to design an IA that would serve not only the people but the business as well. I achieved this through research and development of a shared vision of the project for the design team.

At this stage, the reasons for doing the project were clear. At this point, it should be an agreement among all team members and stakeholders. This is fundamental to measure the impact of any changes. To agree on when to finish the job, when success was achieved, and other similar issues of importance.

Timeline: 2 weeks.

2-INFORMATION Architecture (Content, labeling & Taxonomy)

In this stage, we designed the new IA. We did this by communicating our design decisions using: Content analysis, Classification scheme, and Sitemaps.

Timeline: 1 week.

3-TEST (Assessing Labeling and Taxonomy)

At this point in the process, we assessed the information architecture design decisions using a tool adequate to evaluate taxonomy and labeling (Treejack). This was a team that involved critique, motivated iteration and improved the work.

Timeline: 1 week.

4-Review (Finalization)

At this final stage, we iterated and finalize the work. We analyzed the results and improved the artifacts and design decisions as needed to improve the product to its maximum potential.

Responsive image

Project deliverables

USER RESEARCH - SUMMARY
The Interview
Research Design Goal

The goal of this research is to gain insight into the user' - that individual who uses municipal libraries - behavior, motivations, interests, and decision making. With this purpose, two persons were interviewed at the Gwinnett County Public Library, located at 3480 Duluth Park Ln NW, Duluth, GA 30096. The persons interviewed provided useful information about the users.

Research Design’s Procedure

I performed two phone interviews:

  • Who?
  • Two librarians from the Gwinnett County Public Library.

  • How Long?
  • 10 to 20 minutes long each.

  • About?
  • A set of twelve questions.

Questions:
  1. How would you define your site's primary user?
  2. How would you define your secondary most frequent user?
  3. What other users visit your site?
  4. What kind of information is the most frequently required by all your users?
  5. What kind of task or action is most often performed by the site’s users?
  6. What other popular actions users perform through your site?
  7. What are the most popular researched topics?
  8. Doesthedemandvarythroughtheyear?How?
  9. How does the user look for that kind of information?
  10. Why do they use the Gwinnett County Public Library’s website instead of going personally to the library’s site?
  11. What motivates people to use your library over the Northeast/Spruill Oaks Regional Library at Johns Creek?
  12. What are the most common complaints?
Literature Research
Findings
Responsive image

Source: Library Services in the Digital Age

More Findings

User Needs:

  • People look for updated knowledge in their chosen profession.
  • People look for information relating to better jobs.
  • Students need information to do homework, pass exams, etc.
  • People search for information to enrich themselves and be relevant to their society, career, organization etc.
  • People seek information to learn about their government and country, government policies and plans. And they want to know how it affects them.

Source: The Anatomy of Library Users in the 21st Century

Additional Findings
  • Individuals that are more likely to have visited and used library websites are: women, young adults, higher-educated adults, and parents.
  • The household income is directly proportional to visiting frequency (bookmobile, website, or apps) percentage.
  • People who think of themselves as lifelong learners are the most frequent users.
  • People who think of themselves as liking to gather as much information as they can when they come across something they are not familiar with, and people that think of themselves as looking for new opportunities to grow as a person follow.

Source: Libraries and Learning

Results
General Results:
  • The use of website libraries is becoming more popular than visits to the library.
  • E-books and digital audio, and career and job related subjects are the most popular.
  • Learning new skills, ESOL and other language training, and online education resources are often consulted/requested.
  • Older adults look for recreating activities and events that offer opportunities to socialize.
  • More educated people tend to reach libraries more often than less educated people.
  • Parents are popular library users.
  • People that use libraries are more likely to be technologically literate.
  • Library users see themselves are perpetual learners.
  • Library website users are likely to:
    • Learn to improve job skills
    • Acquire further training
    • Pursue a job promotion or a new job
    • Update their skills
Specific to Gwinnett County Public Library:
    Parents are frequent users. They look for information for their children (events, e- books and learning support) and themselves (job related training). Retired people look for entertaining events, and books. Other users vary. Many adults look for learning support and job related training. The Get Help feature highly used by diverse people. The Visit Us feature is very popular. School calendar relates to more demand of certain books and themes. In general, people are pleased with the site. Adults inquire about job related and skill training opportunities at the library or around the area.
Responsive image
Personas
Responsive image
Responsive image
Responsive image
The Tasks
Responsive image
INFORMATION ARCHITECTURE
The New Navigation Design
The Sitemap

The following is the sitemap of the new navigation design with labeling, taxonomy, and classification adapted to the user’s needs. It illustrates where the high, medium, and low task priorities will be accessed from, how they related, and how the content is distributed within the site. My decisions have been based on the previously mentioned research and analysis of the results.

Responsive image
The Navigation Structure
Organization Scheme

The main type of organization scheme for this website — within a hierarchic organization structure — is ambiguous. It is best for unknown-item searching when users don't know exactly what they are looking for.

Clasification Scheme

The main classification scheme is Topic. It organizes the content based on subject matter. It defines the "universe of content" that the users will expect to find within every area of the website.

Other Clasification

Audience is the other classification I selected. Given the different needs of the three main groups of the audience — per the data researched — I found appropriate to use this classification as well. This project's personas have different needs. It was important to address them by categories that represent them. This way, the user could explore the main general categories, or the group categories that they identify with (adults, teens, kids), when they feel that their needs are specific.

Redundant Access Points

The site’s content must be navigable and locatable onsite and offsite. With the purpose of anticipating what the users might do, based on my research, I ensured that the interface has elements that are easy to access from more than one point to facilitate those actions.

Redundant access content:
  • AGE SPECIFIC: Given the fact that many of the library offerings are age specific, and each of our personas belongs to a particular age group and have different needs, some of the content was classified by age group. For example: adult, teens, kids, etc. Then, some of the content is available not only through the Main menu but also through the age specific section, allowing category boundaries to overlap. It will help the user to find content in more than one place depending of his or her navigation style or preference. These classification (Adults, Teens, Kids) is located on the left side navigation (secondary tasks), as illustrated on the sitemap.
  • LOCATION AND OPEN HOURS: Given the relevance of this content, it will be accessed from several points within the site to assure the user will the information. The body of the Homepage, the Directions to Library button, and the About the Library button. I selected these points of entrance based on the user test analysis.
  • SHARED NAVIGATION ACCESS: As the user moves from page to page’s content, certain elements will remind in place, such as the left side and main navigation, the search feature, signing and login buttons and the footer. They will continue displaying on each page as on their original (homepage’s) location. This will offer the user the option to change paths, or searching directions at any time, while being informed about the location where she or he is.
Wireframe Quick Sketching

It is essential not to jump into the temptation of designing hi-fi wireframes before quick sketching and iterating some tentative options on paper. This step is fundamental to the design process.

Responsive image
Lo-Fi Wireframes
Responsive image
Responsive image
Responsive image
Responsive image
Responsive image
Final Notes

Please note the next part of this project is the re-design of the User Interface (UI) and a brand new face. You'll find the Upper Sandusky Community Library Re-Design (Part 2) in the UI Design & Coding section of my portfolio.

Sketch Prototype
Lunch Money Buddy

Interaction Design

Introduction

For this project, I was challenged to design an app that would conveniently allow parents to order lunch for their children, online. Lunch Money Buddy is a virtual project. It was designed by Kent State University, as part of the M.S. User Experience Design capstone final project, to demonstrate students' UX skills, process development, interaction, and visual design abilities.

Project Requirements:
  1. Sign up for an account using an email and password.
  2. Fund the account to avoid children from bringing cash to the school.
  3. View account, and school menu by child.
  4. Favorite a lunch (and be alerted a night before about it.)
  5. Close the account at any time.
The Process
Step 1:The Plan

To inform content organization, navigation and interaction, I created two User Journeys for each of the two personas based on the user model offered by the "client". I illustrated a range of possible situations and tasks. I chose to use storyboards because they served me in two important ways, to devise and sell my solution and because storyboards bring a vision to life that anybody can grasp and relate to. They also allow us to achieve those "Aha!" moments we expect team members an clients to experience.

Responsive Image
User Journey. Opening an Account. Page 1
Responsive Image
User Journey. Opening an Account. Page 2
Step 2:
Content Structure

Once I defined my user's modalities interacting with the device, I proceeded to diagram the most appropriate content structure for the app. I quickly ideated some alternative structures to organize the app through sketching, and then I crafted a clean flow chart and a sitemap.

Responsive Image
Lunch Money Buddy Workflow Page 2
Responsive Image
Lunch Money Buddy Sitemap Page 2

Step 3:
Comprehensive Wireframe
Once I defined an alternative design for the content organization, the time came to create a complete content wireframe for the app. I designed a Comprehensive Wireframe to reveal content placement and user flow. I documented it. Since this would not be the final diagram of the user interface, but a means to exercise and explore content organization, hierarchy, and user flow, it was crucial at this stage to work using sketching techniques. They offer the advantage of working fast but in an organized and clear way, simple enough to request peer feedback avoiding meaningless distractions.

Check the Comprehensive Wireframe and Prototype.

Responsive Image
Balsamic Wireframe Sketch. Vertical Orientation.
Responsive Image
Balsamic Wireframe Sketch. Horizontal Orientation
Using Web-based Balsamiq Tool

Several patterns and standards influenced my design and guided me through the process of designing this app. I challenged myself to think critically about the UI scheme, giving priority to aspects of the app that I considered more relevant. Usability and learnability played a central role.

For in-depth and detailed documentation about what models influenced my prototype, and why I made the design choices I chose to make, please check my LMB Process Document.

Responsive Image
Balsamic Wireframe Sketch. Vertical Orientation

The Results
Up to this point, for the design of the app, I collected significant amounts of valuable information. However, the application is not ready to be coded yet. Before that, I will need to identify potential problems. Important questions that I have to answer before continuing with the design process are:

  1. Is my user able to accomplish the specified tasks successfully?
  2. Is the time required to accomplish the tasks acceptable to my user?
  3. Is my users satisfied with the experience? Otherwise, what specific changes will I need to make in order to improve the user experience?

To find the answers to these questions I need a medium to high fidelity prototype to test my application.

Testing the App

Up to this point, for the design of the app, I collected significant amounts of valuable information. However, the application is not ready to be coded yet. Before that, I will need to identify potential problems. Important questions that I have to answer before continuing with the design process are:

Lessons Learned
  • Iteration and validation. The time invested in iteration and validation is inversely proportional to the chances of designing an unsuccessful coded product. We should be able to go back to our design over and over again, always with fresh eyes.
  • The first versions should be minimal, and very sketched. This kind of presentation is very inviting to feedback. It allows fast fluent work. It is less susceptible to changes. It is essential to keep the design process rolling.
  • Course-redirection. Designers should be ready and comfortable with course-redirection. They should help clients and peers to be familiar with a design process that is “organic" and welcomes "error."
  • Labels and buttons should have broadly clear and familiar names. Labels that are obvious to us, as designers or developers, might not be as evident to the user. We should avoid assumptions, invest time and carefully look for the precise label to each task we want the user to perform. We should find the right name for each section we want our user to find and enter.
Applications Used to Design this App
  • Photoshop
  • Lucidchart
  • Balsamic
  • Proto.io
Reminder X
Introduction

Reminder X, a startup software company, requested to design a reminder app for iPhone and Android phones. Vera, the company's co-founder, product manager, marketing leader and my main point of contact presented the challenge. She and her co-founder Jorge, who handles engineering, know that they would like the app to be more than a generic to-do list and reminder app. Vera came to me with a blank slate not knowing what the user target was, what kind of problems she will face, and what the solutions to those problems will be. To address my client's concerns and move the project forward, I followed these steps:

Please note, this project's requirements were designed by Kent State University, as part of the M.S. User Experience Design capstone final project, to demonstrate students' abilities and knowledge on usability testing.

  1. I presented a project proposal with a plan: research, design, test, iterate.
  2. I created a persona based on my research to define the design principles accordingly.
  3. I created visual representations to communicate the user's journey.
  4. I designed ReminderX based on the defined principles.
  5. I designed a user test and tested the product with selected participants.
  6. I iterated the design following the test results.

Upon approval of the project proposal, I created a target user persona. Later I defined the appropriated app design principles based on the specified information.

The User
Responsive Image
Persona: Steve.
Responsive Image
Steve's quick rough of his life style story.

Within UX/UI predominantly agile environments, we need tools that allow for fast, efficient collaboration. Sketching is one of them

Stories are the most powerful delivery tool for information, more powerful and enduring than any other art form.

Nancy Duarte
User Research

After defining the design principles and features based on the persona's requirements, I worked on the design process. I created several visual representations (flowcharts, wireflows, and other roughs.) to communicate the user's journey. This kind of material is ideal for critiquing, iterating, and improving the design. I synthesized the user research and proceeded to design the app, and documenting my UX work for the stakeholders.

Visual Representations
Responsive Image
Reminder X wireframes and flowcharts.
Responsive Image
Step by step wireframe representation within the system's flow.
Usability Testing

Then it was time to evaluate the design. I created a usability testing plan to achieve this goal. Participants tested the app using paper kits to interact with the product. The individuals were exposed to scenarios created to monitor the app's performance to detect issues that might need a re-design before going into development.

Responsive Image
Sketch of the first screen.
Responsive Image
Testing kit.
Assessment Report and Results

Next, I designed an assessment report pointing out the design priorities met, design problems, potential unidentified variables, issues with the methodology, and design suggestions. Later on, I would communicate this information to the clients, developers, and other stakeholders. Iteration was, and always is, part of the design process.

Testing Flow and Functionality

This is a simulation of the application's functionality. It is not the final product, but a tool to demonstrate its flow and consistency.

I concluded with a design that satisfied the client's requirements and the user's needs open to further revisions.

“For the things we have to learn before we can do them, we learn by doing them.”

Aristotle
Things I learned

UX designers should focus on what users need rather than what users want. Often these two concepts are not in agreement. However, users always respond positively to good solutions. The solutions that met their needs, and the ones they had not identified.

Esthetics and simplicity should not be competing forces within any design project. Excellent user experience should be the leading factor in the design process. Users will fall in love with functionality, but beauty will only daze them momentarily. Esthetics should be at the service of functionality.

Research results and user testing from numerous samples is useful to identify major consumer annoyances and failures in the product acceptability, as other variables that might become evident as the product becomes familiar to the consumer. However, research results from small samples are extremely valuable most particularly at its early stages.

Iteration is a vital component of User Centered Design. A final product is provisory.

PAPA JOHNS USABILITY TEST

(Ordering Online)

Introduction

This is a usability test report on the ability of Papa Johns Pizza's website to deliver the best user experience to its clients. The goal of this test is to explore the usefulness of the site's navigation and overall performance.

Papa John's Pizza is an American restaurant company with a headquarters in Jeffersontown, Kentucky. It is the third largest delivery restaurant of take-out and pizza food in the entire world. Besides the traditional take-out options, Papa Johns’ Pizza offers to clients the opportunity to order pizza online, through the company’s website.

The company needs to know if the website is usable enough to thrive in the market. To achieve this, they need to evaluate the site once more to detect potential flows. A usability test will determine if the website interface is efficient. The goal is for users to order pizza and complete specified routine tasks that are important to the company, in a satisfactory way.

Please note, this project's requirements were designed by Kent State University, as part of the M.S. User Experience Design capstone final project, to demonstrate students' abilities and knowledge on usability testing.

Document content

This document contains information about the participant’s feedback provided when they performed the assigned tasks, comments about the overall user experience, and recommendations for improvement. It also includes a copy of the scenarios and questions provided.

Executive Summary

Papa Johns is interested in optimizing the product. The company is looking for flaws that might interfere with the proper functioning of the website. The test performed provides insight into the user's experiences while interacting with the product. Papa John’s usability professionals conducted the test.

Overall Characteristics of the test and users:

Three participants were selected using a screener test to isolate the segment of the population with the demographic characteristics of interest in the study. The participants were asked to perform three specific tasks navigating the website using a computer. As participants performed the tasks, the professional testers observed them, took notes, and interacted with them only when it was appropriate. The testers followed precise protocols about the degree of verbal intervention they would use, ethical behavior, and other strategies known as the Golden Rules of Moderating. A screen capture software, Screencast-o-Matic, was used to record the participant’s navigational choices and record his or her gestures, voice, comments, questions and overall reactions. The tests were performed in the last week of September 2016, in the company’s testing room. All participants ordered a pizza online before, but not specifically from Papa John’s Pizza.

Overview of the Results
Methodology

The test administrator contacted potential participants. A screening instrument was designed to isolate the segment of the population that we needed to test for usability. Three participants were selected for the usability test. Once the participants were selected, the test administrator contacted the attendees by emailing them, to inform them of the test planning and confirming their availability and participation. At that point, dates and times for the test were arranged.

Test steps

Before the session started, the test administrator explained the session organization and planning to the participant. At this stage, the test manager used his or her skills to assure the participant felt comfortable, appreciated, and easy. The test administrator explained to the participant that he was not the object of analysis, but the product, assuring the user felt free to make mistakes. The test administrator invited the participant to be as expressive and talkative as possible about every step he or she took. He was asked to express every thought that came to his or her mind while using the product, and every feeling he or she associated with the product and the experience. At this point, the test administrator will ask for the participant consent to be observed and recorded. Before asking the participant to enter the tasks, the test administrator asked him or her some questions that have the intention to get familiar with the participants and explore the user overall purchasing preferences related to our product. Then, the participant was invited to use Google to browse for any pizza places close to his or her area code, to break the ice before starting to work with the intended Papa John’s Pizza website and submerge the user into the tasks. The test lasted between 40 and 60 minutes, depending on the need and willingness of each participant motivation, style, ability and willingness to participate and express his or her feelings and ideas about the website performance and user experience.

The tasks

The test consisted of three tasks designed to make the user navigate certain features of the product with the purpose of observing how fluently the participant could follow each path.

The Tasks:
  1. Ordering Pizza.
  2. Signing up for deals and coupons without registering.
  3. Contacting the corporate office.
The scenarios:

For the participants to engage with the tasks, the test provided an imaginary scenario for each task.

Task 1 scenario:

Imagine that the people you are with are fans of Papa John’s Pizza and that is where you will be ordering the pizza. There are a bunch of people at this party, and you need to order 3 pizzas. Mushroom and Pepperoni. Half onion and half sausage with the light sauce. A specialty pizza (you want some variety).

Task 2 scenario:

You want to sign up for deals and coupons, but you don’t want to register. You just want to give them your email. Can you do this and what do you think you will receive by email?

Task 3 scenario:

Your pizza arrives and it is terrible! Your driver was rude and you are really upset about what just happened. You call the local store, but you get nowhere. You need to contact the corporate office; how would you do that? At the end and in between each task was performed, the test administrator invited each participant to express his or her feelings about the navigation experience. When the test was finalized and the participant had nothing else to add, he or she was greeted and thanked for her collaboration.

The Participants
Responsive Image
Synopsis of Findings

All the participants, 1, 2, and 3, completed all the tasks required, with differences between them at the level of performance, discomfort, and easiness. Only one user’s overall satisfaction was negative. The other participants, in distinct ways, expressed appreciation navigating the product.

Analysis of Tasks

The following is a list of the navigation steps each participant took while performing each task.

Responsive Image
Top highlights about the findings

In general, participants were very pleased with some of the web site features. These are some of the highlights.

Positive highlights about the ordering features The animation feature
Responsive Image
Participant 2 pleased with the animation feature when customizing the pizza.

“Oh, I like how it's baking for me!”

Participant 2

“It's giving me more choices than I usually get!”

Participant 2

“I kind of like the graphic here. It gives me the idea that I can customize it (the pizza).”

Participant 2
Responsive Image
Participant 3 about to customize the pizza.

“It looks good!”

Participant 3
Responsive Image
Participant 1 customizing the pizza.

“That's very simple!”

Participant 1
Comments about the half and half customization
The half Pizza icon
Responsive Image
Participant 1 customizing a half and half pizza.

“That icon could be bigger.”

Participant 1
Responsive Image
Participant 1 customizing a half and half pizza.

“Oh! That's the half of the pizza (icon).”

Participant 1
Responsive Image
Participant 3 customizing a half and half pizza.
Negative Feedback

Participant 3 had a negative perception of the company. He had an unpleasant experience throughout the whole test. Specifically, on task 3, when he was asked to imagine a frustrating delivery experience, he said: “That’s what I would expect of Papa John’s”

Additional comments
User comments about ordering pizza online
Responsive Image
Remarks about the participants
Responsive Image
Participant pizza most common ordering habits
Responsive Image
User feedback about papa john’s pizza web site features
Responsive Image
finding papa John’s pizza coupons within the site
Responsive Image
contacting papa John’s corporate office
Responsive Image
Recommendations
The following are recommendations based on the observation and analysis of the test results:
Follow-up research questions
The following is a suggestion for further research based on the observations and analysis of the test results:
Conclusion

Two of our participants navigated the site with no major trouble. The third participant had several issues navigating the site. In general, all participants, to one degree or another, were positively impressed and satisfied with the customization features.

Beautiful Inside and Out!

A User-Centered Redesign Project

Introduction

Before finishing my Kent State MS degree, I created a series of children books. My goal was to use the knowledge of developmental psychology I had acquired from my Penn State BA degree while putting in practice my illustration skills. As expected, I became critical of my work as my knowledge in user-centered design increased. That is when I decided to go back to the app I had created based on one of those books, to re-design its interface based on the needs of my users. Given the constraints of my financial and time resources, the re-design project went through only one round of iteration. However, I was happy with the results. Then, the material serves the purpose of illustrating my approach to design.

Background

I designed and developed the app for children called Beautiful Inside and Out!, based on one of my children's books: Beautiful!!! Inside and Out (BI & Out). The targeted audience was small children between the ages of 3 and 5.

Responsive Image
Beautiful!!! Inside and Out, the book.
Responsive Image
Sly, the main character of the book and app.

The main goal of this application was entertaining and educating. The design made an emphasis on rhythmic sounds, to help small children develop their ability to identify them. The original application combined colorful pictures with words in a playful way to allow children to interact with the ideas presented.

Responsive Image
The app's old version opening screen.

Children could touch the screen, read and listen to the words, and discover the actions described through the animations played. Children became co-creators of the actions generated from the verses they read.

Characteristics of the App:
  • Touch screen feature that plays great animations to capture children's attention and generate interaction.
  • Easy "read to me" feature, optional on every page.
  • Rhythmic sounds to help children learn and remember new words.
  • Attractive illustrations and a unique character.
  • A bilingual touch (English-Spanish) at the end of the book.
  • A good message about authenticity and joy.
  • Available in iPhone and iPad versions.
  • Easy to use!
Responsive Image
App's screen sample.
Responsive Image
App's screen sample.
The Re-Design of BI & Out
Introduction

In 2012 I designed and developed Beautiful Inside and Out, the app, for both iPhone and iPad. This is an update and optimization of the app. For this project, I played all the design roles within the complete design process. Bellow, I will describe in detail the process characteristics and steps.

The Project's Goal

The purpose of this project is to deliver the best user experience - defined as the greatest satisfaction BI&Out’s users might get from interacting with the particular digital tool. To achieve this goal, I will start answering the following questions:

  • Who is our user?
  • Is the app’s content age appropriate to our target user?
  • Does the app have all the essential features it needs to work properly?
  • What issues require fixing?
  • Is the application easy to use and learn?
The Strategy

I adopted the following design modality to accomplish my goal.

Responsive Image
Design Process

Empathize: To define the app's users, I performed research (contextual research, expert reviews, personas). Based on the information, I built a persona to facilitate the design process.

Define Goals: Based on the information collected from the previous step, I defined the requirements for an optimum children’s app’s user experience. To do it, I used tools such as sketching, storyboarding and wireframing.

Create Solutions: Once the requirements were defined, it became clear what properties and features did not fit them. It was then time to define the corresponding design changes.

Redesign: I made the required modifications to the graphics and content organization, and I re-coded for all necessary changes.

Prototype: I used a prototype to test the app with selected users.

Prototype: An important part of the user experience involves children handling all the different devices. This opens a new round of testing and possible more re-designing. By re-evaluating the project, we could learn and carefully observe how users responded to the new product features. Then, if necessary, we would re-define the goals and Re-design.

Persona
Responsive Image
User Persona: Olivia
Responsive Image
App features
Re-design
Home Screen
Responsive Image
Home screen before.
Responsive Image
Home screen after.
End Screen
Responsive Image
Home screen before.
Responsive Image
Home screen after.
Prototype

For a complete version of the process, please explore the project from a bigger device.

Animation

Traditional and 2D Animation

1-TRADITIONAL ANIMATION

I am an experienced traditional and 2D computer animator. As a traditional animator, I worked for renowned companies such as Walt Disney and Hanna-Barbera on fun and challenging projects such as Disney's Little Mermaid II. One of those projects was Redux Riding Hood, the very first Walt Disney's Oscar nomination for Best Animated Short Film. In addition to that, I animated characters for a number of tv commercials internationally. Besides working as an animator, I worked as a layout and storyboard artist.

Redux Riding Hood

Li'l Elvis Jones And The Trusckstroppers

(Opening Theme Sequence)

1-COMPUTER 2D ANIMATION

I learned Adobe Flash when traditional animation transitioned to computer animation. I enjoyed it so much that I adopted it not only as an animation but a drawing and illustration tool. Thanks to Flash, and action script in particular, I discovered my love for web interaction and coding that brought me to become a front-end developer.

The Thin Line (between Raw and Jiggy.)

Flash Animated Logo

2D Computer Character Animation