Upload
others
View
10
Download
2
Embed Size (px)
Citation preview
UX/UI DESIGN PORTFOLIO
CLEAR, SIMPLE, BY DESIGN.
WHAT’S GOOD: MOBILE APP SITEMAP
CLEAR, SIMPLE, BY DESIGN.
UX/UI Design: Sitemap
Problem: What’sGood’s v1.0 design had a lot of information but no directional flow leaving the user confused. Additionally the main use case and value proposition was unclear amidst numerous features. Finally, there was no aesthetic cohesiveness which left the user with a confused and unsettled brand image.
Solution:Established trust in the What’sGood brand by making the product fun and easy to navigate with a clear and consistent aesthetic.
Enabled Users to: • Understand What’sGood’s value proposition• Intuitively understand the product through
its visual simplicity• Naturally incorporate application into their
lives with “social stickiness”
Work Overview:• UX: Sitemap• UX: high fidelity wireframes• UX: Usability testing research with 5 people• UX: Usability findings report • Graphic: Style Guide• UI: 34 screens and modal windows
FEED 1.0 WHAT'S GOOD DISHES 3.0
PERSONAL PROFILE & FAVORITES
DISHES4.0
SEARCH RESULTS DISHES
2.0
SEARCH RESULTS PLACES
2.1
LAUNCH
WELCOME/INTRO
1A
SPLASH2A
PREFERENCES1C
SOCIAL LOGIN1BFIRST LAUNCH
PERSONAL PROFILE & FAVORITES
PLACES4.1
WHATS GOOD APP MAP
LAUNCH
MENU 7.0
USER PROFILE5.0
SETTINGS9.0
RESTAURANT INFORMATION
3.1.2
DISH PROFILE6.0
FIND MY FRIENDS
8.0
* Home screen* Default to dishes nearby
Conditional
Fundatmental
GLOBAL PAGES
WHAT'S GOOD PLACES 3.1
TOGGLE
TOGGLE
ANNI-MATION
* User profile does not change.
KEY
* Additional informationanimated within samescreen (3.1)
EDIT PERSONAL PROFILE
4.0.1MODAL
WINDOW
EDIT DISH6.0.1MODAL
WINDOW
ADD A DISH 7.0.1
ADD A LOCATION 3.1.1
MODAL WINDOW
LIST OF FOLLOWERS
4.0.2MODAL WINDOW
ADVANCED SEARCH
2.0.1ANNI-
MATION
SEARCHBAR7.0.2
ANNI-MATION
MODAL WINDOW
LIST OF FOLLOWING
4.0.3MODAL
WINDOW
ACESS PHONE CAMERA
4.0.4
TOGGLE
Carrier 12:00 PM
Page Title
http://www.domain.com Google
12:45 PMAT&T
Vegetarian
1.8 miles
RestaurantFilter Filter
Gracias Madre
1.8 miles
Veggie Vegan
Restaurant
1 Distance miles
Filter Filter
PLACES DISHES
Places
Pick your poison. Enter filter or food.
Feed Whats GoodMe SearchBest
WHATSGOODSEARCH
Feed Whats GoodMe SearchFavorites
Carrier 12:00 PM
Page Title
http://www.domain.com Google
12:45 PMAT&T
Vegetarian
1.8 miles
Sarah L.
Followed Alex M.
Vegan
NEARBY FRIENDS
Feed Whats GoodMe SearchBest
WHATSGOODFEED
Alex M.
Liked Gracias Madre
Veggie Vegan
Tim S.
Created List "Best Hamburgers"
Gluten
Brandon K.
Followed Alex M.
Vegan
Feed Whats GoodMe SearchFavorites
CLEAR, SIMPLE, BY DESIGN.
WHAT’S GOOD: MOBILE APP WIREFRAMESUX/UI Design: Wireframes
Carrier 12:00 PM
Page Title
http://www.domain.com Google
12:45 PMAT&T
Vegetarian
1.8 miles
3445 Mission StreetSan Francisco, CA 94110
1.8 miles
Restaurant Name Gracias Madre
IMAGE OF RESTAURANT12
V Filter Filter Filter
(415) 807 - 7879
1.8 miles
Ingredients
Lettuce, diced Tomatoes, red onions, rice, avocado, tortilla, black beans, sour cream, corn, love
Dish Name - Veggie Burrito
IMAGE OF DISH12
V Filter Filter Filter
PROFILEWHATSGOOD
Edit Ingredients...
Edit Filter Edit Filter Edit Filter
Feed Whats GoodMe SearchBest
PROFILEWHATSGOOD
Feed Whats GoodMe SearchFavorites
Carrier 12:00 PM
Page Title
http://www.domain.com Google
12:45 PMAT&T
Vegetarian
1.8 miles
Dish RestaurantFilter Filter
Gracias Madre Flautas
1.8 miles
Veggie Vegan
Restaurant Dish
1 Distance miles
Filter Filter
Alex's Taste
IMAGEAlex M.
Veggie Vegan
Mission
Feed Whats GoodMe SearchBest
WHATSGOODPROFILE
Feed Whats GoodMe SearchFavorites
Carrier 12:00 PM
Page Title
http://www.domain.com Google
12:45 PMAT&T
Vegetarian
1.8 miles
RestaurantFilter Filter
Gracias Madre
1.8 miles
Veggie Vegan
Restaurant
1 Distance miles
Filter Filter
PLACES DISHES
Places
Pick your poison. Enter filter or food.
Feed Whats GoodMe SearchBest
WHATSGOODSEARCH
Feed Whats GoodMe SearchFavorites
CLEAR, SIMPLE, BY DESIGN.
CLEAR, SIMPLE, BY DESIGN.
WHAT’S GOOD: MOBILE APP INTERFACE DESIGNUX/UI Design: Visual Design
GAIN: SOCIAL NETWORKING PLATFORMUX/UI Design: Visual Design
CLEAR, SIMPLE, BY DESIGN.
Problem: A client was creating a social network to connect people and share resources around the topic of poverty alleviation. However, there was initially no visual design for a complex and interchangeable widget like components and an unclear value proposition.
Solution:I created a research and interview plan for user testing in order to better understand the user base (final results were incomplete because this phase of the project was put on hold).
Design an overall aesthetic that was informed by the need to have numerous interchangeable widgets on multiple pages. I used this to create initial mocks, the main dashboard and designs for 5 additional pages for a custom coded Drupal platform.
Work Overview:• UX: Usability research and the creation of
the usability interview • UI: Initial 2 mock-ups for two different
experiences and functionality • UI: Overall design style for all components
based on a grid formula• UI: Design of 5 main pages including landing
and profile
CLEAR, SIMPLE, BY DESIGN.
CONTENT DISCOVER AND DATA ANALYTICS DASHBOARDUX/UI Design: Visual Design
Problem: A client created a content discover and data analytics platform for its Fortune 500 clients but its design lacked basic web functionality and a thoughtful user experience.
Solution:I updated the current design to incorporate web and responsive functionality, sliced all assets, made the platform “white label-able” and articulated these changes to the developers via Pivitol Tracker and CSS. Additionally I updated the UI for a cleaner look that showcased the vast amount of content without being overwhelming.
I created a live style guide for the development team that details typography, colour palate, links and buttons to keep the design consistent and customizable for a white label product.
Work Overview:• UX: User flow• UI: Updated current interface for 2 main
dashboards + a variety of modal windows• UX: Paired with developers to code CSS
within Bootstrap, an active style guide and sliced out assets
• UX: Designed interaction and design for active/inactive/hover states
CLEAR, SIMPLE, BY DESIGN.
CMS DASHBOARD: SITEMAPUX Design
Problem: A client was looking to create their own content management system to be able to publish complex content for its Fortune 500 clients.
Solution:I conducted some light usability testing, discussed product and needs with stakeholders and created the sitemap for the product. From there I created high fidelity wireframes and a 40 page interaction design document detailing the functionality, development acceptance criteria and flow for 8 screens and 10 modal windows.
Work Overview:• UX: Sitemap• UX: High fidelity wireframes for and interaction design document:
• Information architecture: sitemap• Global overview • Definition of terms• Wireframe navigation and flow• Wireframes: Acceptance criteria
• UX: Usability testing + usability findings report
EVENTS
LAUNCH
WELCOME/INTRO
DASHBOARD HOME SCREEN
ACCOUNT CREATION /
LOGINFIRST LAUNCH
TIMELINE LABS SITE MAP
LAUNCH
LEFT NAVIGATION
CONTENT TEMPLATES
CREATE A NEW EVENT
EVENTS
MANAGE
MANAGE EVENTS
CMS LAUNCH SCREEN
PANEL 1: FIND CONTENT
BROWSE (TOPICS)
SAVED BIN
SOURCES
PANEL 2: CHOOSE CONTENT
TWITPIC
YOUTUBE
VINE
MY COMPUTER
SEARCH BAR
PANEL 3: SELECTED CONTENTADD
MODAL WINDOWSCREEN OPTION
ADD TITLE CHOOSE TEMPLATE
CHOOSE EXISTING EVENT
CONTENT POPULATES
SELECT
ACTION SELECT
ADD TO LOCATION IN TEMPLATE
PANEL 4: PREVIEW/PUBLISH CONTENT
INDIRECT ACTION
DIRECT ACTION
KEY
PICK FROM POPULATED CONTENT
SEARCH BY TERMS/TYPE
CONTENT TEMPLATES
TWITPIC
YOUTUBE
VINE
MY COMPUTER
WELCOME
DUPLICATE
EDIT
ARCHIVE
BUILD
SEARCH EVENTS
MANAGE BINS
MEDIA TYPE BUTTONS
DRAG AND DROP
SAVE TO BIN
SOURCE (URL)
DELETE DELETE EVENT CONFIRMATION
SAVE TO BIN/CREATE NEW
BIN
CATEGORY NO CONTENT
SEE MORE EVENTS
EDIT EVENT
NO SEARCH RESULTS
BIN NO CONTENT
SOURCES NO CONTENT
REORDER
CLEAR, SIMPLE, BY DESIGN.
CMS DASHBOARD: INTERACTION DESIGN DOCUMENT SAMPLE PAGESUX Design
CLEAR, SIMPLE, BY DESIGN.
CMS DASHBOARD: INTERACTION DESIGN DOCUMENT SAMPLE PAGESUX Design
CLEAR, SIMPLE, BY DESIGN.
MIT: REDESIGN OF IN-CLASS AUDIO VISUAL INTERFACEUX/UI Design
Interface Before
Interface After
CLEAR, SIMPLE, BY DESIGN.
MIT: REDESIGN OF IN-CLASS AUDIO VISUAL INTERFACEReccomendations
CLEAR, SIMPLE, BY DESIGN.
MIT: REDESIGN OF IN-CLASS AUDIO VISUAL INTERFACEUI Design
CLEAR, SIMPLE, BY DESIGN.
MIT: REDESIGN OF IN-CLASS AUDIO VISUAL INTERFACEUI Design: Modal Windows