season new

Season

Product Designer

Full product development of a cooking and recipe application aimed at helping users save money and learn how to cook.

Role

Product Designer

Tools

Figma

Apple Developer

Timeline

August 2023 - Present

Summary

Season is a culinary app tailored for iOS, connecting novice cooks with experienced home chefs and extending its features to visionOS. As the Solo Designer for this project, I oversee everything from Information Architecture and Design System creation to Lo-Fi and Hi-Fi Mockups, Interface, and Experience Design.

Problem & Solution

Users seek a dependable platform to discover diverse recipes suitable for their skill levels and culinary exploration. Often faced with delays in finding fresh recipes, they resort to pricey and unhealthy takeout options. Furthermore, users desire a community-centric space to interact and exchange recipes with peers.

Introduce a user-friendly platform with diverse recipes for all skill levels, reducing reliance on costly takeout. Foster a community space for users to share and discover recipes collaboratively.

Inspiration

The motivation for this project arises from my passion for cooking and exploring the intricacies of recipes. Seeing friends regularly invest in takeout expenses led me to envision a better use of those funds for premium ingredients and well-prepared dishes.

User Persona

Developing a user persona for Season brings clarity by focusing on individuals like Justin. By embodying Justin's needs, preferences, and challenges, I can ensure my platform positively with its users.

The goal is to address core needs effectively while proactively addressing any potential user frustrations, thus enhancing the overall user experience.

Information Architecture

Season's Information Architecture reflects both the iOS platform as well as the navigation of VisionOS, with some minor tweaks. (Obviously).

This guide has streamlined my design process, ensuring consistency and organization in crafting the product's interfaces and experiences.

iOS

Design Principles for Season on iOS

While building Season for both iOS and visionOS platforms, I meticulously followed Apple's Human-Centered Design principles. These guidelines, accessible through Apple's developer website, provided invaluable insights into creating user-centric interfaces and experiences.

Following these standards, I aimed to ensure intuitive usability, consistent aesthetics, and a seamless integration within the broader Apple ecosystem, ultimately enhancing the overall user journey.

Design System

Season's Design System for iOS follows Brad Frost's Atomic Design principles. These principles emphasize a systematic approach to design by breaking interfaces down into smaller, reusable components, similar to how atoms combine to form molecules. This hierarchical structure enables consistency, scalability, and efficiency in creating user interfaces.

It also aligns with all the design guidelines provided by Apple on their developer portal.

Your Webflow Page Apple Human Interface Guidelines

Atoms

Colors, Shadows, Typography, Icons, iOS Elements, Layout Grid

Colors

For Season's interface, I crafted a versatile palette with 10 shades each of light and dark colors. I incorporated contrasting elements in green and yellow, along with labels in shades like blue, orange, red, green, and purple. Ensuring optimal contrast for text elements and glyphs is crucial to enhance user readability and viewing experience on the screen.

Shadows

Perfecting shadows in interface design elevates a good design to a great design. A versatile set of shadow styles is essential for designers to swiftly determine the ideal shadow for any context. I've developed a range of 10 shadow variations suitable for both light and dark scenarios.

(Although I mainly use Light Shadow 3 on everything lol)

Typography

For Season's typography, I curated a collection of Text Styles using the Modern Gothic Font—a personal favorite known for its readability and versatility in design, similar to Inter. This comprehensive set includes various versions of the font tailored for different text styles, from headings to captions.

Icons

I created a cohesive set of icons to assist in interface design, integrating specific icon aided in keeping consistency while providing users with recognizable guidance.

iOS Elements

I sourced several iOS elements from Figma Community Files and Apple's Design Guidelines to guide my iOS design system, ensuring alignment with users' devices for a cohesive platform experience.

Layout Grid

I employed a layout grid featuring 16pt margins, 20pt gutters, and 4 columns, crucial for maintaining organized and appropriately spaced design elements.

Molecules

Buttons, Text Inputs, Cards, Profile Components, Filters, iOS Elements, Containers, Headers, Search Results

Buttons

The buttons utilize colors and glyphs from the design system, ensuring cohesive touchpoints for users across various accents. Sized at 60pt in height and 155pt in width, they adapt with Hug layouts. When needed, a 24pt icon is incorporated within the button.

Text Inputs

Diverse Text Input fields enable users to enter and conceal text as necessary, such as sensitive information. Moreover, clear chat bubbles effectively present messages for enhanced user comprehension.

Cards

The application features diverse card styles that enable users to efficiently consume ample information. Compact recipe cards are utilized for extensive recipe displays, while larger cards dominate the profile page or showcase highlighted and promoted recipes.

Profile Components

The profile header showcases users' profile photos and essential details about their engagement on Season. Moreover, an 'edit profile' button enables users to modify their information as needed.

Filters

Filters enable users to refine search results when looking for recipes.

iOS Dynamic Island

Dynamic Island support enhances the Season platform, enabling users to exit the application during a timer and still view the necessary information.

Headers

Headers indicate the current page to users and facilitate navigation back to the previous page.

Search Results

Search results display essential details including cook time, name, description, difficulty level, and portion sizes.

Organisms

Pages, Discover Elements, Hero Cards, Chats, Inbox, Recipe Steps

Pages

The expansive recipe card offers users vital details like calories, cook time, and difficulty level, accompanied by options to 'save for later' and view ingredient lists.

Discover Elements

Discover components showcase recipe suggestions based on user preferences and cater to their dietary restrictions.

Hero Cards

Prominent hero cards on the main pages highlight favorite recipes, top-rated dishes, or selections from renowned chefs.

Chat

An intuitive chat function lets users easily message friends or other users to discuss and share recipes.

Inbox

The native inbox enables users to view all their chats and see active friends or contacts via status indicators on the platform.

Recipe Steps

A clear, step-by-step guide for each recipe ensures users remain on track without confusion. This guide features highlighted text for emphasis and status symbols to indicate the current step.

Lo-Fi Mockups

The initial platform models for the home screen, recipe card, and categories page prioritized presenting information in a concise and elegant manner, ensuring user clarity and a seamless experience.

Starred elements denote key interaction points, guiding users to the primary features and functionalities.

Also, disregard my terrible Figma freehand pen skills.

iOS

visionOS Home

visionOS Follow Along

Resizable Recipe Ornament

Hi-Fi Mockups

Season was built on a 4-pt design system grid, as illustrated below, incorporating 16pt margins and 20pt gutters. This ensures all elements remain within device safe zones, establishing a harmonious and consistent spacing system across the application.

Layout Grid

Overview

Onboarding

Home

Follow Along

Profile

Search Engine

Recipes Page

Interface Improvements

One of the joys of product design is witnessing improvement, and this project excels in enhancing interfaces. I often step back from newly designed UIs, revisiting them days later for validation. The redesigned interfaces notably elevate the user experience and aesthetic appeal.

Significant enhancements are evident across key areas such as the home page, recipes page, and search function, among others. Additionally, several UI elements from the Design System underwent redesigning later to seamlessly align with the platform's evolving needs.

Profile

Recipe of the Day

Search Engine

Home Page

Recipes Page

Overview

visionOS

Design Principles for Season on VisionOS

While creating Season for both iOS and VisionOS platforms, I followed Apple's Human-Centered Design principles. These guidelines, accessible through Apple's developer website, provided invaluable insights into creating user-centric interfaces and experiences.

Your Webflow Page Apple Human Interface Design Guidelines

Why visionOS

Upon learning about the upcoming release of Apple's Vision Pro, I wanted to transition my design expertise from the iOS platform to this emerging field. The challenge of designing for spatial reality continues to push the boundaries of interface design and I am all for it.

Embracing emerging technologies and translating 2D elements into tangible spaces presents an exciting opportunity to create innovative designs.

Also, why not create designs for an emerging aspects of technology.

Your Webflow Page

Design Guidelines

When I began building Season, Apple's design guidelines for the VisionOS platform were not yet available. However, over time, Apple gradually unveiled instructional videos on designing for spatial reality. Additionally, they provided a comprehensive Figma file containing the visionOS Design system, offering insights into the design guidelines and usability heuristics necessary for effective development.

Resources

Your Webflow Page Apple Design Guidelines for VisionOS Apple Design Guidelines for Immersive Experiences Figma Apple Design Resources for VisionOS

Design System

Season's Design System for iOS follows Brad Frost's Atomic Design principles.

These principles emphasize a systematic approach to design by breaking interfaces down into smaller, reusable components, similar to how atoms combine to form molecules.

This hierarchical structure enables consistency, scalability, and efficiency in creating user interfaces.

It also aligns with all the design guidelines provided by Apple on their developer portal.

https://developer.apple.com/design/human-interface-guidelines/designing-for-visionos

Atoms

Glass, Ornaments, Text Fields , Depth & Buttons, Controls, Alerts, Toggles

When I started building the Design System for Season on VisionOS, I aimed for consistency with its iPhone counterpart. Many components echo the iOS version, ensuring users can transition smoothly between platforms without usability hiccups or steep learning curves. Given that VisionOS is a brand new product, designing for spatial reality introduces unique challenges. It requires an understanding of how design elements interact within the surrounding environment.

Glass

"Glass" is important in visionOS's design language. Its translucency enhances the integration of foreground and background elements, visually outlining layers and aiding users in maintaining a clear sense of context.

VisionOS dynamically adapts to the user's environment, ensuring robust visual contrast within the operating system to mitigate any visual challenges users might encounter. Starting with a blank canvas is essential, allowing you to assess the environment and observe how modifications impact the interface elements effectively.

Ornaments

“Ornaments" in visionOS are elements that can either float autonomously or attach to specific components, like a sidebar or bottom navigation bar on the visionOS canvas. Within my design system, examples of such ornaments include a toolbar and two variations of a tab bar: one in an expanded hover state and another in a closed position. Ensuring these elements maintain a 20px distance from the canvas edge preserves their attached feel and functionality.

Text Fields

Text fields are also important factors within the atomic elements of visionOS, as these allow the user to type in fields and input data.

Depth & Buttons

Depth is crucial in spatial design, rendering elements as tangible objects for users. The buttons I've crafted feature various states, leveraging shadows and distinct visual cues to emulate tactile button interactions.

Controls

On visionOS, controls dynamically appear based on the user's hand placement. For instance, corner radius controls emerge when resizing a window. Moreover, users can engage with window controls that mirror the swipe-up gesture familiar from iOS.

Alerts

When a user clicks on the gluten icon within a window, an alert pops up indicating that the recipe contains gluten. Additionally, a hover state provides similar information.

Toggles

Toggles enable users to activate or deactivate settings or features. For example, on the connections page, a green toggle slider permits users to enable or disable third-party connections.

Molecules

Menu Elements, Sliders, Connections [In Progress]

Menu Elements

Menu tab elements, situated on the left side of the vision window, facilitate easy navigation between different application sections. Enhanced with hover states and depth effects, these elements offer users a tactile and intuitive button experience.

Sliders

Sliders empower users to modify various settings, such as adjusting music volume or altering recipe ingredients. Enhanced with depth effects, these elements provide a tangible feel within the spatial environment.

Connections

Third-party connections enable users to share recipes with friends on external platforms, incase they do not use the native messaging system. Users can link these platforms to share posts; for instance, a friend might share a recipe on Facebook. Moreover, integrations with Spotify and Apple Music are available, granting users in-app music control options.

Organisms

Currently building. :D