CLEAR, SIMPLE, BY DESIGN.
UX/UI DESIGN PORTFOLIO
WHAT’S GOOD: MOBILE APP SITEMAP UX/UI Design: Sitemap Problem:
WHATS GOOD APP MAP LAUNCH
FIRST LAUNCH
WELCOME/ INTRO 1A
LAUNCH
SPLASH 2A
SOCIAL LOGIN 1B
PREFERENCES 1C
MODAL WINDOW
GLOBAL PAGES SEARCH RESULTS DISHES 2.0
FEED 1.0
* Default to dishes nearby
ANNIMATION
TOGGLE
WHAT'S GOOD DISHES 3.0 ADVANCED SEARCH 2.0.1 TOGGLE
USER PROFILE 5.0
SEARCH RESULTS PLACES 2.1
MODAL WINDOW
* Home screen
DISH PROFILE 6.0
MODAL WINDOW
EDIT DISH 6.0.1
ANNIMATION
KEY Conditional Fundatmental MODAL WINDOW
RESTAURANT INFORMATION 3.1.2
ADD A DISH 7.0.1
MODAL WINDOW
TOGGLE
MODAL WINDOW
PERSONAL PROFILE & FAVORITES PLACES 4.1
ADD A LOCATION 3.1.1 WHAT'S GOOD PLACES 3.1
PERSONAL PROFILE & FAVORITES DISHES 4.0
ACESS PHONE CAMERA 4.0.4
* Additional information animated within same screen (3.1)
* User profile does not change.
FIND MY FRIENDS 8.0
SETTINGS 9.0
EDIT PERSONAL PROFILE 4.0.1 LIST OF FOLLOWERS 4.0.2 LIST OF FOLLOWING 4.0.3
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.
MENU 7.0 ANNIMATION
SEARCH BAR 7.0.2
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: • • • • • • CLEAR, SIMPLE, BY DESIGN.
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
WHAT’S GOOD: MOBILE APP WIREFRAMES UX/UI Design: Wireframes
AT&T Carrier
12:45 12:00 PM PM
AT&T Carrier
Page Title
WHATSGOOD SEARCH
http://www.domain.com
AT&T Carrier
http://www.domain.com
12:45 12:00 PM PM
AT&T Carrier
Page Title
WHATSGOOD PROFILE
Google
PLACES
12:45 12:00 PM PM Page Title
WHATSGOOD PROFILE
Google
http://www.domain.com
WHATSGOOD FEED
Google
http://www.domain.com
Alex M.
DISHES
IMAGE
Veggie
Vegan
Pick your poison. Enter filter or food.
Veggie
Alex's Taste Gracias Madre Vegan
Veggie Vegetarian
Vegan
Vegetarian
1.8 miles
Restaurant
Restaurant Dish Filter
Filter
1 Distance miles
V
Filter
Vegetarian
3445 Mission Street Ingredients San Francisco, CA 94110 1.8 miles Edit Ingredients... Lettuce, diced Tomatoes, red onions, rice, avocado, tortilla, black beans, sour cream, corn, love Filter
Filter
Vegan
Liked Gracias Madre
Restaurant Gracias Madre Dish Name Name - Veggie Burrito
Gracias Madre Flautas
1.8 miles
Filter
FRIENDS Alex M.
Places
Veggie Vegetarian
Google
NEARBY
12
IMAGE OF RESTAURANT IMAGE OF DISH
Mission
12:45 12:00 PM PM Page Title
Tim S. Gluten Created List "Best Hamburgers"
Filter
Brandon K.
1 Distance miles
Vegan Followed Alex M.
Restaurant Filter
V
Dish Restaurant FilterCLEAR, SIMPLE, BY DESIGN.
Filter
1.8 miles
EditFilter Filter (415) 807
-
Filter Edit Filter 7879
Edit Filter Filter
Filter
Sarah L.
1.8 miles
1.8 miles
1.8 miles Vegan Followed Alex M.
Me
Feed
CLEAR, SIMPLE, BY DESIGN.
Whats Good
Favorites Best
Search
Me
Feed
Whats Good
Favorites Best
Search
Me
Feed
Whats Good
Favorites Best
Search
Me
Feed
Whats Good
Favorites Best
Search
WHAT’S GOOD: MOBILE APP INTERFACE DESIGN UX/UI Design: Visual Design
CLEAR, SIMPLE, BY DESIGN.
GAIN: SOCIAL NETWORKING PLATFORM UX/UI Design: Visual 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 DASHBOARD UX/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:
CLEAR, SIMPLE, BY DESIGN.
• 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
CMS DASHBOARD: SITEMAP UX Design TIMELINE LABS SITE MAP LEFT NAVIGATION
LAUNCH
FIRST LAUNCH
WELCOME/ INTRO
ACCOUNT CREATION / LOGIN
CREATE A NEW EVENT
CMS LAUNCH SCREEN
ADD TITLE
EVENTS LAUNCH
WELCOME
DASHBOARD HOME SCREEN
EVENTS
CHOOSE EXISTING EVENT
CHOOSE TEMPLATE
CATEGORY NO CONTENT PANEL 1: FIND CONTENT
BROWSE (TOPICS) BIN NO CONTENT
CONTENT POPULATES
PANEL 2: CHOOSE CONTENT
NO SEARCH RESULTS
MEDIA TYPE BUTTONS
SEARCH BAR
SEARCH BY TERMS/TYPE
SAVED BIN DUPLICATE
MANAGE EVENTS
CONTENT TEMPLATES
TWITTER
TWITTER SAVE TO BIN
FACEBOOK
SEARCH EVENTS
SEE MORE EVENTS
CONTENT TEMPLATES
SOURCES NO CONTENT
INSTAGRAM
PICK FROM POPULATED CONTENT
BUILD
TWITPIC
SAVE TO BIN/ CREATE NEW BIN
SOURCE (URL)
INSTAGRAM
ADD
MANAGE BINS
PANEL 3: SELECTED CONTENT
TWITPIC
ADD TO LOCATION IN TEMPLATE
PANEL 4: PREVIEW/ PUBLISH CONTENT
SOURCES YOUTUBE
MANAGE
FACEBOOK
YOUTUBE REORDER
DRAG AND DROP
ARCHIVE
DELETE
DELETE EVENT CONFIRMATION
EDIT
EDIT EVENT
VINE
VINE
MY COMPUTER
MY COMPUTER
KEY
SELECT ACTION SELECT
SCREEN
OPTION
MODAL WINDOW
DIRECT ACTION
INDIRECT ACTION
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 CLEAR, SIMPLE, BY DESIGN.
CMS DASHBOARD: INTERACTION DESIGN DOCUMENT SAMPLE PAGES UX Design
CLEAR, SIMPLE, BY DESIGN.
CMS DASHBOARD: INTERACTION DESIGN DOCUMENT SAMPLE PAGES UX Design
CLEAR, SIMPLE, BY DESIGN.
MIT: REDESIGN OF IN-CLASS AUDIO VISUAL INTERFACE UX/UI Design Interface Before
Interface After
CLEAR, SIMPLE, BY DESIGN.
MIT: REDESIGN OF IN-CLASS AUDIO VISUAL INTERFACE Reccomendations
CLEAR, SIMPLE, BY DESIGN.
MIT: REDESIGN OF IN-CLASS AUDIO VISUAL INTERFACE UI Design
CLEAR, SIMPLE, BY DESIGN.
MIT: REDESIGN OF IN-CLASS AUDIO VISUAL INTERFACE UI Design: Modal Windows
CLEAR, SIMPLE, BY DESIGN.
