ux/ui design portfolio - super c ... ux/ui design: visual design clear, simple, by design. problem:

Download UX/UI DESIGN PORTFOLIO - Super C ... UX/UI Design: Visual Design CLEAR, SIMPLE, BY DESIGN. Problem:

Post on 07-Jul-2020

3 views

Category:

Documents

1 download

Embed Size (px)

TRANSCRIPT

  • 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

    DISHES 4.0

    SEARCH RESULTS DISHES

    2.0

    SEARCH RESULTS PLACES

    2.1

    LAUNCH

    WELCOME/ INTRO

    1A

    SPLASH 2A

    PREFERENCES 1C

    SOCIAL LOGIN 1BFIRST LAUNCH

    PERSONAL PROFILE & FAVORITES

    PLACES 4.1

    WHATS GOOD APP MAP

    LAUNCH

    MENU 7.0

    USER PROFILE 5.0

    SETTINGS 9.0

    RESTAURANT INFORMATION

    3.1.2

    DISH PROFILE 6.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 information animated within same screen (3.1)

    EDIT PERSONAL PROFILE

    4.0.1 MODAL

    WINDOW

    EDIT DISH 6.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.1 ANNI-

    MATION

    SEARCH BAR 7.0.2

    ANNI- MATION

    MODAL WINDOW

    LIST OF FOLLOWING

    4.0.3 MODAL

    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

    Restaurant Filter 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 WIREFRAMES UX/UI Design: Wireframes

    Carrier 12:00 PM

    Page Title

    http://www.domain.com Google

    12:45 PMAT&T

    Vegetarian

    1.8 miles

    3445 Mission Street San Francisco, CA 94110

    1.8 miles

    Restaurant Name Gracias Madre

    IMAGE OF RESTAURANT 12

    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 DISH 12

    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 Restaurant Filter Filter

    Gracias Madre Flautas

    1.8 miles

    Veggie Vegan

    Restaurant Dish

    1 Distance miles

    Filter Filter

    Alex's Taste

    IMAGE Alex 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

    Restaurant Filter 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 DESIGN UX/UI Design: Visual Design

  • GAIN: SOCIAL NETWORKING PLATFORM UX/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 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: • 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: SITEMAP UX 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 /

    LOGIN FIRST 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