Product Design

FLTRD

Fltrd is a high-end mobile app with the ability to easily find, explore and purchase artisanal coffee.

View case study

TIMELINE October 2018 - March 2019

MY ROLE UX Designer

TOOLS Pen&paper, Adobe XD, and Origami Studio

Overview

Fltrd is a high-end mobile app with the ability to easily find, explore and purchase artisanal coffee. This community is where coffee lovers can discover, rate and buy coffees.

Objective

The goal was to create a phone application that a user can get to know any coffee in a snap, share your coffee tasting experiences, and Fltrd’s market gives personalized coffee recommendations, connect with your coffee loving friends or make new ones, discover great coffee and learn while you taste

APPROACH & DELIVERABLES

My task was to design the end-to-end experience of purchasing coffee and the coffee scanning feature.

I’ve Researched everything you need to know, like country of origin, farmer, varietal, processing method, roaster, roast level and much more, for the user can discover, scan, rate and buy coffees.

Process

Research

Context study

User pain & gain points

Competitive analysis

Analysis

Problem statement

Use cases

Executive summary

Ideation

Feature narrative

Design principle

Journey map UX flow

Design

Low-fidelity wireframes

High-fidelity wireframes

Interactive prototypes

Feedback

Stakeholder reviews

Field testing

Designer critiques

Iterations

Detail fixing

Stakeholder presentation

Research

Context Study

My design process involved running and facilitating a series of design workshops upfront with the client and their customers to understand the problems and issues with sharing a coffee tasting experience.

The concept of the solution was to create an experience that invites users to search and discover roasters’ locations and time availability that will fit their busy schedules, turning what was a tedious task, and streamlining it into a simple effortless flow.

User pains

User gains

Exploration is burdensome
in both time and money

The user gains a cheap and quick way to
explor independent roasters

Transitioning is intimidating

Smoothly guides transitional users into
the complex world of artisanal coffee

Analysis Paralysis

Clearly presents the most relevant info needed
to quickly make an informed decision

Completitive Analysis

We examined similar and competing apps to determine areas of potential improvement.

Analysis

Problem statement

After examined similar and competing apps and Fltrd does not have a Market that gives personalized coffee recommendations, a way to connect their your coffee loving friends or make new ones and a quick way to know any coffee in a snap.

Use cases

Creating epics and user stories helped us zero in on key features.

Epics

User Stories

Customizable search to suit users'
coffee needs

As for user, I need a way to filter my coffee by country of origin to find coffee from Ethiopia

Discovery feature to find new
types of coffee

As a coffee drinker, I'd like to get recommendations
on new coffees from cofes and curators

Education about coffee flavors
and categories

As a novice coffee drinker, I need to be able to scan
images of coffee bags to see info about the coffee

Executive summary

Fltrd is an geosocial networking service , database and mobile application where users can buy, rate, scan and review roasters and share these check-ins and their locations with their friends

Ideation

FEATURE NARRATIVE

Get to know any coffee in a snap
- Users can take a picture of any coffee label and the app will identify it.
- User can see any coffee’s average ratings and reviews.
- Users can find everything they need to know, like country of origin, farmer, varietal, processing method, roaster, roast level and much more.
Share your coffee tasting experiences
- Users will rate and review the coffees you taste.
- Coffee rating and reviews will help other users to decide if those coffees are right for them and drink better coffe
A market that gives personalized coffee recommendations
- Fltrd’s coffee recommendation engine suggests unique coffees to users based on historical rating and purchase data.
- the ability to buy recommended coffees
Connect with your coffee loving friends or make new ones
- Follow user’s friends to see what they are drinking and see how they rate & review other coffees.
Discover great coffee
- Users discover new coffees to enjoy.
- User find out what coffees are trending and explore fltrd’s curated weekly picks.
Learn while you taste
- About origins, varietals, processing methods, roasting, brewing and tasting.

DESIGN PRINCIPLE

As a high-end application, we designed Fltrd to reflect a clean, sleek, and sophisticated feel. Our color palette was inspired by the cherry bean.
locations with their friends

JOURNEY MAP UX FLOW

Based on the feature narrative, we began to construct the user experience flow, taking into consideration the following Creating the workflow allowed us to focus on key user journeys throughout the app:

First time user experience vs. returning user experience
Customer vs. augmented realities flow and their differing technologies
Different partners involved and their differing terms of use
Differing city regulations (e-commence state taxes and logistics)
Other map elements (i.e. map markers, city zones, operations/rebalancing hubs)

Design

LOW-FIDELITY WIRE FRAME

HIGH-FIDELITY WIRE FRAME

Fun times with my fellow UX teammates Rachel and Renee

INTERACTIVE PROTOTYPE

1–4. ONBOARDING + SIGN IN

5. QUESTIONNAIRE

5. QUESTIONNAIRE (ORIGAMI STUDIO)

Feedback

STAKEHOLDER REVIEW

FIELD TESTING

Gorilla field testing with my teammate Anna, this was a long day!

DESIGNER CRITIQUES

Severity Scale: 0-4(less critical -> more critical)

UX Testing

| Findings & Results

List of issues organized form least to most severity

Severity: 1

Participants didn't know the favorite icon (heart) was tappable because it was already filled in with a color.

Severity: 2

Not everyone thought flavor tags were tappable.
Few Participants understood the meaning of 'features' in the filtering section.

Severity: 3

Some participants were unsure if the scan feature would automatically take a photo of a coffee bag.

Severity: 4

None of the participants understood the purpose of the AR wand icon everyone thought it was some sort of editing tool.

THANKS FOR SCROLLING!

Before you go, if you’re interested… check out this article I published on how I created the Origami Prototype.

Product Design

Iphone App, it's a collaboration tool between
Salesperson and sales manager to track
Inventory, sales, revenue and etc.

View case study

TIMELINE

February 2019 - March 2019

MY ROLE

UX Designer | Big Design Thinking

TOOLS

Pen&paper, Adobe XD, Balsamiq Wireframes, draw.io, Invision Freehand. Adobe Illustrator Draw for iPad, Slack

Overview

I have incorporated Design Thinking mindsets, behaviors, and tools to help Cariloop discover the Importance of customer-centered design, and discover the impact it can have on growth and building customer-centric and collaborative cultures.

OBJECTIVE

Provide a solution that In 5 minutes or less, a Cariloop Coach will provide caregivers with the reliable resources needed from their interactive knowledge toolbox platform.

APPROACH & DELIVERABLES

My task was to design experience tailored to the happiness of coaches

I’ve Researched everything you need to know, like caregiver pain points, coaches pain points, insurance processing method and competitive advantages and disadvantages

Process

Empathize

Define

Ideation

Prototype

Validate

Feedback

Empathize

QUESTIONNAIRE

Questions:

Name, Age, Profession of subject.
How would you feel if you become the sole caretaker of a loved one?
How would you begin the process?
What do you think the biggest fears if you took on this role?
Have you ever been the sole care of a loved? If so, what were your fears when you took on this role.
Have interviewee watch intro video for Cariloop and browse website
How do you feel Cariloop would help?
What are your biggest concerns with the platform Cariloop?
Do you know if your place of employment offers anything like this as a benefit?

Define

Cariloop Stakeholder Interview CL by Mykal Morton on Scribd

Cariloop Interview 2 People by Mykal Morton on Scribd

Interview Number 3 by Mykal Morton on Scribd

Personas

By conducting empathy maps from their personas we were able to understand what the client and coach says, thinks, does and feels. This was able to give us further insight into the pain they could be experiencing.

Empathy Map

Within the journey map of Cariloop, we were able to see our pain points in play and where they fell into each stage. Using the information from our personas, empathy map, and journey map we were able to ask ourselves how might we?

Ideation

Uncover unexpected areas of innovation

1. How might we..

2. It's Kinda like..

3. Prioritizing Big Ideas

4. Ideas creation

5. Impact Chart Finished Product

6. Need statment

How Might We.... Such as Provide research, communicate effectively, keep Up with State Laws, Validate research,
Answering our how might we questions, we were able to offer broad solutions that addressed the common pain points of the coach and caregiver
Rating these ideas, we were able to see which ideas were feasible, fall as a differentiators while addressing all of the aspects coaches and caregivers think are basic necessities…. Which led to our need statement

Our chosen Need Statements:

Caregiver:

The caregiver needs a way to keep doctors and appointments straight so that the dependent knows when and where to go without unnecessary stressful interruptions to normal life.
Kareb Sue Ellen (Caregiver) needs to fully understand the communication platform of cariloop so she deepen the relationship with her caregiver coach.
Sarah needs a way to look up trustworthy care facilities so she can help her husband have a dignified death.

Our chosen Need Statements:

Coach:

The coach needs a way to manage all of her caregiver requests/questions so that she is able to respond to requests without ever losing track of anything.
Chrissy (Coach) needs a better resources for tech support so she can focus more coaching Ana on her mother’s specific situation quickly
Eric needs a way to manage his caseloads so he can be helpful to all his clients

STORYBOARD

Develop a storyboard to convey the idea

Wireframe Prototype

Test Concept / Research and Development

Sodarb

A concept app that developed and designed by me, using Angular 6, Laravel 5, Swagger, MySQL all on AWS.

View case study

At the border of Uptown and Downtown, the Henry is preparing to make its Dallas debut, and it’s a restaurant that’s big enough for the entire city to share.

The Henry is a new American style restaurant, cafe, bar, lounge, and everything in between. Housed in a 15,000 (no, that’s not a typo) square foot space, the restaurant has set the bar ridiculously high with its bold claim of growing into the “greatest neighborhood restaurant.” To do that, the Henry must waffle between high brow chic and comfortable casual with great precision.

Despite being so encompassing, the Henry’s space still manages to feel intimate. Its spatial planning is its strongest trait, ensuring that the space feels closer to its combined restaurant, bar, cafe, outdoor patio, and private dining room, and less like a warehouse set in Downtown. Because The Henry is playing so many roles, it has the difficult task of making sure each separate division of the space is unique, without feeling like a mismatch of a dozen different rooms. Unsurprisingly, it does this well.

The main downstairs dining area sets the mood for the majority of the space. Filled with lavish silver cobalt blue walls, creamy brown suede leather booths, and chunky end grain butcher block tables, it feels comfortable enough to have a quick lunch in, but not so casual that a romantic dinner out would feel cheap in the slightest.

Further down from the main entrance sits the main bar and lounge. Accompanied with the same blues, browns, and wood accents, the space is intended to recall a “Great Gatsby vibe,” according to its publicist. It’s really more art nouveau, especially with the abundance of mock 18th century French oil portraits, wherein the subjects face is either obscured with a swipe of paint, or replaced entirely by a bouquet of flowers. While interesting, it occasionally comes off less as ‘modern meets classical’ and more like a graffiti artist in the Louvre.

<h1>

Contact Me

</h1>

If you have any questions or inquires, please do not
hesitate to contact using the form below.

</body> </html>

submit

World-Class Apps

Tailored To Your Needs

Pixel-Perfect Code

Built With Love

Hi. I'm Michael, a software developer from Dallas, Texas. Please take a look around!

I am passionate about building excellent software that improves the lives of those around me. I specialize in creating software for clients ranging from individuals and small-businesses all the way to large enterprise corporations. All of my work is produced locally from Dallas, Texas. What would you do if you had a software expert available at your fingertips?

<h1>

Coding & Experience

</h1>

The main area of my skills is UX Designer and Research.

FrontEnd:
HTML, CSS, JS (ES6 & TypeScript), building small and medium web apps
with AngularJs, custom plugins, animation and coding interactive layouts.

Visit my LinkedIN profile for more details or just contact me.

Protected Project

Hi! Some of the content within this portfolio is in the patent process or otherwise privately disclosed information, so I kindly ask for your confidentiality with the work presented ahead.

Back to Sodarb

Memory Game ²⁰¹⁹

JavaScript and the DOM

Used JavaScript to control a webpage! Learned what the Document Object Model (DOM) is. Used JavaScript and the DOM to control page content and interactions.

Memory Match GitHub Project Overview

Classic Arcade Game Clone ²⁰¹⁹

JavaScript and the DOM

I've builded a professional applications using object-oriented JavaScript techniques. Then you'll learn how JavaScript has improved with the major language improvements made in ES6.

Arcade Game GitHub Project Overview

Restaurant Reviews ²⁰¹⁹

Front-End Applications

Restaurant Reviews App that meets accessibility standards and provides a responsive user experience. You will take a static design that lacks accessibility, and convert the design to be responsive on different sized displays and accessible for screen reader use.

Restaurant App GitHub Project Overview

Image Classifier ²⁰¹⁹

AI: Neutral networks, deep learning and PyTorch

A neural network, this system will be able to identify objects appearing in images, just as humans do website with CSS and responsive design.

Image Classifier GitHub Project Overview

Memory Game ²⁰¹⁹

JavaScript and the DOM

Time

October 2018

2 days

Role

JavaScript ES6 Front-End developer

Tools

Microsoft Visual Studio Code

Learning

JavaScript, Bootstrap responsive web design Use of Modal screen Lots of HTML & CSS

Objective

This project is a browser based card matching game that has cool animations, game logic and engaging interactions. It is done using jQuery and JavaScript with bit of help from Bootstrap, Animate.css and FontAwesome library. It also supports mobile first responsive design where layout adapts based on screensize. It achieves this through Grid layout and media queries.

The game board consists of sixteen “cards” arranged in a grid. The deck is made up of eight different pairs of cards, each with different symbols on one side. The cards are arranged randomly on the grid with the symbol face down. The gameplay rules are very simple: flip over two hidden cards at a time to locate the ones that match!

Game Functionality

The real-life game, players flip over cards to locate the pairs that match The goal was to recreate this effect this project. There are a couple of interactions that I handled:

Game Behavior

The game randomly shuffles the cards. A user wins once all cards have successfully been matched.
When a user wins the game, a modal appears to congratulate the player and ask if they want to play again. It should also tell the user how much time it took to win the game, and what the star rating was.
A restart button allows the player to reset the game board, the timer, and the star rating.
The game displays a star rating (from 1 to at least 3) that reflects the player’s performance. At the beginning of a game, it should display at least 3 stars. After some number of moves, it should change to a lower star rating. After a few more moves, it should change to a even lower star rating (down to 1).
The number of moves needed to change the rating is up to you, but it should happen at some point.
When the player starts a game, a displayed timer should also start. Once the player wins the game, the timer stops.
Game displays the current number of moves a user has made.

Highlights

Listening For Clicks

My first thought was to use a query selector to store all the values in a variable. I also added a console.log for cards in order to test I had retrieved the expected value I was after:

Next I’ll add an event listener just like before. Inside this listener I’ll have a conditional using the Element web API property classList to get the class of the event target (named clickTarget) and run the method contains to check if the class I’m looking for exists on that clickTarget. Now if we click any of the cards, the listener that is attached to the deck element will execute the code inside the conditional. Here’s what that looks like:

Flipping Over Cards

It’s great that it tell me it’s a card and everything, but I’d prefer if it did something, like “flip over”.

I can use the same Element API .classList property, but instead of .contains we can use use a different method, .toggle, to turn on & off the classes when our click event fires. Based on early investigations through dev tools, we know the classes applied to the non-matching cards are .open , .show , and for matching cards .match (we’ll worry about matching later).

Hi!

I'm Michael,

User Experience Designer.

Hi!

I'm Michael,

Skills & Experience

FLTRD

Overview

Objective

APPROACH & DELIVERABLES

Process

Research

Analysis

Ideation

Design

Feedback

Iterations

Research

Context Study

User pains

User gains

Completitive Analysis

Analysis

Problem statement

Use cases

Epics

User Stories

Executive summary

Ideation

FEATURE NARRATIVE

DESIGN PRINCIPLE

JOURNEY MAP UX FLOW

Design

LOW-FIDELITY WIRE FRAME

HIGH-FIDELITY WIRE FRAME

INTERACTIVE PROTOTYPE

Feedback

STAKEHOLDER REVIEW

FIELD TESTING

DESIGNER CRITIQUES

Severity Scale: 0-4(less critical -> more critical)

UX Testing

Severity: 1

Severity: 2

Severity: 3

Severity: 4

THANKS FOR SCROLLING!

Overview

OBJECTIVE

APPROACH & DELIVERABLES

Process

Empathize

Define

Ideation

Prototype

Validate

Feedback

Empathize

QUESTIONNAIRE

Define

Personas

Empathy Map

Ideation

Uncover unexpected areas of innovation

Our chosen Need Statements:

Our chosen Need Statements:

STORYBOARD

Wireframe Prototype

Sodarb

Contact Me

World-Class Apps

Tailored To Your Needs

Pixel-Perfect Code

Built With Love

Hi. I'm Michael, a software developer from Dallas, Texas. Please take a look around!

Coding & Experience

Protected Project

Memory Game 2019

Classic Arcade Game Clone 2019

Restaurant Reviews 2019

Memory Game ²⁰¹⁹

Classic Arcade Game Clone ²⁰¹⁹

Restaurant Reviews ²⁰¹⁹

Image Classifier ²⁰¹⁹

Memory Game ²⁰¹⁹

I’m a versatile designer who loves to build
identities, websites, & visual experiences.