Design Dialogue

I've faced a wicked problem while at my current workplace. The product was tasked to redesign the merchandising web product, starting with the Business Dimension module's "Color & Size Maintenance" screen. The wicked problem was how to reinvent the current user flow so as to accommodate the ever changing ways retail clients create and use colors and sizes in the retail industry.

Feb 9

Research

https://www.nngroup.com/articles/usability-101-introduction-to-usability/ - Usability (how pleasant and easy to use are the features) and Utility (does it fundamentally have the features you need) - “Intranet” users: UI to increase productivity - Test old designs, competitors, other established guidelines

https://www.nngroup.com/articles/parallel-and-iterative-design/ - Process of ensuring usability gets captured in iterations of the design

https://www.nngroup.com/articles/stakeholders-and-user-testing/ - involving stakeholders for buy-in and empathetic connection to product and it’s enhancements

https://www.nngroup.com/articles/talking-to-users/ - Echo. Boomerang. Columbo. - Repeat user, deflect answer and ask what would they do in ‘x’ setting and entice user to keep talking 

Testing - User 1 CLICK HERE

Mar 9

- Creating visual design test cases for newly onboarded designers - Benefits: how to create issues on screens or understand how they work

June 21

How to create “team personas”

Steps:  1 - Interviews 2 - Put data into “team maps” (identify patterns with groups of people) *how do you section this off? 3 - Combine all research and summarize into “Goals” & “Dynamic” 4 - Share research 5 - Discuss research & identify gaps + insight of data 6 - Create “need” statements 7 - Create measurable principles based on your personas of what the UI should be accountable for in it’s design/development

Involving stakeholders in process

https://www.nngroup.com/articles/collaborating-stakeholders/?utm_source=Alertbox&utm_campaign=d5eb169d68-Omnichannel_Context_Stakeholder_NoThumb_2017_02_27&utm_medium=email&utm_term=0_7f29a2b335-d5eb169d68-40281369

June 22

Feb 7

The initial Store Field dropdown idea was to bring in "location" or "location lists" rather than act as the selector popup.

Based on today's discussion should I develop the new Store Selector pattern we discussed earlier? New "Store Selector Dropdown" pattern includes: - Store field defaults to WIS - Store field lookup - Dropdown of stores that user can remove (essentially replaces the store selector popup function)

Multiselect option http://jedwatson.github.io/react-select/

Why it would work: - Triggered drop down menu through down arrow key (ease of use) - Quick removal through the dropdown Questions:

If the Store Field enhancement to the package is priority, I can add it to my queue and create mockups of the field. 

Screen walkthrough

Size Profile

Visuals/Function - Single line selector with a lookup and a Style Hierarchy input - Grid based screen - Action/options panel to have many CTA’s (what is the priority) - Hit allocate > allocate to a bucket and into a store? - Excel access - Approval process > similar to price change console

Context - Size breakdown for applicable stores

Allocate By Style Option

Visuals/Function - Cannot pivot table on this screen but this does exist  - Export to Excel; reliance on this  - Analysis dashboard 

Lucie’s Presentation

Visuals/Function

- Lookup function to select products by specific criteria - Filtering/Selection options depending on specifics“Weeks of Supply” > gives priority to stores with products running low “Packs” > Handle multi-sku packs?  - Purchasing & Allocations; didn’t work as a package prod

Purchase Order in Warehouse

Context

- Printing a label vs. piece of paper - Scan carton > pack goods in carton > print off label (with store & list of contents) > ticketed/label printed > carton seal  - PO has assorted SKUs > Divide by Style > Comm back to buyer > enter into PO and receive SKUs - Ticket printing: by receiving memo, ad hoc print for 2 SKUs, by carton - Tracking for vendor compliance (we don’t have)

Warehouse Delivery Maintenance - Multiple message popup describing the error messages on the screen Warehouse Production Summary - SSRS reports within a window that looks like a doc editor window - The screen has a document editor for the report with action buttons on top - Grid that has varied readonly information from data to yes or no  - Instructional info band at the top of the screen - Toggle up and down numbers for the input in the description - pinning items to the top of the grid header to make sure columns appear first in view Context - Handhelds suggest, something and someone else pulls it into a database - SSRS for reporting

Feb 3

Allocations grid - refer to Lucie’s documentation https://mi9retail.atlassian.net/wiki/x/qQCAAw PROCESS > go through doc, compare to current Merchant, document functionality gaps and identify visual design patterns for the future HTML5 screen

Notes (added or kept functionality): - Store ineligibility linked to Allocation process (aka it will not be allocated to the store if it’s part of the store ineligible list) -  Any store that was not allocated a product because it was not eligible will be highlighted in the Allocation Review screen > visual indicator needed on Review Screen + option to override -  Allocation Store Grading screen merged into 1 screen (instead of having the user navigate thru 3 different screens to create/view store grading) - Standardize algorithm screens look and feel -- There are inputs on screens (think: bulk edit) and also grids (think: costs & discounts + Like Item Allocation Rules) - Multi-tabs for ribbon bar/action buttons - (i.e. ‘home’ tab = buttons that affect file + view of screen & ‘allocation method & settings’ tab = specific algorithm applied to allocation grid) - History basis is the side navigation panel tree that allows them to jump from screen to screen - A new product navigation tree pane will be added to the Review screen where the user will be able to easily view all products affected by a store that was constrained - For web, can the page specifically have the system setting accessible on the page? 

Questions: - Envision keeping all the screens? - What is the typical workflow for a user between the Allocation screens? (i.e. PO > Allocation Worklist > Allocate By Style option?) Can we identify a hierarchy of use for screens? - What is the typical flow 

Feb 16

Worklist

-

Multiple select enhancement (drag)

- User works on 1 PO- When you select from worklist it takes you to another screen >

By default it includes the users’ default stores

- User just wants to see the selected stores rather than the whole store list (is this from the selector?)

* Products included > store selection > then allocation algorithm

Allocation Methods - Understand the weight of each intelligence depending on user Grade = classification of stores (i.e. A, B, C, best and worst stores) *After you click on Allocate, the screen that appears when you click allocate + the rules popup comes up together

Store grading

- Avoid all the popups to get to certain information (from multiple screens to .. feedback panels) - Enhance so that user understands they have multiple classes to go through (not as intuitive) - This is per allocation session - Also used in replenishment

Review screen

- User wants to see sizes going across grid

- Can manually override the system’s algorithm in grid cell

- Warning shows user what else they need to allocate

- Apportion method > algorithm applied by rank of store grade, takes from lowest store and allocates one by one to the better graded stores

-  Needs a navigation panel to view different styles & an alert that shows what needs attention for style/color 

Rules

- (Constraints) - Controls amount of units per store; is this a filter? a separate option?

Sales Profile

- Based on the history of sales of ‘x’ store so that the algorithm can appropriately allocate sizes to the ‘profile’ of ‘x’ store

Sibling styles

- Used for replenishment, unknown for allocations - Borrowing the history of the sister style

Allocation Console

- Approval and authorization management of allocation worklists - Enhancing for unauthorizing 

Qs - Would manual be the default for the user? They plug-in without any intelligence behind the grid

- Would user want to do multiple allocation methods in 1 session?

Misc N

- What is this similar to in terms of pattern/flow

- Standardize the store and product selection - Show the UI without all the obsolete options & screens

- User specific needs; they may or may not want to see certain allocation methods

= User refreshes and deletes filters

- Purchase Order Allocation option based on system setting  - Buyer & allocator may be same person (from PO, bring them to “Allocation by Options” screen via link, skip through the allocation worklist) --> Get rid of ‘allocate all’ button - Hierarchy of information columns - User has big ass screens, multiple, always refreshing, one screen as worklist to compare & contrast - Allocate for new styles (vs. replenishment, where they always have stock, consistent replenishment) or have shorter shelf life/trendy items

Research

Competitors - ANTUSA

Merchant Application:

RESEARCH 

Disclaimer: User testing was done over several months. Each participant is an internal stakeholder, where later interviews used Steve Krug’s “usability test script”. Stakeholders shared navigation designs seen online & partook in sketching exercises, shared below.

November 2016 - Questions & Sketches with Development (Janice, Raiyan, Yuri)

- How do you access information on Merchant - How do users feel about the system (they currently receive and rectify client complaints) - What is efficient/inefficient about the navigation system - Can they compare this to another tool they’ve used? - Test navigation to access “Temporary Price Change” screen –> Apply a Price Change Algorithm, decrease current retail by 20%  –> Apply across 1 Style for multiple stores –> Check and rectify warnings (if applicable)

LINKS - https://www.quora.com/What-are-some-examples-of-an-elegant-UI-that-allows-filtering-by-conditionals - http://www.zappos.com/ - http://www.bestbuy.ca/en-CA/home.aspx - https://www.vmware.com/ - chrome://apps/

- https://jhipster.github.io/ - opencart.com - https://codepen.io/JFarrow/pen/fFrpg - http://uxmovement.com/navigation/top-navigation-vs-left-navigation-which-works-better/ --> side v top

NOTES - Work on information hierarchy, where CTA’s and navigation are pulled out of the menu and into a sticky header (main actions) - Side tabs for navigation within a screen (think: excel, RecruiterBox) - Side drawer menu with movable screens

Feb 9 - BA/Implementation

Script: https://docs.google.com/a/mi9retail.com/document/d/1xrBssagsihRmo5tBCQl4Vw5R6-xdKRtCthHuOq_FOQo/edit?usp=sharing

Notes: https://docs.google.com/spreadsheets/d/1jW-GHlpKAyOmbyfZ0JoHH7BLnE1c8xvjbkSkSkhOUzM/edit#gid=0

- Users frequently use excel

Persona: Betty Buyer

May 12 - Review with Director

January 25 2016

Jan 4 

Janice - meeting notes

Location Price Change Authorization v. Price Change Authorization - Both have same design, but utilize different loads --> Is this based off the user? Who do we ship each screen to?

Price Change Authorization - Price Change Auth, you select 1 price list NOTE: FCL would be using Location Price Management (i.e. “Store Price Management”)

Location Price Change Authorization - Store level pricing, each store has it’s own price list - Grouping the authorization and creation screens together - Columns are shown to display information based off of the location price management creation screen - They mass authorize, verify, or rectify data on the other screen - Right click context menu to get full functionality; can access analysis view, which is essentially a dashboard of analytics *Phase 2 of management screen? - To delete from price change data line from authorization screen, the user must navigate back to the management screen - User can be hit with a price change that contains an error, which, in theory, can be edited/rectified on the location price management screen - Details option pulls user back to Location Price Management screen to view/(alter)?

Data vs. no data and column  When column headers are dragged with no data, the view remains as a grid  - This is preconfigured based on the code in use

Maria - meeting notes

Questions - What are the key requirements of this screen?  - Phase 1 priorities? - Will the authorization screen just be 1 screen? Keeping the screens separate 

What do you envision the screen as? Envision/Ideas:

1. Notification center inspiration (aka the grid) Home screen >  “Subject” - Permanent Price Change/Price change type “Message” - Description “Store” - Works in Store “Transaction” - Price Change link “Create Date” - Date it comes in “Action” - Authorize - Top left Toggle > View for “all users”, change terminology? - Default off for both super users and store users - Super users, has the toggle - Store users, it would be nice to not appear at all

2. Standard SP design screen Grid headings and details - Essentially, copy off of what exists on authorization screen - Price Change > have this as a link so they can hop back to it in the screen - Error > hard stop is the start date because it’s back dated. Authorization button disabled, user has to click price change link  - Stores would have the hover details Top Panel - Super users should still default to works in store, have same function --> Store field Options panel - Leave filter

Mi9 BA Flow TWO scenarios for auth: *NEEDS pending authorization

1 -->  - user without permission to auth a price change (create, hit req auth) - user with proper permissions with permission hits auth

2 --> super user authorizing multiple price changes from multiple stores off FCL mainframe

https://dribbble.com/shots/2745303-Metronic-Responsive-Admin-Dashboard-Template-Invoice-Example/attachments/557542

Whiteboard sessions

“3 band idea” - Header information - Subheader options - Subheader data - Feedback with failure reason Criteria: Readonly grid data, scrollable, HTML format, no hyperlinks, mi9 branded

Jan 31

http://griddlegriddle.github.io/Griddle/

Click “Settings” > opens a checkbox options box

- Trigger button to open/close checkbox options - Satisfies issues of space - User can focus and see grid data first

--

Dec 2016

Questions

- How to deal with specific issues that include multiple menu options that have to turn into icons; how do we show importance - Interaction: All menu options are hidden by default. Certain actions trigger icons appearing (i.e. checkbox on a data grid triggers trash icon to appear) 

** INSPIRATION FOLDER includes the interaction

January 23 2017

https://material.io/guidelines/patterns/selection.html#selection-item-selection

Dec 6

Progressive disclosure

https://www.nngroup.com/articles/progressive-disclosure/

- Offering the user the highest quality experience through strategic PD - Have no more than 2 levels of PD - Important exercise to see what features, options and information is most helpful to the user and put on the onset --> provide a strong “information scent” - Contrasts with staged disclosure; step by step process vs. core features and malleability  - Task analysis: understand which options are used together and which are better thought of as separate stages --> Ensure to not divide the task into too many steps - users get bogged down by excess navigation

Dec 18

Adaptive Design

https://medium.com/swlh/the-current-state-of-adaptive-design-6b2b89b258c4#.dcwpcydsy

Helps understand how to work within “flexbox” constraints in development: “It simplifies the types of constraints and tries to predict the behavior based on the position of the element within the enclosing element.”

- Adjust Sketch workflow with adaptive methodology (key notes: pin to corner, resize object, float in place) -  Sketch will allow me to design adaptive layouts through predicting it’s behaviour when I resize the artboard

- Introduction to Figma tool; allows the designer to recreate adaptive behaviours with advanced constraints - Needs work on how to allow different elements (i.e. parent v. sister elements) to interact with each other 

- Introduction to Subform tool; components and constraints at the core of its functionality - focuses on interface design  - Not entirely intuitive; need to do more research - Predictable results set by the constraints + robust adaptive layout features - Must be used if designer has clear intentions

Sketch 39 Brings Symobl Resizing and Cloud Beta

https://blog.sketchapp.com/sketch-39-brings-symbol-resizing-and-cloud-beta-a74d3aa0611a#.8hazivjsc

- Easier workflow for adaptable symbols when resizing > RE: https://sketchapp.com/learn/documentation/symbols/resizing-symbols/ - FN + (<-- OR -->) allows toggle between artboards - Start implementing this to allow adaptive design as part of design development

Jan 5

Formatting, handoff and CSS

http://cssreference.io/flexbox/ - Reference for class styles and terms for front end https://medium.com/sketch-app-sources/10-things-to-keep-in-mind-working-with-sketch-zeplin-developers-will-thank-you-a80e84c00bc2#.xgl6uecre - Working with developers and speeding up workflow through Zeplin https://medium.com/built-to-adapt/intro-to-the-8-point-grid-system-d2573cde8632#.wxhj1r936 - 8-point grid for better hand off, accurate designs

Jan 31

Designing by “states”/Flexbox

https://medium.com/going-your-way-anyway/design-like-a-developer-b92f7a8f4520#.wuikwiy3s - 4 state design - Twitter redesign across multiple platforms - Thinking in designing by “views” - Communication between design and development

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes - Flex layout is the ability to alter its items' width and/or height to best fit in the available space on any display device - Flexible boxes are laid out in conformance of the writing mode, which means that main start and main end are laid out according to the position of start and end - Because flexible boxes use a different layout algorithm, some properties do not make sense on a flex container:column-* properties of the multiple column module have no effect on a flex item.clear has no effect on a flex item.float causes the display property of the element to compute to block.vertical-align has no effect on the alignment of flex items

Feb 7

Process Examples

https://austinknight.com/process/ - Chart to help understand the objective and functions of the screen/application https://www.quora.com/If-you-were-starting-out-today-writing-a-large-complex-HTML5-web-application-which-JavaScript-library-would-you-use-and-why - HTML5 frameworks for web applications

Feb 8

https://www.nngroup.com/articles/fresh-vs-familiar-aggressive-redesign/ - Novice v. expert users - Question of unified conceptual structure; what elements should be carried over to ensure it looks like Merchant

Feb 14

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - Janice’s guide to all things flexbox

Feb 24

Set up Sketch files to mimic flexbox using AutoLayout:

https://medium.com/sketch-app-sources/auto-layout-introducing-stacks-flexbox-for-sketch-c8a11422c7b5#.16pyrapj4

https://medium.com/sketch-app-sources/responsive-flex-grid-in-sketch-using-autolayout-and-stacked-groups-ec8cfdf5df3f#.55v03aq10

Mar 28

Min & Max-width in fluid/responsive web design

http://ux.stackexchange.com/questions/102052/use-of-max-width-in-fluid-or-responsive-web-design

- General rule of thumb: 100 words width/80 characters per line - Important to note: action areas remain a percentage of the screen while the navigational area is centred to the screen

Responsive Layout --> Assumptions for iPad layout

http://ux.stackexchange.com/questions/37320/when-designing-a-responsive-layout-is-it-right-to-assume-the-ipad-layout-will-be

- Assuming iPad breakpoints - Focus on layouts that make sense to the content rather than design by device

June 1

Eugene has mentioned the need to add dashboards.  Eventually we will create a backlog of dashboards widgets and each user can configure which widgets are available.

https://www.npmjs.com/package/react-dashboard

June 15

Widgets done by Oracle on a home/dashboard view

June 21

https://www.subtraction.com/2017/02/27/abstract-wants-to-change/ https://www.abstractapp.com/ - Version control/Git for design

https://alistapart.com/article/responsive-web-design

- Media queries; setting constraints in code based on device sizes - Designing layouts of different screen sizes and how that affects the content (makes it stackable, understanding what to remove..) Context cross channel https://www.nngroup.com/articles/context-specific-cross-channel/ - Different uses for different devices Consistency is one of the most important components in a successful omnichannel experience. Experiences across various channels should have a consistent look and feel and consistent core functionality in order to create a cohesive, learnable, efficient experience across all channels. However, consistency does not mean that we should provide the exact same experience on all channels, because we also strive for an experience that is optimized for the device, screen size and the context of use. 

The goal is to provide core consistency, but make compromises to optimize the experience where it is appropriate. Using breakpoints https://medium.freecodecamp.com/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862

June 22

http://preview.themeforest.net/item/altena-responsive-admin-dashboard-template/full_screen_preview/20065050?_ga=2.154461820.516103236.1498161667-978452979.1498161667 - widgets and 

https://pixinvent.com/stack-responsive-bootstrap-4-admin-template/html/ltr/vertical-menu-template-nav-dark/# - choose from multiple languages - icons on the left side that open to submenus - nice hover interaction on the grid https://pixinvent.com/stack-responsive-bootstrap-4-admin-template/html/ltr/vertical-menu-template-nav-dark/project-summary.html - individual refresh for each panel

Dec 2016

Kendo Grid http://demos.telerik.com/kendo-ui/grid/angular

- Shows nested information for users to access info - Quick ascending/descending functionality on a higher level - Tabbed information within nested grid - Pagination to allow user to scroll WITHIN 2nd nested grid - The individual (nested) grids are collapsable - Pagination exists for the FULL compilation of grids - tallies the full amount of results on bottom right of main grid + nested grids

Responsive, collapsable tables http://codepen.io/dubrod/pen/OVyJoG

- Collapses and expands a grid line - Assume this pattern would help solve the branching pattern seen in desktop Merchant

“Row Grouping” grids https://react.rocks/example/react-data-grid http://adazzle.github.io/react-data-grid/examples.html#/grouping

- Draggable column headers that sort grid information

....SO COOL

"All features” http://adazzle.github.io/react-data-grid/examples.html#/all-features

This “edit” function (square in corner of grid input) allows for: - Multiple select - Drag and copy function - Writable fields hold multiple inputs (i.e. drop down lists, type form input, scrolling list)

Pivot function https://react.rocks/example/react-pivot

- Useful for head office screen designs

Jan 4

Filter Row for Costs & Discounts http://demos.telerik.com/kendo-ui/grid/filter-row

- RE: Costs & Discounts concept and how it can be applied to data - Top row, instead of filtering function, would be a simple input box. From there, the user enters data that cascades/applies down “ALL ROWS” (hits enter button on the side?) OR can enter data in individual input boxes within grid, and is allowed to copy + drag function within the table.

Sketches from James & Peter session

Grid/Detail Template http://demos.telerik.com/kendo-ui/grid/detailtemplate

- Could be useful for merging grid and card information layout together > packs as much information as possible into a data grid

Grid/Keyboard Navigation http://demos.telerik.com/kendo-ui/grid/keyboard-navigation

- Tabbing function with arrow keys

Jan 6

Development frameworks

Development team references Smart Table & Kendo Grid UI to develop grids on Store Portal

1. https://lorenzofox3.github.io/smart-table-website/ - This offers more flexibility in functionality

2. http://demos.telerik.com/kendo-ui/grid/selection - This is paid for to use - Hard to “hack together” or manipulate code to get different functionality - Styling? Should be easy to alter the look..

Jan 9

Frameworks Using 2 grids - borrowing styling and functionality from both

http://demos.telerik.com/kendo-ui/grid/index Currently using: - Export to Excel - Selection (drag) - Hover styling

https://lorenzofox3.github.io/smart-table-website/ Unsure of current use Both of these can be referenced to properly put together a new grid design that’s easier to implement, follows standards and visually appealing. Will be able to justify placement based on design guidelines.

Jan 12

Styling a Kendo UI grid

Hello Richard, Please consult the following documentation article... http://www.kendoui.com/documentation/ui-widgets/appearance-styling.aspx ...and demo: http://jsfiddle.net/dimodi/LL3GN/ For additional customization, you can inspect the Grid HTML output with Firebug, see what HTML elements and CSS classes are responsible for the visual appearance of the particular object and add custom CSS rules. In order to successfully override Kendo styles, you have to be familiar with the concept of CSS specificity.

CSS Specificity: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/ - How elements are weighted and implemented on the front end

Feb 3

Allocations grid - refer to Lucie’s documentation  https://mi9retail.atlassian.net/wiki/x/qQCAAw Grid functions that need to be carried over: - Copy across the row and apply it to another row -- (copies same data arrangement in grid input) - Copy down the column and applied to another column -- (copies same data arrangement in grid input) - Based on ribbon bar selection (i.e. allocation algorithm type from dropdown), the grid automatically applies algorithm to the data input -- this would also be true if a single data input was copy+dragged/cascaded down or across the grid AKA copies the movement of the original copy - Copy row data across screens (this is all currently right click) - Can import from external excel doc - Keep the pivot function - A custom grid that saves layout and function from user’s last session

Feb 6

Grid Research - functionality Initial Google Search: https://www.google.ca/search?q=stack+overflow&oq=stack&aqs=chrome.0.0j69i65j69i57j69i60j69i59j0.1911j0j1&sourceid=chrome&ie=UTF-8#q=copying%20excel%20grid%20function%20site%3Astackoverflow.com

- http://stackoverflow.com/questions/1095131/paste-excel-data-into-html-table

- http://stackoverflow.com/questions/2006468/copy-paste-from-excel-to-a-web-page

- http://stackoverflow.com/questions/9019158/jquery-spreadsheet-grid-plugin-with-copy-paste-from-to-excel

- http://stackoverflow.com/questions/25463453/copying-of-specific-range-of-excel-cells-from-one-worksheet-to-another-worksheet

- http://stackoverflow.com/questions/26126088/using-dijkstras-algorithm-for-pathfinding-on-a-grid

Feb 8

Algorithms:

https://www.quora.com/How-can-I-implement-machine-learning-algorithms-in-a-web-application - Unsure if it’s “machine learning” that we need

April 18

Responsive grid to card: http://codepen.io/zavoloklom/pen/IGkDz - Identify breakpoint for mobile (1024) where the grid separates into cards

Mobile action solution --> Bottom sheet: https://material.io/guidelines/components/bottom-sheets.html#bottom-sheets-persistent-bottom-sheets - When the data table scrolls off view, actions can live in bottom sheet to not clutter UI

Aug 23

Data table - flashing effect (could be used for when something is added to the grid)

https://uxdesign.cc/hey-designer-youre-not-an-artist-9-tips-to-becoming-a-more-effective-designer-d39d129ebab3#.uo1z5r8gw

It’s important to stand for the user’s perspective while designing a product. Drawing from examples and industry standards may be of value when in meetings - shows the source of inspiration rather than re-inventing the wheel

Feb 7

http://blog.invisionapp.com/defend-your-work-against-terrible-feedback/?utm_campaign=Weekly+Digest&utm_source=hs_email&utm_medium=email&utm_content=42067444&_hsenc=p2ANqtz--2hnnswqE8S3z8iuZJg3ckqQ8xryjb2Fgrhumzcj1RtlLTX6-c4mr4ug4pGiFFODEJexsTYXkKnH2HHuPBLoxbuGBooA&_hsmi=42068201

Feb 8

Types of Stakeholders & getting buy-in - Upstream: clients, stakeholders - Downstream: dev, designers, BAs, product analysts - Understanding the effects of design changes to client, product and the office

Feb 10

https://uxdesign.cc/ux-design-methods-deliverables-657f54ce3c7d#.8d3d3x6nj

- Holy grail of methods and supporting articles to describe their use and importance within a “process”

Feb 14

https://www.mockplus.com/blog/post/111-which-ux-deliverables-are-most-commonly-created-and-shared?utm_source=promote&utm_medium=click&utm_campaign=summer

- Commonly created and shared deliverables with chart explaining effectiveness to types of stakeholders

April 18** READ

https://medium.com/mission-log/how-to-get-the-best-design-feedback-from-your-team-699d219ff239

Developer POV (J):

The pain point is layout.

- Unknown common terminology across GUI. Create common language. - Lack of visual literacy for the GUI - copy and paste mentality  -- This could be solidified and supported by design logic -- Logic based on criteria of the page (i.e. "Cost” line has x decimals) -- System settings ID differentiation between hardline and softline GUI criteria -- Merchant’s SS or SQL to figure out hardline/softline GUI 

- Spacing working within a flexbox grid is an issue - a trial and error process.  - Input fields within card get annoying to format.

Current process includes.. - Employing html 5.0 and Flex wrapping to deal with content like input -- Default set the html flex code as 100%, then they divvy the sizing based off of that. Trial and error process.  - Sourcing different libraries and demos (Kendo, Angular, moving to React.js) -- Copy and paste from already made code from another screen - Node?

Resources

RE: Layout code JANICE EMAIL - READ RE: Layout code sourced from angular https://material.angularjs.org/latest/layout/options

Product Analyst POV The pain point is terminology/consistency.

- Spec documentation: needs common language

Thoughts:

How can the style UI guide & Pattern Library improve efficiency

- Documenting patterns of “when to stick” elements on a certain page - Visualize logic for pages and elements (i.e. decimals for cost, the look of cards depending if hard or softline client) - DO NOT want a copy and paste logic, ability to still code and customize with MI9 look/feel - Conditions set as part of Product Analysis process - enhance with InVision - Constraints? Nov 11 time consuming - Defining current styles, patterns, buttons and colors and offer the alternatives

Formatting Colors - What is the best way to format colors within the guide? Atomic or pattern/layout based? - Do I provide different shades of a primary/main color?

Links/Inspiration

https://rizzo.lonelyplanet.com/styleguide/design-elements/interface-icons

https://material.google.com/style/color.html#

http://www.material-ui.com/#/components/popover

https://uxdesign.cc/your-closet-is-your-personal-design-style-guide-4e948f464c54#.vi06ogfi3

Nov 22 - Code snippets

https://webdesign.tutsplus.com/tutorials/preserving-coding-standards-5-tools-to-get-you-started--cms-26065

https://tutsplus.com/tutorials/search/style+guide

http://meta.stackexchange.com/questions/55933/is-there-a-stack-overflow-like-site-for-designers

https://rizzo.lonelyplanet.com/styleguide/design-elements/colours

https://codemyui.com/

https://css-tricks.com/snippets/html/add-body-class-just-for-ie/

https://material.angularjs.org/latest/layout/options

Nov 24 - Research and inspiration

Codepen - Grid layout example, “Playground” of options http://codepen.io/marcolago/pen/lqGFb

Codepen - Sortable, draggable grid http://codepen.io/osublake/pen/RNLdpz

**Percentage grid systems http://codepen.io/drus/pen/MwEZVe http://codepen.io/taniarascia/pen/rOLEGe - outlines %’s of grid sizing; relating to cards? spacing within layout for items?

Flexbox  https://www.smashingmagazine.com/2016/11/css-grids-flexbox-and-box-alignment-our-new-system-for-web-layout/

http://flexboxgrid.com/

Feb 9

Style Guide & Front end as told by Neilson Group https://www.nngroup.com/articles/front-end-style-guides/?utm_source=Alertbox&utm_campaign=735c283b09-YearsTop10UX_ReadTime_2016_12_27&utm_medium=email&utm_term=0_7f29a2b335-735c283b09-40281369

Feb 14

Material design by Rich Fulcher, UI Senior designer at Google

https://www.youtube.com/watch?v=YaG_ljfzeUw

Feb 24

Design systems

https://medium.freecodecamp.com/how-to-construct-a-design-system-864adbf2a117#.ny63owyq4

June 15

Carbon Design System resource: http://carbondesignsystem.com/style/grids

- structure of content - layout of content - strong design system for both design and development

July 12

Mi9 brand notes:

Clean: Visual style is clean and easy to read

Consistent: Displays information in a relevant and familiar manner to user

Efficient: Makes sense of large amounts of important data

Flexible: Can accelerate the interaction for an expert user but can cater to inexperienced and new onboard users

Honest: Data driven - Truth and credibility are given to our clients through statistics about their business; to empower the client 

Enhance: Improve the user’s understanding of the business and locate areas of improvement and implement

Straightforward: Small learning curve; remember you are dealing with high level issues and tracking

January 23

https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e#.aa3q0yadi - How to play with colour variations when producing multiple states, interactivity and moods for a UI

“Darker color variations are made by lowering brightness and increasing saturation. Brighter color variations are made by increasing brightness and lowering saturation.”

Feb 9