Top Banner
UX/Digital Design Portfolio Sanders Anderson
15
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: UX:Digital Design Portfolio

UX/Digital DesignPortfolio

Sanders Anderson

Page 2: UX:Digital Design Portfolio

Project Brief One

Originally Smart Extreme Inc, SmartExtreme.com, was focused exclusively on the scheduling of kite surfing vacations offered in Brazil (Fortaleza, Paracuru, and Jericoacoara coastline).

The executive staff saw an opportunity to expand beyond the kite surfing sandbox and be a portal for action sport lovers looking for vacations where they could enjoy both “relaxing” and getting their “thrill seeking” on. The new online portal would serve to expand the trip offerings to include additional sports and hobbies and also gain traction for the original kite surfing trips in Brazil.

The UX design for this project had to be all about the process. There was no room for fluff or eye candy on a page. Everything designed had to have a rationale and serve the functionality. The rallying call was simplicity, clarity, and ease of use.

Notes:I’m including a project overview to give a sense of the objectives . These outlines always influence the design decisions.

Why the Smart Extreme project?This is not an example of my nonprofit, public advo-cacy work but it is a great example of UX design and project flow; and that’s why I selected it.

Page 3: UX:Digital Design Portfolio

Home Page

Direct to Site Facebook AdGoogle PPC Ad

Select Sample Trip

Availability

Book

Activity & LocationSamples

User Flow

Notes:I wrote this to show I have the skills and can assess the who, what, and why before the design process starts.

Background For years, action sports travel was thought to be an exclusive club of privileged trustafarians. Since the mid-1990s, however, a new type of traveler is on the rise. One who is more aware of the world, knowing what happens in one part of the world is not isolated. Regional economies are now linked to world economies.

User Profile The Smart Extreme traveler minimizes ego and maximizes passion and experience. She/he makes an effort to be responsible and ethical while supporting on the ground local businesses rather than big box international travel outfits.

Page 4: UX:Digital Design Portfolio

DETAILS

Provided Wireframes

Notes:Wireframes guide the process but shouldn’t necessarily lock the designer in. Freedom has to be given to insure the best solution.

Page 5: UX:Digital Design Portfolio
Page 6: UX:Digital Design Portfolio

TRIPS: 17 MATCHING RESULTS YOUR SELECTION

Czech Republic Thick forests, open meadows, clear lakes, and medieval villages—all criss crossed...

View Details

Iceland Winter AdventureWhen Icelanders hear “winter’s coming,” hibernation is the last thing from their minds...

View Details

Journey in PortugalFrom the culturally rich city of Lisbon to the sun-drenched Algarve, join us...

View Details

< Prev 1/4 2 Next >

What do you want to do?

Location?

Let’s Go!

Czech Republic - Prague

Czech Republic – PragueThick forests, open meadows, clear lakes, and medieval villages—all criss crossed by trails and cycle paths. Ag-nimpe lam quam quatis et volut mo cor aut plic teceatur? Qui te vitat ulluptat-ur?

Availability Map

UX Design

Notes:For multi device sites I prefer to work out how the phone UX will work. It’s then much easier to expand for tablets/browsers.

Page 7: UX:Digital Design Portfolio

LOCATION DETAILSAVAILABILITY

Availability is based on the following factors including agnimpe, lam quam quatis, et volut mo, cor aut. Qui te vitat ulluptatur? Ur magnat alisquam autes dus enet maio. Qui rectota a que ad ut:

• quis parios explatem• ectumen ectiosam eum• ant inusapeliti• magnat alisquam• quatem eosam

Map Your location is in the middle of everything and close to all things interesting and noteworthy. Agnimpe lam quam quatis et volut mo cor aut plic teceatur? Qui te vitat ulluptatur? Ur magnat alisquam autes dus.

Ready to Enjoy Prague?

Arrival Date MM-DD-YYYY

Depart Date MM-DD-YYYY

Notes:I prefer to leave the generic phone images out of the design process. The design is not about the phone it’s about the phone’s screen.

Page 8: UX:Digital Design Portfolio

What do you want to do?

Location?

Let’s Go!

Notes:Everything on the landing page has to entice, engage, and invite. That means the photos, colors, and even the language...

Page 9: UX:Digital Design Portfolio

Project Brief Two

Although SoupCycle had managed to build a loyal base with over 150,000 organic soup deliveries, they were still perceived as a small operation. The business was overdue marketing refresh. I was tasked with developing a complete brand identity, promotional collateral, and improved UX design for their new website.

What brand perceptions need to change:• Size “people think were a small operation” Need to communicate we are bigger, especially for growth• 150,000 Deliveries• Our presentation needs to be grown up• Simplify the Identity

Value Benefit HierarchyOne: FlavorTwo: ServiceThree: Quality

Notes:I’m including a project overview to give a sense of the objectives . Our project team was very clear about making sure we had a compass for going forward.

Why the SoupCycle re-brand project?SoupCycle is an environmentally friendly business that local sources organic produce for all their soup and deli offerings. Small changes = impact.

Page 10: UX:Digital Design Portfolio

Before: Really?

Page 11: UX:Digital Design Portfolio

Referrers/Triggers:Tastings, word of Mouth

Values for design: Convenience, Quality, Sustainability ORDER/

PREFERENCES CHECKOUT DELIVERY

$

SOUPCYCLE:USER FLOW

WHO ARE YOUR USERS?

SOUPCYCLECUSTOMER SUPPORT

Determine delivery area by ZIP code to rely less on user cognition

Capture emails for customers outside of service areas for future expansion.

Home page: focus on customer signup with navigation to public content.

IN SERVICE AREA

OUTSIDE SERVICE AREA

UX NOTES

QUESTIONS GOING FORWARD:

Optimize experience based on most popular orders?

Demographics based on ZIP Codes? Surveys? Interviews?

Home versus Office accounts?

CLARIFY:-what comes in a meal

-what are add-ons?

- difference between standing order and one-time order

USER TESTING OPPORTUNITY:Test ordering with prototype

CHECKOUT VIA ACCOUNT PAGE

USERS CAN ALSO ACCESS THROUGH ACCOUNT PAGE:- Change Order- Track preferences

USER TESTING OPPORTUNITY:Set preferences in prototype

DELIVERY CONFIRMED THROUGH EMAIL

ORDER CHANGE TRIGGER IN EMAIL

AMELIA ABREU UX ameliaabreu.com

GET STARTED

Page 12: UX:Digital Design Portfolio

After the rebrand: AHH...

RGB149 / 196 / 76

HEX95C44C

CMYK47 / 1 / 97 / 0

GREEN ORANGE EGGPLANT

RGB220 / 87 / 59

HEXDC573B

CMYK8 / 81 / 89 / 1

RGB63 / 81 / 89

HEX3F5159

CMYK76 / 57 / 50 / 31

Email

Password LogIn

NEW TO SOUPCYCLE? SIGN UP TODAY

Welcome to SoupCycleWe’re lovers of soup and avid cyclists who believe you deserve wonderful, healthy, and organic meals delivered to you. We started SoupCycle in 2008 when we cycled soup to seven close friends and neighbors. The soup was a hit and word spread like wild soupfire. Since our first deliveries we have made:

Over 150,000 Deliveries of Organic Soup.

Choose your City

Portland Corvallis

Weekly organic soups to home or office.

RGB149 / 196 / 76

HEX95C44C

CMYK47 / 1 / 97 / 0

GREEN ORANGE EGGPLANT

RGB220 / 87 / 59

HEXDC573B

CMYK8 / 81 / 89 / 1

RGB63 / 81 / 89

HEX3F5159

CMYK76 / 57 / 50 / 31

Email

Password LogIn

NEW TO SOUPCYCLE? SIGN UP TODAY

I WANT SOUP HOW IT WORKS MORE GIFTS

Page 13: UX:Digital Design Portfolio

1 2 3 4 5

RGB149 / 196 / 76

HEX95C44C

CMYK47 / 1 / 97 / 0

GREEN ORANGE EGGPLANT

RGB220 / 87 / 59

HEXDC573B

CMYK8 / 81 / 89 / 1

RGB63 / 81 / 89

HEX3F5159

CMYK76 / 57 / 50 / 31

Email

Password LogIn

NEW TO SOUPCYCLE? SIGN UP TODAY

RGB149 / 196 / 76

HEX95C44C

CMYK47 / 1 / 97 / 0

GREEN ORANGE EGGPLANT

RGB220 / 87 / 59

HEXDC573B

CMYK8 / 81 / 89 / 1

RGB63 / 81 / 89

HEX3F5159

CMYK76 / 57 / 50 / 31

Email

Password LogIn

NEW TO SOUPCYCLE? SIGN UP TODAY

Vegan (feeds 2) $17.50

28 ounces of our amazing vegan soup, fresh green

salad, side dressing (that you’ll love) and two

servings of local bread. Check out the sidebar to

the right for next week’s vegan option.

(2-3 Servings)

Chef’s Choice (feeds 2) $17.50

28 ounces of our scrumptious soup, fresh green

salad, side dressing (that you’ll love) and two

servings of local bread. Every week we give you

a fourth soup choice that is a “safe” bet. Check

the sidebar for next week’s option. The soups are:

Creamy Tomato Basil, Peanut and Brown Rice

Stew, Chicken and Rice and Everything Nice, and

Pot of For Goodness Sake. (2-3 Servings)

Vegetarian (feeds 2) $17.50

28 ounces of our amazing veggie soup, fresh green

salad, side dressing (that you’ll love) and two

servings of local bread. Check out the sidebar to

the right for next week’s veggie option.

(2-3 Servings)

Add

Add

Add

Meaty (feeds 2) $17.50

28 ounces of our amazing meaty soup, fresh green

salad, side dressing (that you’ll love) and two

servings of local bread. Check out the sidebar to

the right for next week’s meaty option.

(2-3 Servings)

Add

Deli Salad $10.00

28 ounces of our weekly deli salad.

Examples include Chicken Tarra-Gone with the

Wind, Southwestern Sweet Potato & Cauliflower

and Caprese with Reduced Balsamic.

Add

Weekly organic soups to home or office.

I WANT SOUP HOW IT WORKS MORE GIFTS

Next

1 2 3 4 5

Weekly organic soups to home or office.

I WANT SOUP HOW IT WORKS MORE GIFTS

Vegan (feeds 2) $17.50

28 ounces of our amazing vegan soup, fresh green

salad, side dressing (that you’ll love) and two

servings of local bread. Check out the sidebar to

the right for next week’s vegan option.

(2-3 Servings)

Chef’s Choice (feeds 2) $17.50

28 ounces of our scrumptious soup, fresh green

salad, side dressing (that you’ll love) and two

servings of local bread. Every week we give you

a fourth soup choice that is a “safe” bet. Check

the sidebar for next week’s option. The soups are:

Creamy Tomato Basil, Peanut and Brown Rice

Stew, Chicken and Rice and Everything Nice, and

Pot of For Goodness Sake. (2-3 Servings)

Vegetarian (feeds 2) $17.50

28 ounces of our amazing veggie soup, fresh green

salad, side dressing (that you’ll love) and two

servings of local bread. Check out the sidebar to

the right for next week’s veggie option.

(2-3 Servings)

Add

Add

Add

Meaty (feeds 2) $17.50

28 ounces of our amazing meaty soup, fresh green

salad, side dressing (that you’ll love) and two

servings of local bread. Check out the sidebar to

the right for next week’s meaty option.

(2-3 Servings)

Add

Deli Salad $10.00

28 ounces of our weekly deli salad.

Examples include Chicken Tarra-Gone with the

Wind, Southwestern Sweet Potato & Cauliflower

and Caprese with Reduced Balsamic.

Add

Next

1 2 3 4 5

This wayfinding system was developed to reinforce where the user is in the order process while simultaneously introducing some playful iconography.

Page 14: UX:Digital Design Portfolio

Notes:I decided to include this to show even when there is “no budget” I have proven to be adapt-able and still produce viable work. Wordpress.

Page 15: UX:Digital Design Portfolio

Thank you for taking time to look at my work. I am a passionate creator of truth. I embrace fear as a friend, apathy as an enemy, and perseverance as my lover. Step by step, cut by cut, I press on. Not to be held back by a limitation consciousness, or any other consciousness based on fear. I will create things that matter for causes that matter. I will focus not just on the fruit of my labor, but also on creating meaningful experiences.

Need an inspired, skilled and passionate designer? I can be reached at: [email protected]