"A great design is accessible, beautiful, intuitive, resourceful, and delightful to use."
design process

DESIGN PROCESS

research

My Approach

Here is a high level view of areas I cover to ensure a thorough and successful outcome.

  1. User
  2. Goal (not | is)
  3. W's: What, when where, who, why, how
Current
  1. Process
  2. Action, tools/touch, mind, emotion
  3. Pain points
Dream
  1. Action, tools/touch
  2. Process
    3. (aptly apply the list below: i.e. market analysis, feasibility, whole systems)
Consider
  1. Competitive market analysis
  2. Dependencies, risks
  3. Constraints (can enhance innovative solutions)
  4. Assumptions
  5. Measure success
  6. LEMI: least effort maximum impact

    Others

  • Feasible:       data, back-end, technology, legal, etc.
  • Scalable:      consistent, whole systems, end-to-end, policies, governance
  • Resource:      people, tools, budget, etc.
  • Platform:       mobile, tablet, web, desktop
  • Accessibility, use cases, risks, sustainablity, stakeholders, etc.
New
  1. Must haves (mvps)

MVP drivers

  • Aligns with the company's mission, OKRs, and emphasis.
  • Customer’s needs, delivers value, based on user research and innovation.
  • Scope, quarterly initiatives, epics, features, sprint stories.
  • Sequentially executables: environments, dependencies, constraints, urgency.
  • Low hanging fruit. LEMI (Least effort maximum impact).

Key Questions to Answer

research

END-TO-END

  • What is the E2E(end-to-end) flow and experience? From pre-onboarding, landing, to finish?
  • What is the current process, tools, and use cases?
  • What is the life-cycle and lifetime value of a user?
  • How do users go about to discover what they are looking for?
  • How do users go through search and navigation menus? Which do they use more and how can they be improved?

SIMPLIFY

  • What are users familiar with?
  • Principles
    • Identify and question current assumptions.
    • Boil down to the most basic elements.
    • Reasoning up from these fundamental truths.
    • Clarify the problem by attaching names to requirements. Create a data dictionary.
    • Question every requirement, even those from authority figures.
    • Break complex issues into smaller, manageable components.
      • Do A/B comparisons until...then add to the main flow.
      • At which point create option B or another flow? When there is another way or the process is no longer simple.
    • Get to the bare minimum, then be forced to add back 10%+ of what was taken out to bridge data and gaps.
    • Simplify and optimize (i.e. automate) only after questioning and deleting steps.
    • Avoid improving processes that shouldn't exist.
  • Simpler UX
    • Simple architecture: high to low.
    • Classify a process flow into stages.
    • Consistency leads to simplicity and clarity. How can we maintain consistency?
    • What existing components and paradigms can we use and create to reuse?
    • Reduce the number of hand-off steps and silos.
    • What process, features, data, or tools do we need to remove, add, relocate, and improve?
    • Does the newly pivoting component, innovative design, or feature that’d depart from what’s existing justify its effort?
    • How can we reduce context switching and allow users to get what is needed from one location?
    • Make the content feel highly personalized.
    • What can be standardized and automated?
  • Simpler UI
    • Start at a high level, with intuitive navigation to find hidden details.
    • Group subjects empathically.
    • Reduce steps, remove redundancies.
    • One login or place to manage.
    • Drive global consistency and adhere to WCAG accessibility standards.
    • Clear context: outline, descriptive concise title, reference its history and sources.
    • Address questions before they arise via tooltips, product walkthroughs, recommendations, banners or modal pop-ups.
    • Map the architecture, flows, and locations: i.e. bread crumbs.
    • No more than two to three taps or clicks to reach the destination.
    • Display stages via stepper or subway.
    • Smart defaults.
    • Minimize swipes and scrolling. Provide a single glance display.
    • If UI gets complicated, question the business rule.
    • AI, automate, and autofill.

VALUE DRIVEN

  • Data that is insightful with capabilities (high level to details, fast, reliable, secure, etc.) that deliver value to customers.
  • Is the product or data what customers are really using, wanting, or needing? Perform user research and data analysis to validate.
  • Add, remove, group, move, leverage toward new investment (long-term) tools. Can we use existing tools either what we already own or look to a new one?
  • LEMI: Least Effort Maximum Impact.

SCALABLE

  • Synch with other dependencies (internal and external), [design] systems, and tools - both what's current and ahead in 6-12 months.
  • What is the market trend? How can we use existing designs of current trend setters?
  • Policies, standards, and governance to move forward.

ACTIONABLE

  • Clear direct actions to take. Show the next best step.
  • Prevent error, self-healing.
  • Help monitor relevant and personal information at a glance.
  • Ways to improve or introduce CRUD: Create, Read, Update, Delete. Plus, audit history and archive features.

PERSONABLE

  • Familiar to the user.
  • Customizable to the user and also by specific roles.
  • Culturally relevant.

MEASURABLE

  • Assumptions are validated by users and its key success indicators: KPIs, OKRs.
  • Meets what was assigned as the definition of done.
  • Supports the company's mission.
  • What data and metrics do we need to have and add to reach our goal?
  • What features and data can be grouped?
  • Which data should be shown aggregated and individually? At what levels?
  • What comparable data or features should be displayed next to what is central and how?

SUCCESS MEASURES

Types

CompanyOKR, KPI
DesignA/B, NPS, satisfaction, task success, time on task, user error, system usability
UsabilityDelight, accessibility, ease of use, consistency, efficiency, layout, flow, navigation, memorability
EngagementAdoption, visits, views, bounces, conversions
BehaviorSearches, votes, reviews, comments, search vs navigation, heat maps (hover, scroll)
TimeDaily, weekly, monthly active users
DataRelevance, impact, statistically significant, with margins of error
PMRisks, milestones, quarterly initiatives, epics, stories, sprints, burn down rates
PerformanceLoad time, reliability uptime 99.99%, MTTR
Salespricing power, revenue income, LTV, CAC (customer acquisition cost)

As a designer I emphasize what's listed top down. I set the baseline and measure along each iteration. If it doesn't exist I create it. What is important is that my design is improving and continues to iterate until ideal metrics are reached. With Sales, I share my experience and knowledge with the sales team and the upper executives.

Design specific measures

Net Promoter Score (NPS)65%+
Customer satisfaction (CSAT)78%+   [70 - 85%]
Task success rate (TSR) 92%
User error rate (UR)< 5%
System Usability Scale (SUS)75%+

Telemetry team measure on dev or production

  • Task Completion Rate, Time on Task, Error Recovery
  • Performance: load time 1 sec 1 to 2sec, reliability uptime 99.99%, MTTR
  • SEO: visits, views, bounce, clicks, cost per click (CPC), conversion
  • Search vs navigation
  • Engagement, adoption, retention
  • Marketing effectiveness, statistically significant measures

Mediums used to capture data

  • Methods: Interviews, surveys before, during, and after using Figma or Analytics tools
  • Spreadsheet, set weight, rank
  • Survey results from MS forms, Google forms, or online tools like Qualtrics

PRODUCT DEVELOPMENT

design process

To create a successful product, a keen work process is critical. Since each client's need is unique, a suitable model should be applied accordingly - such as lean, agile, and others. A design process provides me with a good frame to work with. What appears to be a simple screen can consist of many components, hidden elements, unseen scenarios, and visual cues that are difficult to grasp in a single mockup; a design process enhances simplicity and comprehension.

   I am a proponent of the Lean UX process.

A good design takes time, so depending on the requirements, I can either start off by sketching ideas on a notebook, creating the layout using Miro board, Figma, or design straight in the browser. Typically my flow can be broken down into six stages. There are many factors such as time constraints, budget, and pivoting that can affect the outcome of each stage. Each of these stages require feedback and approval from the client and engineers before moving on to the next one.

User Requirements
  1. Connect with the client to understand the business goals, history of the brand, and current situation
  2. Understand the What, When, Who, Why, What-if, and How
  3. Reach out to users to learn about their current workflows and pain points, map out use cases and scenarios
  4. Clarify what users really want or need, then create personas
  5. Sketch out the rough ideas
Research & Exploration
  1. Research existing solutions and competitors in the market
  2. Gather resources needed to carry out the project
  3. Come up with design options
  4. Consider every use cases to be certain that features being considered will be likable, feasible, and viable
  5. Circle back with product managers on user input, call out what’s missing from the initial requirements
  6. Clarify problems, goals, and metrics with PMs and engineers
UX Design
  1. Research established UX patterns for achieving the goal
  2. Draft wireframes and flowcharts driven by use cases
  3. Create user flows to reach each goal in the least amount of steps
  4. Build around each type of user and platform
  5. Break down the user flows into a system of interconnected components
  6. Determine various states for each wireframe, i.e. empty, filled, logged in, error, etc
UI Design
  1. Set a consistent UI theme and kit for reusable components
  2. For reports, charts, data grids and other modules, explore different visualization options
  3. Experiment with different styles, colors and typography most suited to the needs
  4. Generate guidelines to help engineers understand visual properties such as size, style, positioning, and motion
  5. Transform the wireframes into high fidelity mockups
Prototype
  1. Build interactive prototypes for the client and engineers to demonstrate flows, interactions, and receive feedback
  2. Determine the start, processing, and end state for each action
  3. Generate visuals that are adaptable at various sizes and platforms
  4. Add cometic features such as logos, images, and animations
  5. Ensure visuals are accessible, on-brand, and within cultural boundaries
UA Test
  1. Run critiques with the design team and present designs to product stakeholders along the way to get feedback from different angles
  2. Share designs with users, let them play with the prototypes, get user feedback and iterate
  3. Try and land on options that fulfill optimal value for users, business, and engineering
  4. Collaborate with engineers to overcome technical hurdles and find feasible options
  5. Run test cases you've created - go through and check off the list
  6. Finalize all for handover to engineers