Product Design

Design process: Competitive research, wireframing, and visual design

What is my design process when I start designing? I almost always start with competitive research. The first thing I like to do is just analyze the space, see different apps that have similar experiences to ours and unique experiences to ours and find patterns between all those different apps. So placement and hierarchy of different parts of their products, any kind of micro animations or UI elements that might be inspirational and putting them all together in one view so that I can easily look at the experiences across all the different brands and find those patterns and identify them, group them together and then put them in a place where I could have a conversation about some of my suggestions before I even move into wire framework. Once I start wire framing, I try to get stakeholders involved as soon as possible. I always come up with more and more questions as a wire framing because a lot of times it opens up a can of worms with strategy. Right now. We're not briefing before we're designing, which is something that does make it a little bit more difficult as far as figuring out the right hierarchy of what we're trying to get the user to do in each individual instance, page section module, etc after wire framing, I move very quickly in visual design. It's something that is very easy for me, especially because we're starting to slowly build a design system. And so once we get into visual design, we introduce it to the engineers and move forward from there. Ideally, we'd love to have some user testing in the future and a few more stages in between for feedback, analysis, adjustments. But right now, that's the basic design process that we're following at any question.

My design process involves researching competitors, wireframing, then visual design, followed by introducing the design to engineers. In the future, I would like to include user testing and more feedback stages in between.

When it comes to my design process, I typically begin with competitive research. I analyze different apps in the same space as ours, looking for patterns in placement, hierarchy, micro animations, and UI elements. I compile these findings into a single view for easy reference and to facilitate conversations about my suggestions before diving into wireframing. During the wireframing phase, I involve stakeholders as early as possible to address any strategic questions that may arise. Currently, we're designing without a formal briefing process, which can make determining the right hierarchy challenging. After wireframing, I transition quickly into visual design, especially since we're gradually building a design system. Once the visual design is complete, we introduce it to the engineers and proceed from there. Ideally, we would incorporate user testing and additional stages for feedback analysis and adjustments in the future. However, for now, this is the basic design process we follow.

Cool and Calming: Why Teal is My Favorite Color

My favorite color is teal. Basically anything in the cool color palette, teals and blues and purples. I've always gravitated towards that color mostly just because of pure color theory. It's a very calming palette and a color that makes me feel relaxed rather than some of the other warmer colors that could be out there. I actually have a very strong aversion to the color red partially because it is a loud color. It's definitely a color that kind of evokes more emotions of anger or error, which is something that I also tend to gravitate away from in design because error states really purely should be semiotic colors and red falls into that category. So using red for anything except for an error state can actually confuse a user. So I tend to lean more towards cooler colors and teal is my favorite.

My favorite color is teal because it's a calming color in the cool palette and I have an aversion to the color red.

My favorite color is teal. I've always been drawn to colors in the cool palette, such as teals, blues, and purples. I appreciate teal for its calming effect and how it makes me feel relaxed. On the other hand, I have a strong aversion to the color red because it is loud and often associated with emotions like anger or errors. In design, I try to avoid using red except for error states, as it can cause confusion for users. Cooler colors align more with my preference, and teal stands out as my favorite.

What key elements should you consider when designing an icon set?

Designing an Icon Set: Key Elements to Consider

What key elements should you consider when designing an icon set? Um Most of the time, the first thing I'll do is try to figure out a baseline for line width, rounded corners, size basics basically like do we want icons to be eight pixels, 16 pixels, 24 pixels, etc? And do we want the line width to maintain across all of those different sizes or to expand? So should it be line art iconography or an SVG that has an expanded outline that then gets thicker, the bigger the icon is I tend to lean more towards line art so that it maintains the same shape rather than having it be something that kind of grows with size. But mostly those are the things that I look for. And then I try to find and reuse any patterns I create or shapes I create in different icons so that they feel like they're part of one library.

Consider baseline for line width, rounded corners, size basics (e.g. 8 pixels, 16 pixels, 24 pixels), type of iconography (line art or SVG), and patterns in icons to create a library.

When designing an icon set, there are key elements to consider. One of the first things to determine is a baseline for aspects like line width, rounded corners, and size variations. Deciding on specific sizes, such as 8 pixels, 16 pixels, or 24 pixels, helps establish consistency across the set. It's important to decide whether the line width should remain the same across different sizes or expand as the icons get larger. Personally, I lean towards maintaining the same shape with line art iconography rather than having it grow with size. Additionally, I look for opportunities to reuse patterns and shapes across different icons to create a cohesive library feel. These considerations help ensure a well-designed and visually harmonious icon set.

What techniques do you use to maintain consistency between different parts of your product?

Find consistency through reusable design

When designing throughout our app, I always try to think of each element as a molecule or an organism that can be reused in different parts of the product. So I always try to think of reusable design in the sense that it would reduce engineering scope, it reduces design scope, and it creates patterns that basically end up making the experience more seamless for the user because it's expected changes or repeatable usage of different parts of the product itself. By doing that, then the product maintains consistency both on the user side but also within Figma while we're designing for different components so that all the designers are working within the same system as well as all the engineers are working within the same system so that it helps with efficiency and obviously improves consistency.

When designing for our app, I try to think of each element as a molecule or organism that can be reused in different parts of the product. This helps reduce engineering and design scope, and creates patterns that make the experience more seamless for the user.

To maintain consistency between different parts of our product, I design with reusability in mind. I view each element as a molecule or organism that can be utilized across various pages throughout the product. Establishing these patterns not only creates aesthetic consistency for the user, but also reduces the scope of engineering and design efforts in future builds.

Are there any colors that you avoid using in your designs altogether? If so, why?

Avoid use of semantic colors in aesthetic design

I usually try to avoid colors that might have semantic meanings, such as red or green or yellow, which could be success, error, warning states, things like that. So by avoiding those colors in just the primary color palette, secondary color palette, etc., it keeps those colors really clear to the user as to when you see this color, it means this. And therefore there's no confusion when it pops up in the app whether what you're looking at is an error state or what you're looking at is just a design with the same color similar to an error state. So those are the colors that I always make sure I used very specifically and when they make the most sense in the context of the meaning within the design.

I avoid colors such as red, green, and yellow that could have semantic meanings in order to keep those colors clear for the user.

I avoid using colors aesthetically in design that have semantic meanings, such as red, green, or yellow, which are often associated with success, error, or warning states. By excluding these colors from the primary and secondary color palettes, it ensures that their usage remains clear and unambiguous to the user. This approach helps prevent confusion and ensures that the colors are used purposefully and meaningfully within the context of the design.

Swimming

Strength

Triathlon

Photography

Track & Field

Nutrition

Physical Therapy

Running

Pets

Cycling

Podcasting

HealthCare

Musculoskeletal

Hockey

First Responders

Integrative Medicine

Chiropractic

Cross Country Skiing

Adaptive Sports

Climbing

Mental Health

Surfing

Tennis

Military

Mind Body

Scholars

Criminal Justice

Liquor

CrossFit

Golf

Soccer

Pickleball

Hunting

Public Speaking

Venture Capital

Alli Karkantis