24
Shaun Burley Unique Experience Designer

Ux portfolio, 4:13:2015

Embed Size (px)

Citation preview

Shaun BurleyUnique Experience Designer

“It’s much easier to design technology around the individual, than to design individuals around the

technology.”

- Me

Shaun Burley

“I want to work somewhere where I can express my passion to make technology easy to learn, easy to use, and easy to love!”

➢ Short-term UX consultancy contracts.

➢ Freelance agile design sprinting.

➢ Opportunity to share his skills while learning new ones on a creative team.

➢ A place to work where his unique background is valued and appreciated.

Creativity

Empathy

Coding skills

Experience

Unique Experience DesignerNew York City, NY

Job seeker and recent graduate of General Assembly’s User Experience Design Immersive course; originally from Denver, Colorado. Looking for:

➢ Combining user goals with business goals and brand identity.

➢ Researching and developing personas to build use-cases and scenarios. ➢ Finding creative ways to prototype and test ideas efficiently.

➢ Proving or disproving my theories about the psychology of human/computer interactions.

Interests:

Shaun is a musician, a dancer, and a thinker who did not realize his passion for problem-solving had a name until he read about “User Experience Design” in an article online six months ago. He was initially drawn into the technology space after deciding that it was time for him to have a hand in creating a future that he wants to live in, rather than struggle just to keep his head above water as each successive wave of innovation came crashing in, reshaping the fabric of society again and again…

Now after three months of intensive training in the theoretical and practical arts of UX, Shaun is confident that he has built a strong enough foundation to begin swimming, and eventually surfing the next wave of technology as it comes into shore!

A little about me…

Full-time ‘experience design’ position.

Denver/Boulder, CO

in New York City, NY.

Project #1Planning + Pregnancy + Parenthood

Project #2Making Urban Biking Easier + Safer.

Project #3Adding context to daily fitness activity.

My Work

+

Project #1Planning + Pregnancy + Parenthood

“My friends and family have been great, but I’m uncomfortable sharing EVERYTHING with them… I still need to find answers somewhere.”

Jessica Wood, 28Entrepreneur Leadville, CO Pregnant - 3rd trimester Married

Anoushka, 42Lactation specialist/couple’s therapist Palo Alto, California

M.S.W., Johns Hopkins U.

Book: The Birds, the Bees, and the Babies

“Couples are reading my book, and they have questions. How can I reach out to

them?”

Olivia Wilson, 39Corporate Attorney New York, NY Actively Trying to Conceive In a Committed Relationship

“Give me straightforward answers without all the craziness.”

Free content funnels into paid

consultations with experts

Each consultation will generate income

for the expert AND for preconceive

KPI (to show to investors): Large

quantity of paid session sign-ups

within the platform provided by

preconceive

BONUS: preconceive can provide this

platform efficiently with a small team

of developers

Business goals:

“Empowering women in the ‘lean-in’

generation”

“Bringing the Tribe back

together”

A hand to hold during fertility treatments,

pregnancy issues, and struggles associated with

becoming parents.

Focus is on well-educated, successful individuals

who must balance their family planning with

their career, and are looking for credible and

thorough answers.

“A trusted friend who can provide answers and

support”

Brand:

Reliable information

Trust in value of company

Available Experts

Credible Experts

Ease of scheduling appointments

Clients want: Experts want:

Ability to reach more clients

Ease of use/lack of technical barriers

Minimal time commitment

Reliable platform

Unobtrusive alerts

Personas, wireframes, sitemap, user journeys, keynote presentations to the client, annotated screens, high-fidelity prototype of the new website.

Using the skeleton of the existing Preconceive Wordpress site as a jumping off point, design an “expert advice” section of the site that encourage visitors to the site to sign up for paid online consultations with experts in different fields related to family planing and pregnancy, design the experience of the actual consultation and the payment flow for these consultations.

One third of a 3-person team of UX designers, with some additional advice from a technical consultant. I was in charge of conducting surveys, setting up interviews and user tests, as well as the lead prototyper on our team.

Busy, professional women who are seeking information about family planning, pregnancy, or parenting need a resource to go to that provides curated information and access to reliable expert advice, without having to wade through unwanted or distracting content.

Problem

Solution

My Role

Deliverables

{{{{

Planning + Pregnancy + Parenthood

Length of project: Two and a half weeks.

fitpregnancy.com dayonebaby.com CricketsCircle.com rsofny.com

Conception/fertility Little-to-none little-to-none little-to-none yes, a lot

Pre-natal(pregnancy) A lot little-to-none some no

Post-natal (new parents) Little-to-none A lot A lot no

Login/profiles No Yes Yes no

Experts section/supportcommunity Forum In-person classes, online articles None

List of doctors, but no way tocommunicate with them.

Support communityOnline "community" emphasizescontent, not discussion or sharing

Focus Pregnancy New mothers and their babiesBaby registry productrecommendations

Fertility and conception (its a fertilityclinic)

Fertility/planning seems to be addedas an afterthought (or forethought,rather)

Some babies on homepage, butother than that very clinical, not verycommunal feeling

Pregnancy/reproductive health websites

Planning + Pregnancy + Parenthood

My Biggest Challenge:Empathizing with the women I conducted user interviews and tests with, as well as with the two female founders of Preconceive was a challenge because I found myself not only having to think differently, but also to consider issues that I’ve purposefully avoided thinking about before.

Home Page32

4

6

5

7

9

10

11

12

13

14

1 The search bar allows the user to search both content (articles) and Experts by name or expertise

2 When the user hovers over a title a drop down with content categories, Experts and Community pops out. Below is the drop down for the planning section.

3 Sign/Up Login - When clicked the Sign Up/Login Element pops out over an opaque version of the screen

When Sign Up is clicked, pop out flips to Sign Up Screen

4 When CONTENT is clicked the screen scrolls down to the top of Trending Articles; When EXPERTS is clicked the screen scrolls down to MEET OUR EXPERTS

9 When the image or name of the Expert is clicked, the user is taken to their profile page

5 This is a hero image linked to articles. When clicked the user is taken to the corresponding article to read

8

6 Within any article image, when the Expert/Author image is clicked, the user is taken to the relevant Expert Profile page

7 This banner indicates the topic of the content i.e. which section of the webpage it comes from Planning/Advice

8 This bar display the articles which are rotating in the carousel. The displayed article is always the thumbnail in the middle. If the user clicks the handle bars the articles change in the order indicated. Otherwise the carousel rotates automatically

10 When the Make an Appointment button is clicked the user is taken to the Appointment Booking Page

11 Each image is clickable - when clicked the user is taken to the corresponding page containing content, subcategories, and featured expert

12 To sign up for the newsletter the user enters their email. When signing up the email is saved to the relevant database*

13 When a magazine is clicked, the user is taken to the corresponding article in the publication listed

14 The social media links are “Follow” links, If clicked the user is directed to follow preconceive. The links underneath take the user to the relevant page - Contact, About, Sign Up, Privacy*

Annotations

1

Planning Landing Page

34

5

2 When clicked, these buttons take the user to the relevant page which hosts ONLY the content for the category

4 From the FEATURED EXPERT the user can go to the Expert profile page by clicking the photo or name; They can Make An Appointment or Tell a Friend - which bring out an email share screen. In addition the user can access All Experts

3 This section features articles published by the expert and/or preconceived content

5 Going down the page Featured Content will be displayed from each Planning (Conception) Category - Getting Started, Tips and Tests, Egg Freezing, Male Fertility, and Advice

Annotations

2

1 This is the breadcrumb - it tells the user from where they came and what page they are currently on - the breadcrumb is clickable

Planning + Pregnancy + Parenthood

Planning + Pregnancy + Parenthood

As I was in charge of building clickable prototypes both to perform user tests with and for our clients to use to demonstrate their product to investors, I chose to use Tumult Hype to assemble and animate the final mockups which were made in Sketch and Omnigraffle:

Check out the prototype here

Project #2

+

Making Urban Biking Easier + Safer.

ProblemUsers of urban bike-share systems cannot easily locate stations with open docks while they are en-route to their destination, nor can they safely navigate using their phone while on the bike.

Making Urban Biking Easier + Safer.

Solution

Pairing with the Citibike mobile app for iPhone, designed a companion app for the Apple Watch that would provide hands-free navigation to stations with open docks, WITH the additional feature of re-routing the wearer if the nearest station with open docks changes mid-ride.

My Role

DeliverablesTechnology and user research reports, infographics, personas, paper prototypes, user flows, screen mock-ups, high fidelity prototype.

Length of project: ten days.

Citibike 10:09 Citibike 10:09

More Stations

Closest station:Broadway & E 22 St5 Bikes 37 Docks

Directions

{

{{{

One half of a two-person design team responsible for the ideation, research, design, prototyping, and testing of our proposed solution.

1

How are bike-share systems used?

Bikeshare users

Commuters

Mainly use while traveling

Urban Explorers

Use in own city

All commuters we surveyed also used bike

shares to venture into less familiar areas to their city.

We sent out a survey to find out more about the different types of people who use bike-share programs, and

what they use them for:

The urban explorer is someone who often uses bikes to navigate around a city.

Our initial steps were to research the problem space, define the user and the problem, and validate our choice of solutions.

Making Urban Biking Easier + Safer.

Contextual interviews with bike-share riders, observations of riders’ behaviors, general survey and follow-up phone interviews, affinity diagrams, contextual exploration.

Define

Research

1

What did riders report using their phones for while riding

through the city…

Directions

SMS/iMessage

Phone calls

Other

Safe riders

Validate

Making Urban Biking Easier + Safer.

Opens Citibike app on Apple Watch

Chooses to get directions to find

bike

Displays map of closest station WITH

bike available

Taps “Directions” to begin navigation

phase

Maps API; Citibike API

Displays destination location and closest station WITH docks

Selects correct destination from list

Maps API

Displays auto-populating list of

possible destinations

Siri; microphoneTaps “Where to” and dictates destination

into watch

Google Maps APIMap with walking

directions to closest station

System

Location services; Citibike API query

Watch DisplayRider Interactions

EMBARKING

PHASE

Citibike 10:09

Opens Citibike app on Apple Watch

Citibike App flow

Speaker driver; Taptic engine;

Chooses to get directions to find

bike

Displays map of closest station WITH

bike available

Displays a map of the rider’s current

position overlaid with direction of next turn,

street of next turn, etc…

Maps API

Taps “Directions” to begin navigation

phase

Maps API; Citibike APIDisplays destination location and station

Selects correct destination from list

Maps APIDisplays auto-

populating list of possible destinations

Siri; microphoneTaps “Where to” and dictates destination

into watch

Google Maps APIMap with walking

directions to closest station

System

Location services; Citibike API query

Watch DisplayRider Interactions

Watch notifies the rider of upcoming turns with audio

cues, haptic cues, and visual cues on

the display

Does this station have available

docks?

Frequent queries to Citibike API to check dock availability at destination station:

If no…

Citibike API query; Taptic engine; audio

driver

Watch notifies rider that it is rerouting to an alternate docking station, one nearby

with docks still available

Turn-by-turn navigation continues

until rider reaches docking station

Location services; Maps API

Prompts rider to either end trip or continue to get

walking directions to their final destination

Taps “Directions” to see how to walk from the docking station to their final destination

Displays map with rider’s position

overlaid with bread crumbs to final

destination

Maps API

Arrives at destination and taps “End trip”

Citibike app closes and watch screen reverts to original

display

EMBARKING

PHASE

RIDING

PHASE

ARRIVAL

PAHASE

{We made sure to design our app in a way that does not require the rider to interact with the app while they are riding, outside of glancing at it and receiving notifications.

*No rider interactions during the riding phase*

App Flow

Technological restraintsMaking Urban Biking Easier + Safer.

The biggest challenge I faced in this project was designing within the constraints of Apple’s Interface Guidelines for third-party app developers for the Apple Watch.

Ultimately, our design diverged into two solutions: one which could be implemented immediately using the current Apple WatchKit guidelines, and one that assumed a more robust set of features will be made available to app developers in the near future.

Static notifications with static images only, now

available.

Future, more robust design with animations and

integration with Maps API.

Interactive Prototype

Making Urban Biking Easier + Safer.

Project #3Adding context to daily fitness activity. fit|city

www.fitcity.nyc

Adding context to daily fitness activity: fit|city

Problem

Solution

My role

Deliverables

The way we measure achievements in human endurance needs to be updated. Individuals should be able to measure their fitness achievements in a way that is more meaningful to them by allowing them to contextualize their normal day-to-day exercise in a way that they relate to.

Fit City visualizes Fitbit user data in a unique and fun way, putting your everyday activity in context to real-world accomplishments. Fit City allows users to see how their activity stacks up against the activity of other users, and will eventually allow them to invite friends to virtual “races” on real-world courses.

UX Designer on a four-person team, along with a product manager and two developers.

Personas, annotated design mock-ups, sitemap/user flow, implemented and launched website with active users: www.fitcity.nyc

Length of project: two and a half weeks.

{{

{

{

www.fitcity.nyc

Adding context to daily fitness activity: fit|city

Surveys

Interviews

Personas

User Journeys

www.fitcity.nyc

Distance Traveled

Floors climbed

Calories burned

FitBit dashboard fit|city dashboard

Adding context to daily fitness activity: fit|city www.fitcity.nyc

One challenge I faced during this project was designing the animations in a way that was as simple as possible for our developers to implement using basic javascript. Our solution was to create each image in a way that allowed for vertical color bars (with a lower z-index than the image) to grow behind a zero-opacity “window” in the image. This involved some creative masking and positioning of elements to pull off…

Adding context to daily fitness activity: fit|city www.fitcity.nyc

Annotated Mock-up

(Assets for this project were built in Omnigraffle and assembled in Hype for prototyping.)

The biggest surprise on this project was that we found people care more about friendly competition with friends than with simply visualizing their own activity. This realization caused us to pivot the focus of fitCity from real-world contextualization to competition and virtual races using our contextual models.By the time of this realization, we had time only to design and implement a weekly leaderboard, which ranks users in all three activity categories we collect data on from their FitBits.

Adding context to daily fitness activity: fit|city www.fitcity.nyc

Thank you for your consideration of my work.

Shaun Burley, Unique Experience Designer [email protected] https://profiles.generalassemb.ly/profiles/shaunburley www.linkedin.com/in/shaunburleyux

I am also a:

Swing dancer…

Clarinet player…

… and World Traveler!