Field General

UI/UX, Digital Design Internship

Logos & Branding, Printed Media, UI/UX, Prototyping, Web Design, Motion Design, Demo Videos, Social Media

Field General is an app created by a startup company based out of Madison, WI just a few blocks from the state capitol building. My role included UI and UX design, social media, motion design, product design and creating a website for Field General.

Because it was a small startup, I wore many different hats to work on all the different projects. I used Adobe Xd for prototyping and mockups. For video projects I worked in After Effects, Audition and Illustrator.

Project Overview

App Overview - Logo & Branding - Mobile - UI Design
- Mockups to Code
- Motion Design

App Overview

How many times a day do you ask where your team and assets are? It wastes your time, their time, & gets on your team’s nerves.

Never ask that question again. Field General tracks the location of users, assets and teams on a map, and pins tasks right to the map so you can see what needs to be done and where. Now your teams can just pull out Field General to see exactly what needs to be done right on your map.

Making the Field General Logo

Feels: bold, trustworthy, straightforward

The logo depicts how Field General gives you better communication and command of your team in the field. The first digital sketches were explorations of different ways to visually combine messaging and being in command.

Top logo options

Final logo

The company liked the uniqueness of the logo with the badge inside the message box, so I fine-tuned it so it could work on both light and dark backgrounds and at many different sizes.

The final version included a stacked and wide version, and a white version to be used on dark backgrounds.

Logo Animation

The logo animation was created in After Effects and used for demo videos, the website and social posts. 

Mobile UI

Splash Screen

Login Page

Sidebar Menu

Project Page with pins and task cards

Main Page

The main page is the starting point to view tasks in the app. From this page, you can open the sidebar, see tasks on the map, and view your project feed. Tasks are sorted into "complete," "incomplete" and "my tasks."

From mockup to code

On the left is a mockup I created in Adobe Xd. On the right is what it looks like in code, after I handed it off to the developers.

Motion

I made some short videos for Facebook ads and longer product demo videos for the website.
Sound was edited in Adobe Audition. View one of the demo videos here.

Watch video