Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Propeller UI/UX Process

•
•
Blair Stewart
Blair Stewart

This overview details the UI/UX design process at our company, Propeller Labs. We pride ourselves on partnering with leading companies to create digital solutions. Innovative design, through effective process, has positioned us to become a leading partner in building digital products.

1 of 10
UI/UX Process © Propeller Labs, Inc. Proprietary and Confidential
Design
UI/UXWeek 1: Kick Off. Work Sessions for User Research and Market & Competitive Research. Review Existing Style Guide and Brand Requirements. Ethnographic Study for Early Product Prototyping. Week 2-5 (5-Day Sprints): Our focus for each 5-day sprint is to present a problem, propose a hypothesis, and prototype and iterate on solutions that meet both design, technical, and business requirements. Incorporated into these sprints are: Environment & Research and Personas & User Flows. The majority of iterative design thinking happens in: Wireframes & InVision and Sketch & Patterns. Identifying the path forward includes prep and feedback using Zeplin & Interviews. Week 6: Finalize Design. Produce Assets & Updated Style Guide for continued use and product extensibility.
5-Day
Mon.Environment We start by setting the stage for collaboration. Although basic, having the tools and people necessary for a successful sprint are by far the most important. Our environment includes whiteboard space, multi-color markers, post-it pads, dot stickers, roll paper, tape and snacks! A collaborative, objective- oriented exploration of a core problem. Through research, internal interviews, and product mapping, we’ll aggregate all our learnings at the end of the day. Research Once the stage is set, we identify the problem and our goal. This may vary depending on the project, but it could start with a large product feature (e.g. P2P Marketplace App // How do we make a marketplace that is trusted?). Then we begin writing down lists of competitors, key personas, relatable design patterns, and features.
Tues.Personas Key personas are critical to our following user flows. We’ll not only understand who to empathize with for end-user design cases, but we’ll also know who to interview once we’re ready to present. Armed with knowledge and fresh minds, we’ll roll out a sheet of paper and handout post-it pads. A combination of existing ideas, remixes, and new, innovative approaches to answering the problem. User Flows Without a clear stopping point, the user flows are meant to get all core screen states or user action states in a horizontal flow on roll paper. This allows us to understand the complexity of a task, but also allows us to understand all possible variations of product usage based on the end-user.
Wed.Wireframes We eliminate implausible flows and decide our best paths forward. Jumping into digital, we use our wireframe kit in Sketch. For some, tools like Balsamiq mimic this portion. The goal is to identify all design elements in a screen, with enough fidelity to understand functionality but not enough to misinterpret as actual design. Knowing the objective, audience, and end goal, we can focus on picking the best possible solution to the problem. With a focus, we can begin increasing our design fidelity to LTF: lowest testable fidelity. InVision For project collaborators, internal domain experts, and the Client, we put our high fidelity wireframes into a clickable prototype to test our flows and ultimately, our hypothesis. A facilitator will ask specific feature-related questions like “How might you start a chat?” to test assumptions and designs.
Thurs.Sketch After we’ve tested our wireframes and made feedback- related adjustments, we start designing high fidelity UI in Sketch, a vector-based tool. Making use of artboards and symbols allow us to recreate and duplicating screens or elements to design for all states. Turning up the nob on color and design, we’ve quickly validated concepts with low fidelity wireframes, while also setting up a blueprint for interface design. Patterns (Craft) We also use 3rd party tools like Craft, by InVision, to populate the UI with placeholder text, image, and pattern content. This saves time and provides a more complete picture to both the end-user and the developer working on the project.
Fri. Zeplin Removing the need for a design spec sheet and copious notes on measurements, Zeplin is a tool that transitions design to development, where pixel-perfect margins, object sizing, color hexes, and exportable assets are all contained in an organized screen-by-screen interface. Whoa, look what we’ve accomplished in just 5-days! Yes, there’s more refinement, but we’ve created well- defined foundation continued design iteration and are confident enough to move onto another core goal. Interviews We conclude with another round of external interviews with the client to finalize our output to dev and catch any remaining edge cases that may have arisen during the UI design phase.
Talk Looking forward to working with you. propeller

More Related Content

Propeller UI/UX Process

  • 1. UI/UX Process © Propeller Labs, Inc. Proprietary and Confidential
  • 3. UI/UXWeek 1: Kick Off. Work Sessions for User Research and Market & Competitive Research. Review Existing Style Guide and Brand Requirements. Ethnographic Study for Early Product Prototyping. Week 2-5 (5-Day Sprints): Our focus for each 5-day sprint is to present a problem, propose a hypothesis, and prototype and iterate on solutions that meet both design, technical, and business requirements. Incorporated into these sprints are: Environment & Research and Personas & User Flows. The majority of iterative design thinking happens in: Wireframes & InVision and Sketch & Patterns. Identifying the path forward includes prep and feedback using Zeplin & Interviews. Week 6: Finalize Design. Produce Assets & Updated Style Guide for continued use and product extensibility.
  • 5. Mon.Environment We start by setting the stage for collaboration. Although basic, having the tools and people necessary for a successful sprint are by far the most important. Our environment includes whiteboard space, multi-color markers, post-it pads, dot stickers, roll paper, tape and snacks! A collaborative, objective- oriented exploration of a core problem. Through research, internal interviews, and product mapping, we’ll aggregate all our learnings at the end of the day. Research Once the stage is set, we identify the problem and our goal. This may vary depending on the project, but it could start with a large product feature (e.g. P2P Marketplace App // How do we make a marketplace that is trusted?). Then we begin writing down lists of competitors, key personas, relatable design patterns, and features.
  • 6. Tues.Personas Key personas are critical to our following user flows. We’ll not only understand who to empathize with for end-user design cases, but we’ll also know who to interview once we’re ready to present. Armed with knowledge and fresh minds, we’ll roll out a sheet of paper and handout post-it pads. A combination of existing ideas, remixes, and new, innovative approaches to answering the problem. User Flows Without a clear stopping point, the user flows are meant to get all core screen states or user action states in a horizontal flow on roll paper. This allows us to understand the complexity of a task, but also allows us to understand all possible variations of product usage based on the end-user.
  • 7. Wed.Wireframes We eliminate implausible flows and decide our best paths forward. Jumping into digital, we use our wireframe kit in Sketch. For some, tools like Balsamiq mimic this portion. The goal is to identify all design elements in a screen, with enough fidelity to understand functionality but not enough to misinterpret as actual design. Knowing the objective, audience, and end goal, we can focus on picking the best possible solution to the problem. With a focus, we can begin increasing our design fidelity to LTF: lowest testable fidelity. InVision For project collaborators, internal domain experts, and the Client, we put our high fidelity wireframes into a clickable prototype to test our flows and ultimately, our hypothesis. A facilitator will ask specific feature-related questions like “How might you start a chat?” to test assumptions and designs.
  • 8. Thurs.Sketch After we’ve tested our wireframes and made feedback- related adjustments, we start designing high fidelity UI in Sketch, a vector-based tool. Making use of artboards and symbols allow us to recreate and duplicating screens or elements to design for all states. Turning up the nob on color and design, we’ve quickly validated concepts with low fidelity wireframes, while also setting up a blueprint for interface design. Patterns (Craft) We also use 3rd party tools like Craft, by InVision, to populate the UI with placeholder text, image, and pattern content. This saves time and provides a more complete picture to both the end-user and the developer working on the project.
  • 9. Fri. Zeplin Removing the need for a design spec sheet and copious notes on measurements, Zeplin is a tool that transitions design to development, where pixel-perfect margins, object sizing, color hexes, and exportable assets are all contained in an organized screen-by-screen interface. Whoa, look what we’ve accomplished in just 5-days! Yes, there’s more refinement, but we’ve created well- defined foundation continued design iteration and are confident enough to move onto another core goal. Interviews We conclude with another round of external interviews with the client to finalize our output to dev and catch any remaining edge cases that may have arisen during the UI design phase.
  • 10. Talk Looking forward to working with you. propeller