1 of 16

�Douglas Siqueira

UX/UI PORTFOLIO

CASE STUDY

2 of 16

Assets for my Portfolio

FONTS

daFont

Google Fonts

ICONS

Flaticon

Icon Finder

PHOTOS

Unsplash

Freepik

Dribbble

3 of 16

TORONTO

Website redesign and improvement of the pet adoption process.

I found that THS customers had a bad experience with waiting time during the adoption process.

HUMANE SOCIETY

4 of 16

Toronto Humane

Society

PROJECT SUMMARY

Improve user experience and reduce the amount of time people spend at the shelter. Maximizing online interactions on the website.

MY RESPONSIBILITIES

  • Research & Analysis
  • UX Design
  • Wire-framing
  • Art Direction
  • UI Design

5 of 16

Toronto

Humane Society

MOBILE PROTOTYPE

Bring the adoption process for mobile, following the same structure and visual of the desktop website.

GOAL

To become the adoption process 100% Virtual. Saving time for users.

MY ROLE & RESPONSIBILITIES

  • Research & Analysis
  • UX Design
  • Wire-framing
  • Art Direction
  • UI Design

TIMELINE

3 weeks deadline.

Adoption Process

Booking a Virtual Interview.

6 of 16

Toronto Humane Society

01.WHAT I DID

02. THE PROCESS

03. USER RESEARCH & FINDINGS

04. IDEATION DESIGN

05. USABILITY TESTING & FINDINGS

06. INTERACTIVE PROTOTYPE

07. COMPLETE CASE STUDY

In this research project, I planned and conducted interviews with stakeholders, users and potential users in Toronto about Pet adoption. I did want to understand how they feel about the adoption process and get more information through our 17 questions survey.

4

1-1 Interviews

1

Survey

With 24 Participants.

1

Stakeholder Interview

7 of 16

Toronto Humane Society

01.WHAT I DID

02. THE PROCESS

03. USER RESEARCH & FINDINGS

04. IDEATION DESIGN

05. USABILITY TESTING & FINDINGS

06. INTERACTIVE PROTOTYPE

07. COMPLETE CASE STUDY

Introduction

The objective of this project is to redesign the

Toronto Humane Society website.

We aim to increase the number of adoption cases and raise awareness through creating a better user experience with The Toronto Humane Society’s website.

Improving website navigation and overall design will increase ease of use and efficiency and help reduce the amount of animals in need of homes in the city of Toronto.

8 of 16

After I analyzed

THS website, I found:

  • Bugs in their full banner.
  • Crowded home page with repeated information.
  • Crowded menu navigation with duplicated links.

Toronto Humane Society

01.WHAT I DID

02. THE PROCESS

03. USER RESEARCH & FINDINGS

04. IDEATION DESIGN

05. USABILITY TESTING & FINDINGS

06. INTERACTIVE PROTOTYPE

07. COMPLETE CASE STUDY

Heuristic Evaluation

9 of 16

Defining the problem

In my Research and Survey,

I noticed that most of the participants not enjoy staying

too much time during the adoption process, filling forms, interviews and payments.

Toronto Humane Society

01.WHAT I DID

02. THE PROCESS

03. USER RESEARCH & FINDINGS

04. IDEATION DESIGN

05. USABILITY TESTING & FINDINGS

06. INTERACTIVE PROTOTYPE

07. COMPLETE CASE STUDY

10 of 16

Toronto Humane Society

01.WHAT I DID

02. THE PROCESS

03. USER RESEARCH & FINDINGS

04. IDEATION DESIGN

05. USABILITY TESTING & FINDINGS

06. INTERACTIVE PROTOTYPE

07. COMPLETE CASE STUDY

User

Journey

11 of 16

Adoption Process (Approved application)

Toronto Humane Society

01.WHAT I DID

02. THE PROCESS

03. USER RESEARCH & FINDINGS

04. IDEATION DESIGN

05. USABILITY TESTING & FINDINGS

06. INTERACTIVE PROTOTYPE

07. COMPLETE CASE STUDY

User

Flow

12 of 16

Adoption Process (Denied application)

Toronto Humane Society

01.WHAT I DID

02. THE PROCESS

03. USER RESEARCH & FINDINGS

04. IDEATION DESIGN

05. USABILITY TESTING & FINDINGS

06. INTERACTIVE PROTOTYPE

07. COMPLETE CASE STUDY

User

Flow

13 of 16

I conducted a few user testing in a Low Fidelity Prototype, to validate the User Flow, where my goal was to see how the user would react thought our virtual adoption process.

I also got feedback from them to improve even more the adoption process.

Some of our modifications, based on User’s feedback, was to create the “Adoption Process Page” where the user can understand how this process works before their start the application.

Toronto Humane Society

01.WHAT I DID

02. THE PROCESS

03. USER RESEARCH & FINDINGS

04. IDEATION DESIGN

05. USABILITY TESTING & FINDINGS

06. INTERACTIVE PROTOTYPE

07. COMPLETE CASE STUDY

User test on

Low Fidelity Wireframe

14 of 16

The art direction was initialized following the brand's visual identity.

The black colour was used as one of the main ones to bring the air of modernity, to match the new functionality of the site. The green colour refers to hope and nature, while yellow exalts joy and motivation.

Toronto Humane Society

01.WHAT I DID

02. THE PROCESS

03. USER RESEARCH & FINDINGS

04. IDEATION DESIGN

05. USABILITY TESTING & FINDINGS

06. INTERACTIVE PROTOTYPE

07. COMPLETE CASE STUDY

UI Inspiration

15 of 16

With the user’s feedbacks and studying the brand’s style guide and redesigning it, the final Prototype was developed successful and was tested again by users with positive feedbacks.

Toronto Humane Society

01.WHAT I DID

02. THE PROCESS

03. USER RESEARCH & FINDINGS

04. IDEATION DESIGN

05. USABILITY TESTING & FINDINGS

06. INTERACTIVE PROTOTYPE

07. COMPLETE CASE STUDY

High Fidelity

Prototype

16 of 16

Toronto Humane Society

01.WHAT I DID

02. THE PROCESS

03. USER RESEARCH & FINDINGS

04. IDEATION DESIGN

05. USABILITY TESTING & FINDINGS

06. INTERACTIVE PROTOTYPE

07. COMPLETE CASE STUDY

I wrote a case study about this project to show the design process and share more about some of the challenges we overcame.

Clicking in “READ THE CASE STUDY” you will be redirected to the Original Case Study of this project. There you can find more information and go deeper about this project.

Thanks so much.

Douglas Siqueira – UX Designer