ZYYAH Pro & ZYYAH Home
Role: Senior & Lead UX Designer for both web and mobile apps
Tools: Figma, Miro, JIRA
Challenge
Initially joining the company as one of three senior product designers, I was tasked to eventually lead the department to establish true UX in our design process. My role, on top of being a product designer, was to advocate and enforce good/modern design practices amongst other designers, create a solution for design inconsistency issues, create testing plans for user testing, and partner with the development team on design solutions.
Role objectives:
• Establishing design patterns via creating a design system + design artifacts to refer our work to
• Deliver flows, lowfi, and high wireframes & prototypes
• Manage a team of designers, mentoring the UX process + guiding flow direction
• Led design reviews, direction, and developer handoff
• Work and support the marketing department delivering artifacts such as company graphics and a brand book.
Design lead
As the lead, I facilitated design pattern establishment and tasks that would ultimately help new designers who entered this role to have all the resources they need. There were many assets and artifacts to create alongside product sprint work. Due to the workload of the design department, I created a separate JIRA task board solely for my team to manage projects and tasks that weren’t pertinent to sprint work. Here, we manage our side projects, and design-specific tasks (like breaking down the design system and tag-teaming some of the work). We manage our tasks here, for clarity, product visibility, and organization.
Design JIRA
Design system
With challenging startups, comes a variety of designers who pass through and try to change the styling however they please (which, you can imagine how much developers love that). In an effort to stop styling changes, I created a design system based on the last style guide that was established.
Created a library and expanded upon its variants to establish patterns and styles that will be part of ZYYAH branding, which ensures no tweaks or changes can happen without an approval process
Worked with and negotiated with developers to create a 1:1 style library for developer components to match designs
Prevent costly changes without proper evaluation of the component value. Ultimately saving money and time + consistency.
Web & mobile button components
Web table component
Artifacts
When I joined this company, there were no UX design thinking processes that were officially established. The designs were created on a whim with no intentional purpose other than to satisfy requirements. As a UX advocate, I personified our different personas, and created an information architecture (IA) document based on our app navigation and features and more! We use these assets in our designs as a reference and part of the process.
Personas helped identify which app we were working on (there are four apps) as well as empathizing with their needs. These personas also help us recruit for the ideal participants for user testing and interviews.
IA (sitemap) helps us create task/user flows quickly, we can reference these as we are creating our design architecture.
User + task flows: very important to the design process. I noticed many designers struggled to “know” what to design when given a task. These flows help us clarify the direction with product as well as map out the steps + pages we are going to deliver in our handoff stage.
Our pro admin and our homeowner provisional personas.
Sitemap of the homeowner mobile app
Examples of task and user flows
Design Process
The handoff process is incredibly important. I use this step to help developers navigate my complex figma files, show them the variations of experiences different users may encounter if they selected "something else” as opposed to the flow’s happy path. I structured my files very specifically for developers to easily see and navigate each feature and user journey. What I display, is generally what was discussed in low fidelity or flow reviews (aka. no surprises!).
Low fidelity (left) vs. high fidelity (right)
Additional features page for developer reference
The ZYYAH applications
As mentioned, there were four applications we were responsible for maintaining. The ZYYAH homeowners web app, the Homeowners mobile app, the Pro responsive web app (also a responsive mobile app), and the ZYYAH business administrator. There were also three different stylings that came with these apps, which were other challenges we needed to clarify with product, QA, developers, and other designers during the dev handoff sessions. Because we had older legacy components built into the app, there were negotiations such as:
QA found the styling of this modal to look different from designs: use what you already have developed (due to tight timelines, some components would be noted to re-design at a later time).
The functionality of this dropdown select works differently than what you have: work with developers to ensure UX is captured but perhaps styling will be addressed down the road.
Homeowner web vs mobile drawers
Pro web vs homeowner mobile forms