UX_TOPICS

Action Items:AccessibilityFigma Notes

The UX Engineer Role

Congratulations! For the next 4–8 sprints, you're a UX Engineer 🎉

As a UX Engineer, you'll serve as the design lead for your team. You'll work to set the vision and direction for your team's user interface and experience (UI/UX) work. You'll craft design planning artifacts like user flows and wireframes, then generate tickets for your product's design backlog to drive development. You'll also work closely with your TPM(s) to scope realistic design goals for each sprint, and then with frontend engineers to implement your plan and achieve them.

As a UX Engineer, you'll be directly responsible for:

• Communicating the UI/UX vision to your TPM(s) and your team.

• Generating and maintaining design artifacts (including user flows and wireframes) to plan and document UI/UX.

• Working to generate, prioritize, and achieve shippable implementation of tickets in your product's design backlog.

• Crafting UI components and data visualizations alongside frontend developers and data scientists on your team and product.

• Representing UI/UX progress and vision in product reviews and stakeholder meetings.

• Working under the direction of the Design Manager to push your team to follow best practices for developing modern user interfaces.

Your Objectives

Throughout Labs, your goal is to work toward your objectives.

You can track your progress in your Objectives course in Canvas. There, you'll also find a sprint-by-sprint breakdown suggesting a path to achieve all your objectives in four sprints.

As a UX Engineer, here's what you'll need to achieve to pass Labs and graduate:

• [ ] Attend at least two Stakeholder Meetings for your product

• [ ] Attend at least four Product Reviews for your product

• [ ] Attend at least four Design Critique sessions

• [ ] Pass Labs course

• [ ] Pass Labs: UX Engineer course

• [ ] Pass Career Readiness course

• [ ] Peer-review at least six teammates on Searchlight

• [ ] Submit at least five qualified pull requests

• [ ] Review at least 10 pull requests from your team

• [ ] Have at least one pull request merged

For more information, visit the Labs Docs (Links to an external site.)!

Design Tools in Labs

As a UX Engineer, you'll be using various industry tools to generate and maintain design artifacts (things you create for use by your team).

Whimsical

Whimsical (Links to an external site.) is a diagramming and rapid prototyping tool you can use to create flowcharts, wireframes, mind maps, sticky notes, and docs.

You'll mostly use Whimsical to create user flows and wireframes.

User Flows are flowcharts showing a user's path through your product—what decisions they make, actions they take, and what screens and features they use along the way. They provide a map (really, a graph) showing all the possible paths.

Wireframes are quick, lightweight sketches of the basic layout of each page, view, or feature in your product.

Check out this quick overview of how Whimsical works:

Optionally, you can also find video tutorials for all of Whimsical's modes here (Links to an external site.)!

Figma

Figma (Links to an external site.) is a more feature-rich prototyping tool you can use to really dive deep into UI/UX possibilities for your product. You can use it to create detailed, interactive designs that incorporate not only how your product should look, but also how users will be able to use it.

Figma has a steeper learning curve than Whimsical, but you may still use it in Labs depending on your product.

If you'll be using Figma,here's a useful playlist of tutorials (Links to an external site.)

Ant Design

UX_TOPICS

Ant Design (Links to an external site.) is a UI framework encompassing a design system and a component library. We'll dig into those terms more later! For now, know that almost every design element your team will need to use will be either available, composable, or adaptable from this library.

Your go-to for using Ant Design will be their official docs (Links to an external site.)—you'll need to get comfortable reading through and referencing documentation to succeed on the job, so this design system should give you a lot of solid practice!

Now that you've got an overview of the tools you'll use in Labs, read on to learn about Design Critiques.