ux/ui design portfolio - super curiousbesupercurious.com/wp-content/uploads/2015/08/alex...ux/ui...

UX/UI DESIGN PORTFOLIO

CLEAR, SIMPLE, BY DESIGN.

WHAT’S GOOD: MOBILE APP SITEMAP


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


12:45 PMAT&T

Vegetarian

1.8 miles

Sarah L.

Followed Alex M.

Vegan

NEARBY FRIENDS


WHATSGOODFEED

Alex M.

Liked Gracias Madre

Veggie Vegan

Tim S.

Created List "Best Hamburgers"

Gluten

Brandon K.

Followed Alex M.

Vegan



WHAT’S GOOD: MOBILE APP WIREFRAMESUX/UI Design: Wireframes

Carrier 12:00 PM

Page Title


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


PROFILEWHATSGOOD


Carrier 12:00 PM

Page Title


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


WHATSGOODPROFILE


Carrier 12:00 PM

Page Title


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.


WHATSGOODSEARCH




WHAT’S GOOD: MOBILE APP INTERFACE DESIGNUX/UI Design: Visual Design

GAIN: SOCIAL NETWORKING PLATFORMUX/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


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


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

FACEBOOK

INSTAGRAM

TWITTER

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

FACEBOOK

INSTAGRAM

TWITTER

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


CMS DASHBOARD: INTERACTION DESIGN DOCUMENT SAMPLE PAGESUX Design


MIT: REDESIGN OF IN-CLASS AUDIO VISUAL INTERFACEUX/UI Design

Interface Before

Interface After


MIT: REDESIGN OF IN-CLASS AUDIO VISUAL INTERFACEReccomendations


MIT: REDESIGN OF IN-CLASS AUDIO VISUAL INTERFACEUI Design


MIT: REDESIGN OF IN-CLASS AUDIO VISUAL INTERFACEUI Design: Modal Windows

ux/ui design portfolio - super curiousbesupercurious.com/wp-content/uploads/2015/08/alex...ux/ui...

Documents