YCH Mobile

← Back to Software

YCH Mobile was the first project I was assigned when I started at Yakima Chief Hops as a UI/UX Developer. It was meant to be a trial by fire to test my abilities and see how quickly I could learn Figma (I had used Adobe XD previously). My team had already completed requirements gathering before I started, so I was able to hit the ground running. Unfortunately, the app ended up in development hell when we found out Microsoft would be ending support for Xamarin, the mobile framework we had been using. We decided to put this app on hold while we determined whether to stick with .NET Maui or switch to React Native, Flutter, etc.

Core Features:

Variety List: Serves as a product catalog for quick reference by brewers for facts and figures on the various hop varieties and product types.
Lot Lookup: This section of the app was meant to replace the standalone Lot Lookup mobile app which allows brewers to look up laboratory analysis data for the specific lot(s) their hops came from (see Tools App for more information).
News & Notifications: Would allow YCH to push updates about news, events, promotions, etc. to customers.
Resources: Would provide brewers with quick access to FAQs, a Glossary of Terms, and additional resources like recipes for homebrewers who are just getting started.

My Contributions:

Created wireframes for each of the main views in LucidChart. Worked with stakeholders along the way to ensure appropriate interpretation of requirements and to help fill in the gaps of my knowledge as a new employee.
Researched the company's brand, existing apps & websites, and standards for mobile app design.
Began formulating the design system - including grid size, font styles, color palettes, and input/form components - that would later become the foundation for the component library I built.
Iteratively designed all of the views and components for the app in Figma, meeting with stakeholders on a weekly basis for feedback.
Planned and moderated a focus group with brewers from all over the US and Canada. Sent out a survey afterwards and distilled their quantitative and qualitative feedback into a report. Presented my findings to my team and the stakeholders to determine what changes should be made to the project, then iterated as necessary.

Please note: YCH Mobile is proprietary software for which Yakima Chief Hops retains all intellectual property rights.

Platform: Android & iOS | Framework: TBD | Software: Figma, LucidChart, AfterEffects

Information

Prototypes

Please note: The prototypes have some hot spots that are triggered on mouse-enter/leave to simulate the navigation hiding/showing and header shrinking when you scroll. This was fine when I was presenting, but it may make navigating the prototypes more difficult. I apologize, but I no longer have editing access to fix this. If the prototypes are too difficult to navigate, there are screenshots below of most of the content.

Wireframes

Initial wireframes done in LucidChart to quickly iterate flow and layout with stakeholders

Welcome Screen

Brief introduction to the company and what they are all about (only shows on first launch).

User Information & Demographics

Gather some very basic information about the user so we know what products we should show them (only shows on first launch).

Variety List (Initial)

By default, this is an alphabetical product catalog with a "featured" section at the top.

Variety List (Scrolled)

As you can see if you toggle between this and the previous image, as you scroll down the page, the header shrinks and nav hides to increase screen real estate.

Variety List - Sort & Filter Options

Brewers can use various filters to narrow their search.

Variety Details

If a brewer selects a card from the previous list, they will be brought to a details page like this that includes all the facts, figures, and available products for a given hop variety.

Lot Lookup - Search & Recent

When users first land on the Lot Lookup screen, have three options: search for a specific lot, scan a QR code from the product they have on hand, or select a lot from their recent queries.

Lot Lookup - QR Scanner

A simple QR Scanner layout with basic instructions for end users and the ability to turn on their phone's flashlight.

Lot Lookup - Lot Details

Once users enter, select, or scan a lot number, they will be brought to a details page like this with all the laboratory analysis information about that lot.

News & Notifications List

A list of example user notifications for events, news, customer surveys, and promotions.

News & Notifications - Selected Item Modal

An example piece of news that might display if a user were to select one of the notifications from the previous list.

Resources

Placeholder content on the resources page showing how the Glossary and FAQs could be stored in expand/collapsable accordions.

Settings

A user settings page with options to opt-in/out of various types of notifications, update their region, email, etc.