Dan Baroody

Portfolio

Twelve years owning the product design of an enterprise analytics platform across web, mobile and desktop, plus the work that came before. Each line is a problem someone had. Open it to see what I made.

Client names and figures in the Salient screens are placeholders.

Organize by
One company website has to speak to six different industries. Fieldline website concept Concept

A 15-page marketing site for a fictional business-performance software company: home, six industry pages, customers, how we work, careers, a resource guide, blog and contact. Hand-built in HTML, CSS and JavaScript, with shared templates so the header, menu and footer stay identical on every page.

Fieldline home page: the headline Every result has a reason, we make sure you find it, followed by stats, partner logos and industry sections.
Retail, grocery and convenience industry page with the headline Performance is decided beyond the shelf.
How we work page with the headline There is a better way to manage business performance.
Comparing date ranges on a chart opened a separate window for every range. Range Summary window Salient

One window now holds every range picked on a trend chart, side by side. Each range is shaded on the chart while the window is open, and a differences view does the math between them.

Range Summary window over a trend chart: three shaded ranges on the chart and a table comparing COGS, net revenue and units across them, with two blue difference columns.
Nobody could find a dashboard unless they knew who saved it and where. Directory redesign Salient

Search comes first. Bookmarks and dashboards are separated, and people choose how much detail each card shows.

Directory dialog: folder tree on the left, search across the top, and a grid of dashboard and bookmark cards.
Every setup dialog worked a little differently, so people had to relearn each one. Configure dialog Salient

Group by, measures, date ranges, filters and options in one dialog with one shared pattern: available on the left, selected on the right.

Configure dialog with tabs for Group By, Measures, Date Ranges, Filters, Options and Summary, and available and selected lists side by side.
Developers were guessing at colors, spacing and button states. Design system Salient

Color, type, buttons, form controls and a single-weight icon set, documented so new screens get built the same way every time.

Pattern guide, Colors: the corporate brand palette and the product color tokens with names and hex values.
Pattern guide, Buttons: primary, add, secondary, danger and outline buttons with their specs.
Pattern guide, Dialog: the shared dialog shell with its radius, border and shadow specs, and the dialog header.
Pattern guide, Data Grid: header, row and cell value specs with a sample grid of periods and dates.
Pattern guide, Shuttle Menu: an available tree on the left and selected items on the right.
Sometimes creativity needs a spark. Creative Spark dodill

Two random words, and a refresh button for more. Use them to start a story, a sketch, a poem or a conversation. The only rule is to make something that's yours.

Creative Spark: the words well-groomed and drawer in large white type on a purple background, with a refresh button below.
Transferring a reference image to a canvas at the right size. Image Grid Tool dodill

Upload an image, set the canvas size in inches and DPI, position the image, then lay a grid over it with your own rows, columns, line color and weight. Save the result and print it.

Image Grid Tool: canvas, image size, position, grid layout and grid appearance controls above a photo of a produce market divided by a white four by five grid.
Pulling a usable color palette out of an image. Color Palette Maker dodill

Generate a palette at random or extract one from an uploaded image. Lock the colors you like, regenerate the rest, and export in HEX, RGB or HSL.

Color Palette Maker: a produce market photo beside five extracted swatches, from olive and mustard to peach, red and dark brown, each with HEX and RGB values.
A college with no presence on social media. Founded every social channel Elmira College

Created the college's first Facebook, Twitter, YouTube and Instagram accounts. From there I developed new messaging and new ways to grow our reach, bringing in the community, lapsed alumni and new students through a mix of channels. The result was an increase in donations and in engagement across every audience.

Elmira College's YouTube, Facebook and Instagram pages, fanned out in a stack.
A college website that wasn't working for prospective students. Website redesign Elmira College

Led the full redesign of the college website. The new design focused on ease of use: finding what you came for in fewer clicks, with the most important parts of the college easier to see.

The redesigned Elmira College home page: purple and gold navigation, a Summer Open House photo slider, and news and events below.

Salient, product design

Range Summary window

Before: a trend chart with three separate small windows, one per selected date range, stacked on top of each other.
Before. Every range picked on the chart opened its own window. Three ranges meant three windows to drag around, with nothing on the chart showing which was which.
After: the same chart with three shaded ranges and a single Range Summary window listing all three side by side.
After. One Range Summary window holds every range side by side, and each range is shaded on the chart while the window is open.
Range Summary with Show differences turned on: two blue difference columns, and the two cells behind a hovered difference highlighted in yellow.
Show differences. Turning it on adds later-minus-earlier comparisons in blue columns. Hovering a difference highlights the two cells it came from.
Range Summary with This, Last and % Change rows for each measure, plus difference columns that show percentage changes in points.
Year over year. When each range has a comparison period, the window shows This, Last and % Change, and differences between percentages read in points.
1 of 4

The problem

Analysts pick date ranges on a trend chart to compare periods, like this fall against last winter. Each range opened its own floating window. Comparing three periods meant juggling three windows, reading numbers across them by eye, and doing the subtraction in your head. Windows could also stay open after their chart was gone.

What I made

  • All ranges live in one window, with a Swap view option to flip rows and columns.
  • Selected ranges are shaded on the chart and update the moment one is added or removed.
  • Show differences adds later-minus-earlier comparisons. Any pair can be chosen, swapped or removed, shown as values, percent change, or both, grouped at the end or beside each range.
  • Differences read the way the source numbers do: same units, an up or down arrow, and percentage rows in points rather than a percent of a percent.
  • When two ranges have different lengths, Totals differences are greyed out because they mostly reflect the length. Averages stay normal.
  • Headers show readable dates, the comparison period and the range length, like "Dec 28, 1998 – Feb 21, 1999, 8 weeks".
  • Everything works from the keyboard, with screen-reader labels built from the dates and no switch animation when reduced motion is on.
  • The window closes with its chart every time, so no more orphaned windows.

Elmira College, web design

College website redesign

Elmira College home page: purple top bar with Request Info, Visit EC and Enroll Now, gold main navigation, a Summer Open House photo slider, and News, Events and Virtual Tour links below.
Home page. Calls to action sit at the top of every page. What's happening now, like open house dates, news and events, is right on the front page.
The Admissions and Aid menu open, showing six columns: Visit, Apply, Connect With Us, Tuition and Financial Aid, Entering Students, and Share in a Tradition.
Navigation. Each main section opens into a full menu grouped by what visitors are trying to do, so tours, applications, tuition and aid are one click from anywhere.
Presidential Lecture Series page with a breadcrumb trail, a left-hand list of event series, and event listings with photos, dates and locations.
Section pages. A breadcrumb trail and a section menu on the left keep visitors oriented, and events list the what, when and where up front.
1 of 3

The problem

Prospective students and their families came to the site with specific questions: how to visit, how to apply, what it costs. The answers were there, but they took too long to find, and the things that set the college apart were easy to miss.

What I made

  • A new design built around ease of use, so visitors find what they came for in fewer clicks.
  • Menus grouped by what people are trying to do, like Visit, Apply, and Tuition and Financial Aid, instead of by how the college is organized.
  • Calls to action like Apply and Visit pinned to the top of every page.
  • Important parts of the college, like news, events, open houses and the virtual tour, given room on the home page.
  • A consistent page layout with breadcrumbs and section menus, so visitors always know where they are.

Personal project, web design

Fieldline website concept

Fieldline home page hero: Every result has a reason, we make sure you find it, with three proof points below.
Home page. A bold headline with three proof points right under it, so the value is clear before the first scroll.
Fieldline home page further down: a section on performance visibility and a wall of partner logos.
Proof. A short point of view, then a wall of partner logos. Every logo here is a placeholder for a fictional customer.
Retail, grocery and convenience industry page hero.
Industry pages. Each of the six industries gets its own page with a headline written for that audience.
How we work page hero.
How we work. The approach explained in plain language, without product jargon.
1 of 4

The problem

A software company sells to six very different industries, from grocery chains to beverage distributors to healthcare. One website has to make sense to all of them without turning into a generic brochure.

View the concept

What I made

  • 15 pages: home, an industries overview, six industry pages, customers, how we work, about, careers, a resource guide, blog, events and contact.
  • A shared mega menu, header and footer generated from templates, so every page stays consistent and new pages are quick to add.
  • Industry pages that lead with each audience's own problem before talking about the product.
  • Hand-built in HTML, CSS and JavaScript with no framework, responsive down to phones.
  • Names, logos, people and figures are all placeholders for a fictional company.

Salient, product design

Directory redesign

Directory dialog in grid view: search across the top, a folder tree on the left, and dashboard and bookmark cards.
Grid view. Search sits on top, folders on the left, and every dashboard and bookmark is a card with a short description.
Directory dialog in detailed density, with tags on each card.
Detailed cards. A density switch lets people choose how much each card shows, from compact to detailed with tags.
Directory dialog in list view with tags, type and date on each row.
List view. The same items as a scannable list for people who know what they are looking for.
1 of 3

The problem

Finding a dashboard meant knowing who saved it and which folder they used. Bookmarks and dashboards were mixed together, and there was no good way to search.

Try the interactive mockup

What I made

  • Search first, across names, tags and descriptions.
  • Filters to show everything, only dashboards or only bookmarks.
  • Recent, Favorites and Featured at the top of the folder tree.
  • Grid and list views, and three densities from compact to detailed.
  • A clickable mockup used to gather feedback from the team.