Maybe it’s because The Bear came back on June 27, or possibly because I’m always hungry, but I had a revelation the other day. Our website project teams work similarly to a brigade-style kitchen team.
It may not be as chaotic and we have much less chance of a real fire, but the pressure is on, the stove is hot, and the team is always working to cook up a great user experience.
The team
We all have a common goal: to satisfy the user. We achieve this by ensuring the whole team keeps the user top-of-mind throughout the process. We’ll cover the similarities between our strategists/UX designers and executive chefs, our UI designers and creatives and sous chefs, and our engineers and line cooks.
For this post, we’ll look through the lens of our engineering team and how they consider UX and UI throughout the project.
The recipe
In a kitchen, an executive chef creates the recipe for the team to follow and execute. They choose the ingredients and components, and decide how everything will be cooked to make a cohesive dish.
At Imarc, our strategists and UX designers act as our executive chefs, coming up with the UX base for our website projects. They conduct extensive user research which results in an informed plan including information architecture, wireframes, prototypes, and usability testing to create their recipe or UX. This plan outlines the structure, flow, and functionality needed to meet user needs.
We collaborate via internal wireframe reviews where our engineers keep their eyes peeled for:
- Consistency of components
- Complexity vs. budget
- Feature Functionality
- State management
- Interactions
- APIs/Integrations/Data
- Form flow, fields, and layout
- User intent
- Content hierarchy
- Cognitive load and “busyness”
- Filtering, facets, and resets
- Information architecture
Below is an example of a wireframe with areas marked up that engineering would have questions on, like: Is the “Room Visualizer” an offsite link or a page with an embed? What other options are included in the select box? Are we pulling in posts automatically or will these be curated?
The presentation
Once we’ve established our recipe, it’s onto the presentation. In a kitchen, a sous chef or chef de cuisine will step in and focus on presentation. They will decide how to arrange the ingredients to create an appetizing and appealing dish for the diner.
Similarly, our creatives design the UI, or the visual elements, that make the product attractive and engaging to our users. Using the elements provided in UX, they come up with the layout, color scheme, typography, iconography, photography, and interactive elements. The designers keep our users in mind by paying attention to common UI patterns, accessibility, and ease of use.
Some things our engineers look out for when reviewing a design include:
- Color contrast
- Content width, especially on text-heavy pages
- Min and max touch target sizes
- Scrolljacking
- Consistent color usage for actions, danger, warnings, and info
- Components tied too closely to specific content
- Responsiveness, especially regarding complex components, dense navs, and filtering
- Active & hover states for all links, buttons, and navigation items
- Iconography
- Image ratios and sizing
- Any design treatments outside of CSS capabilities
Below is an example of a design marked up with areas where engineering would have questions like: What is the hover state on these cards? What type of interaction happens upon selection? What is the hover effect for this button style?
The execution
When the final recipe and presentation are ready, it’s time to execute! This is where a line cook or chef de partie would normally take over to cook the dish.
In Imarc’s case, our engineers step in to implement the functionality and visuals based on the UX and UI plans and designs they’ve received. During development, our engineers keep the user top-of-mind, much like the other team members do in the UX and UI phases. They build out the front-end of a website that web visitors directly interact with and the functionality and tooling that admin users may use on the back-end of the site.
Our engineers are involved throughout the process asking clarifying questions, but they’re also thinking of ways to improve the overall experience by:
- Collaborating with the team and understanding KPIs
- Asking questions like “what happens when…?”
- Optimizing performance and page speed scores
- Testing across many devices and screen sizes
- Focusing on the author experience
- Creating meaningful interactions and microinteractions
- Ensuring the site is accessible to all users by checking color contrast and font sizes, using aria roles, etc.
- Confirming form optimization with clearly labeled fields, proper error handling, and helpful messaging
- Implementing caching strategies
Unlike a kitchen, our team has a longer timeline to create a masterpiece, but still, it all has to come together like a symphony. Why? If we don’t work this way, the user gets lost and conversions don’t happen. A great user experience starts and ends with teamwork.
If you need a team that cares about creating a tailored recipe for your perfect website, say hello.
