December 2016: UX Portfolio

S A R A H PAT RI CK PORTFOLIO

ABOUT ME

STORY OF A DESIGNER + MAKER

Sarah is a visual designer and illustrator with a Bachelor of Fine Arts in Design from Cornish College of the Arts. Before pursuing a career in design, she spent four years studying psychology, language, and design studies at Seattle Central College, and five years working in sales, marketing, and visual merchandising. Her expertise focuses on designing beautiful digital and analog experiences with an emphasis in the user experience methadology and principles. With a strong interest INFO@SAR AHPATRICKDESIGN .COM

in designing for digital and analog experiences, she is dedicated to her craft in visual design and product design.

SAR AHPATRICKDESIGN .COM

Her personal projects include designing and producing 12231 76TH AVE S , SE AT TLE WA 98178

a whimsical quirky line of paper products for the female demographic,

with

hand

bound

notebooks,

notepads,

stationery, and paper accessories. In 2016, her brand Habitude Paper & Co. led to her collaboration with Marmont Hill Collective, where she licenses fine art prints to the mass market and lifestyle decor market.

FRYE MUSEUM

CHALLENGE

DELIVERABLES

Sitemap & Redesign Sitemap Prototype Visual Design

DESCRIPTION

Ovidus mil mostrum quiatia dolestium sum si volorumendae sum quas eatis ped molore ad ulparum que nonsecaesed magnam dolorem porempos aperum dit voluptatqui corendi picae. Namus ullanti bersped et qui dolorae doluptatur? As maion ratur si aut aut late vid ero explabo. Labo. Nem reperibus magnis utemque officitaerum none corerum nimolut expelist, quodiciis etur?quamusani ratio offictat Mus nias dem aut facient, quatur, vendi te nimolum earchil ignisqui Bearia sequo dis dia dolum que quatem eosae nobis evendis magnis et, nobitibus rerro con cum enissit ea simolorest, nosa venissi ut evel is aut lab in paria sunto doluptatur reped ellaccatur?

NOTES

Interactive Publishing II, Cornish College of the Arts Visual Communication Design, 2015

CURRENT SITEMAP

A sitemap of the (at the time) current sitemap of the Frye Museum website’s exhibitions page created with omnigraffle.

NEW SITEMAP

A sitemap I created while working with my class to understand the overall new layout of the hierarchy and architecture of website.

RE S U LT S

After working through the discovery phase, our class moved quickly into showing mockups of visual design comps of the website. Many iterations were shown throughout the design phase, yet were thrown out too early on without enough critique from the class on what worked and what did.

WHAT WENT WRONG

After working through the discovery phase, our class moved quickly into showing mockups of visual design comps of the website. Many iterations were shown throughout the design phase, yet were thrown out too early on without enough critique from the class on what worked and what did.

LEARNINGS & REFLECTION

This project taught me the importance of rapid prototyping early on, utilizing wireframes and sitemaps in the beginning stages of the project kickoff, and also the value of not throwing out early iterations before redesigning the project all over again. Throughout the prototyping process, I realized that the interactions had a greater effect on the website usability, and found that simplified interactions that led the user to relevant content to them was important when working with a website with this large amount of content and scale.

FRYE MUSEUM LANDING PAGE

Features whats new and upcoming, current exhibitions, upcoming dates and events and a large hero image that increases conversion rates with large visual appealing imagery of artwork on display.

FRYE MUSEUM CALENDAR PAGE

Calendar Page with large hero image, simple navigation bar, the use of typography to show scale of importance of date and title of event.

O N E B US AWAY

CHALLENGE

DELIVERABLES

Mobile App Design User Flow Chart Wireframes Low Fidelity Mockups High Fidelity Mockups

DESCRIPTION

OneBusAway is a app that saves time for busy commuters who ride the bus in the Puget Sound Region. It removes the pain of planning your transit trip with convenient access to nearby routes, real-time transit information, and walking distances to save transit user’s time and energy.

My role was to research and design a new UI for the existing app. The process involved researching existing visual assets and issues, defining the problem, making a moodboard, creating a user journey map and multiple iterations of flowcharts.

I decided to research the current issues in the app, including data accuracy in arrival/departure times, efficiency in the dashboard, and visual aesthetics has a major effect on usability and legibility. I also looked at other competitors in the market, and decided to incorporate solutions to the visual aesthetics and hierarchy of information by adding color coding, and walking distances.

NOTES

Dynamic Info Design, Cornish College of the Arts, 2015

PROBLEM

Dark overlays and not enough focus on the important

BEFORE: SCREEN S TATES

information put into the thought of the current design,

Screenshots of the One Bus Away interface used

inspired a heavy emphasis on bold colors, icons, and

as reference material and analysis of problems

modern aesthetic.

in the design during the discovery phase.

WHAT WORKED

My role was to create a list of user questions that I surveyed from multiple students on my campus who currently used the app for daily travel from home to school and work. By defining my initial discovery phase with real specific questions, I was able to increase my production process rather quickly, and understand the pain points in the current interface design.

O N E B US AWAY TA SK FLOW

Tools used in mapping the interactive model was through a list of defined usecases from research in the discovery phase, and technical tools such as adobe illustrator cc.

O N E B US AWAY HIGH FIDELITY MOCKUPS

USER QUES

The final deliverable with multiple screen state

Where am I going today?

iterations showing the user flow in finding nearby

Do I have multiple route options?

Can I bookmark and share my travel p

Will I receive notifications before my b

O N E B US AWAY HIGH FIDELITY MOCKUPS

CO N TAC T GET IN TOUCH VIA SOCIAL MEDIA OR VISIT MY WEBSITE AT SAR AHPATRICKDE SIG N .COM

@SAR AH _ PATRICK BEHANCE

@SAR AHPATRICKDE SIG N LINKEDIN