Tarrea Tolbert Design Portfolio

D ES I G N P ORTF OLIO UI/UX + V ISUAL D E S I GN

TARREA TOLBERT

Hello, I’m Tarrea.

ABOUT ME

Visual Designer

I am recent graduate from San Francisco State University where I majored in Visual Communication Design.

Dedicated, imaginative, and diligent. I am passionate about user-centered design and creating innovative solutions that can make an impact to society.

I implement design process to effectively complete projects. Main focuses are visual and UI/UX design. I also have a strong understanding of typography and branding.

I am endlessly inspired by others and always seeking to collaborate with creative individuals.

PA G E 3

TARREA

VISUAL DESIGNER (415) 240-2466

TOLBERT

tarrea.tolbert@gmail.com tarreatolbert.site

OBJECTIVE

EXPERIENCE

Imaginative and motivated visual design stu-

IBM

dent seeking a professional design position.

Visual Design Intern

EDUCATION

June 2019 - August 2019 Worked on a multidisciplinary team of 5 as

San Francisco State University

a Visual Designer for 8 weeks to develop a

BS in Visual Communication Design

product relating to AI solution development.

SKILLS Creative thinking Logo Development Branding Typography HTML/CSS

PROGRAMS

Visualized high-fidelity product wireframes through user experience design. Designed professional presentation slide decks.

San Francisco Bicycle Coalition Graphic Design Intern February 2019 - May 2019 Provided direct support to the Communications Designer and Communications Director.

Designed graphics for SF Bicycle Coalition’s

Adobe Illustrator, Photoshop, InDesign,

quarterly newsletter, Tube Times. Conceptu-

Adobe XD, Sketch, Figma, Keynote

alized and designed graphics for SF Bicycle Coalition campaigns and events.

SFSU Design Working Group Graphic Designer January 2019 - May 2019 Worked in a design studio with a team of student designers. Completed several design projects for clients within the SFSU community.

PA G E 4

TA B L E O F C O NT E NTS

6

74

ONTRACK

THINKPLANET

APP DESIGN

APP DESIGN

28

104

FRANKENSTEIN PRINT DESIGN

THE LOUVRE WEBSITE REDESIGN

SAN FRANCISCO BICYCLE COALITION INTERNSHIP

44

117

THE LOUVRE

SCI-ARC POSTER

WEBSITE REDESIGN

POSTER DESIGN

PA G E 5

UI/UX

ONTRACK Many students on campus struggle with managing their time efficiently.

This is mainly due to the fact that most do not use a planner or calendar to remain organized. OnTrack is a time management app that can help students stay organized. The app’s user interface is simple, straightforward, and easy to use.

PA G E 6

PA G E 7

PA G E 8

SKETCHES

After conducting user research (student interviews), I began initial sketches. I wanted to design a mobile application with the student in mind. For example, one feature would be color coded tasks based on a specific school subject.

PA G E 9

PA G E 1 0

WIREFRAMES

I designed wireframes for six screens.

I took inspiration from existing task management mobile applications. For example, tasks are usually organized into different categories. Users are also informed what tasks they have due for the day. Overall, I wanted the user interface to be straightforward and welcoming.

PA G E 1 1

PA G E 1 2

PA G E 1 3

STYLE GUIDE

Icons I incorperated icons for better navigation purposes. The icons correlate with the subject matter displayed on each screen.

Colors I used flat colors to create a welcoming atmosphere

COLOR HEX: A56CAD

for users. Each color can be found throughout the application.

COLOR HEX: 6491CB

COLOR HEX: 4BB863

COLOR HEX: F15D25

COLOR HEX: 2F2F2F

PA G E 1 4

Fonts After doing some research,

PROXIMA NOVA SEMIBOLD

I learned that Proxima

Abcde

Nova is a popular font for mobile applications.

I also used the standard font for Apple, which is SF Pro Display.

S F P R O D I S P L AY R E G U L A R

Abcde PROXIMA NOVA 45PT

Title PROXIMA NOVA 30PT

Heading 1 PROXIMA NOVA 25PT

Heading 2 PROXIMA NOVA 20PT

Heading 3 PROXIMA NOVA 17PT

Body text PA G E 1 5

LOGIN SCREEN

LOGIN FORM Users can input their login information to gain access to the application.

LOGIN BUTTON Users are prompted to press the log in button after inputting the information correctly.

PA G E 1 6

PA G E 1 7

H O M E PA G E

COMPLETION CHECK MARK Users are able to check off each completed task

COLOR CODED SECTIONS Sections are color-coded so that the user can easily organize each task

ADD TASK BUTTON The homepage is where students can add different tasks

PA G E 1 8

PA G E 1 9

PA G E 2 0

A D D TA S K S C R E E N

SECTION OPTIONS Tasks can be categorized into 3 sections: school, work, and home

REMINDERS + CALENDAR OPTION There is an option to implement reminders for each task as well as set them on a specific date

PA G E 2 1

PA G E 2 2

N A V I G AT I O N

SIDE NAVIGATION The sidebar icon displays tabs for the profile, reminders, calendar, statistics, and settings

PA G E 2 3

S T AT I S T I C S PA G E

MONTHLY STATISTICS Users can view statistics to keep track of their productivity for the month

FRIEND CHALLENGES Users can also compete in task “challenges” against friends, which is found below the statistics area

PA G E 2 4

PA G E 2 5

PA G E 2 6

PA G E 2 7

PRINT DESIGN

FRANKENSTEIN Mary Shelley’s Frankenstein covers many themes, ranging from secrecy to monstrosity. Victor Frankenstein struggles with feelings of anxiety and guilt after creating the monster.

The usage of specific fonts, images, and layouts convey various themes in the book. I have illustrated sadness and other moods through a certain perspective to create an immersive experience for readers.

PA G E 2 8

PA G E 2 9

D E S I G N I T E R AT I O N

CHAPTER OPENER For my first book design concept, I explored different variations for the chapter opener.

I wanted to create a dramatic opening with the font. I chose a muted color to set the mood as well.

FONT STYLE Here I began exploring font style for the body paragraph. It is evident that the font size is too large for a standard book.

PA G E 3 0

PA G E 3 1

PA G E 3 2

D E S I G N I T E R AT I O N

CHAPTER OPENER For this concept, I placed the chapter number above the body text instead of placing it seperately on one page.

IMAGE EXPLORATION This is an image I had collaged on Photoshop.

I specifically chose to place the image here to create an immersive experience for readers.

PA G E 3 3

D E S I G N I T E R AT I O N

FINAL CHAPTER CONCEPT Here is the finalized design concept that I used throughout the book.

I collaged different landscapes for all chapters. I wanted each collage to be unique and fit the chapter’s mood.

PA G E 3 4

PA G E 3 5

PA G E 3 6

PA G E 3 7

PA G E 3 8

PA G E 3 9

STYLE GUIDE

Fonts

AVENIR LIGHT

The serif font, Didot is

Abcde

used as the title and heading for the book.

Avenir, which is a sans serif font, pairs well with Didot.

Together, these two fonts create an elegant theme throughout the book.

DIDOT BOLD

Abcde DIDOT REGUL AR

Abcde DIDOT 55PT

Title DIDOT 22PT

Heading 1 AVENIR LIGHT 11PT

Body text

PA G E 4 0

Collages Nature plays a key role by creating a dark and gloomy atmosphere for the reader.

As a result, this book design focuses on elements from nature.

Landscape collages have been applied as chapter openers.

PA G E 4 1

PA G E 4 2

PA G E 4 3

WEB DESIGN

LOUVRE WEBSITE REDESIGN I was given a design challenge as a part of IBM Design’s recruiting process.

I redesigned 3 parts of a website for the world’s largest museum: The Louvre.

I created a seamless experience for someone who has never been to the Louvre before and is curious to learn more information about the famous masterpiece, the ‘Mona Lisa’.

PA G E 4 4

PA G E 4 5

PA G E 4 6

EXISTING WEBSITE

This is the current homepage for the Louvre. Overall, the website lacks informational hierarchy and organization.

As a result, it can be difficult for users to navigate the website. There is also an overwhelmingly excessive amount of links to choose from.

PA G E 4 7

WIREFRAMES

I designed three wireframes for three different parts of the website: homepage, the Mona Lisa, and paintings.

I wanted to keep a clean and minimalist style overall. I took inspiration from existing museum websites.

PA G E 4 8

PA G E 4 9

PA G E 5 0

PA G E 5 1

STYLE GUIDE

Icons I incorperated these icons for better navigation purposes. The icons correlate with the subject matter displayed on the page.

Colors I chose a deep plum color as I associate it with

COLOR HEX: 6B0F1A

royalty and class.

Secondary colors include

COLOR HEX: 9ED3F3

soft white and grey.

COLOR HEX: 999999

COLOR HEX: 0E0004

PA G E 5 2

Fonts

L AT O L I G H T

I used the serif font

Abcde

Playfair Display as the main header style throughout the website.

L AT O R E G U L A R

This font is elegant and

Abcde

works well with the Louvre’s overall theme.

L AT O B O L D

I chose the sans-serif font Lato for legibility and it’s clean style.

Abcde L AT O B L A C K

Abcde P L AY FA I R D I S P L AY R E G U L A R

Abcde P L AY FA I R D I S P L AY B O L D

Abcde PA G E 5 3

H O M E PA G E

ORGANIZED NAVIGATION BAR I decluttered the existing website’s navigation bar and reduced the amount of links.

PA G E 5 4

INTERACTIVE BANNER I wanted to create an immersive experience for a first time visitor, so I designed a banner where users can virtually “explore” the museum.

PA G E 5 5

H O M E PA G E

CATEGORIZED INFORMATION I categorized the most important information found on the website and placed them at the top of the page.

PA G E 5 6

GROUPED INFORMATION I grouped secondary information and placed them in an interactive “carousel. ” Users could click on the arrows to view more information about different topics PA G E 5 7

H O M E PA G E

ICONS There is a lot of information found on the homepage. By implementing icons, this helps users better understand what they are reading.

PA G E 5 8

USEFUL LINKS SECTION I placed all of the Louvre’s useful links in one section. I created informational hierarchy by placing arrows next to each link PA G E 5 9

H O M E PA G E

DONATE, FEEDBACK, SUPPORT I believe that these three sections are not emphasized enough in the existing website. As a result, I placed them together in one section and used artwork to make the links more visually appealing.

PA G E 6 0

ORGANIZED FOOTER I organized the Louvre’s existing footer into different sections, making it easier for users to navigate.

PA G E 6 1

PA I N T I N G S

SLIDE SHOW This banner would be an interactive slide show where users can click on the arrows to view different artwork.

PA G E 6 2

VIEW ARTWORK Users can click on the magnifying glass to view the artwork up-close.

PA G E 6 3

PA I N T I N G S

FILTER FEATURE Users can filter what kind of painting they are looking for with the filter feature.

PA G E 6 4

EXPAND AN IMAGE Users have the option to expand an image to view it at higher quality.

PA G E 6 5

MONA LISA

WORKS I designed links that would help users navgiate the page.

PA G E 6 6

PA G E 6 7

MONA LISA

DESCRIPTION SECTION I organized the information into more legible “chunks” so that the user does not get lost while reading.

PA G E 6 8

INFORMATION SECTION I used a bold sans-serif typeface that felt professional and elegant PA G E 6 9

MONA LISA

ICONS I used icons and typographic hierarchy to display the most to least important information on the page.

PA G E 7 0

PA G E 7 1

PA G E 7 2

PA G E 7 3

UI/UX

THINKPLANET ThinkPlanet is an attachment to the existing nonprofit, Polar Bears International. Polar Bears International is an organization that advocates for the conservation of polar bears and their habitat.

The overall objective of this app is to better inform students about global warming and its effect on humans and polar bears.

PA G E 7 4

PA G E 7 5

PA G E 7 6

SKETCHES

ThinkPlanet is mainly influenced by educational flashcards and children’s games about climate change.

I wanted to design an app that is minimal yet visually engaging so that children would be interested in using it.

PA G E 7 7

PA G E 7 8

WIREFRAMES

Initially, I designed wireframes for six screens that would encompass the mobile application.

ThinkPlanet consists of four sections: Lessons, Activities, Quizzes, and Profile.

PA G E 7 9

PA G E 8 0

PA G E 8 1

STYLE GUIDE

Icons I created icons to each section of the application’s dashboard. I designed a home, trophy, pencil, and profile icon.

Colors I used different shades of blue and some hints of

COLOR HEX: 80C4EC

green as I felt these colors worked well with ThinkPlanet’s

COLOR HEX: 4797D2

overall theme.

COLOR HEX: B9D685

COLOR HEX: 9ED3F3

PA G E 8 2

Fonts Raleway is an approachable and friendly sans-serif font.

R A L E W AY B L A C K

Abcde

Raleway works well as a kid’s mobile application.

R A L E W AY S E M I B O L D

Abcde R A L E W AY M E D I U M

Abcde R A L E W AY B L A C K

Abcde

PA G E 8 3

LOGIN SCREEN

LOGO This is the offical logo for ThinkPlanet.

The logo shows the Earth being held up by a hand.

BUTTONS Students can tap the log in button or create a new account through their school’s affiliation.

PA G E 8 4

PA G E 8 5

H O M E PA G E

IN PROGESS COURSE Students can keep track of lessons that are in progress.

LESSONS Students in grade levels 4-8 would be required to complete lessons and quizzes found in ThinkPlanet.

PA G E 8 6

PA G E 8 7

IN PROGRESS COURSE

TOPICS Lessons contain different flashcards based on topic.

FLASHCARDS There are “True or False” flashcards and “Key Words” flashcards found in each lesson.

PA G E 8 8

PA G E 8 9

FLASHCARDS

IMAGERY To make this game more appealing to children, each card would display a different image based on the topic.

USER INTERFACE Students must select either True or False in order to complete the lesson.

The cards are swiped left after selecting an answer.

PA G E 9 0

PA G E 9 1

PA G E 9 2

D O N AT E

FEED A POLAR BEAR After completing a lesson, students are given the option to donate to help feed a polar bear.

Students would most likely have to ask a parent or guardian permission first before donating.

PA G E 9 3

PA G E 9 4

PROFILE

STUDENT INFORMATION Students go up each level based on their quiz score.

DEFINITIONS Students can review key words that they may have saved from a lesson.

PA G E 9 5

A V AT A R C U S T O M I Z AT I O N

POLAR BEAR DRESS UP Students have the option to edit their own avatar. This avatar is visbile throughout the application.

In the future, I plan to design another screen where there are different styles that the student can choose from.

PA G E 9 6

PA G E 9 7

PA G E 9 8

PA G E 9 9

Any Questions?

PA G E 1 0 0

Feel free to contact me. tarrea.tolbert@gmail.com (415)-240-2466

PA G E 1 0 1