Ari Kogan is a designer working for Franz Bakery in Portland, Oregon.

View Projects

Franz Bakery Site Redesign

A full redesign of Franz Bakery's website. It was a roller coaster solo effort that involved learning countless new skills, such as how to dynamically load information thrgough a jSON database.

Learn More

Naked Bread
Site Design

A simple site for a simple product. The bread contains only the most essential ingredients, and the site reflects that cleanliness.

Learn More

YouBrewYou

I try to make my favorite things. Good beer is one of my favorite things, so I make, well, average beer (for now). But I made this site to help people who have never brewed before get their feet wet with a really fun hobby!

Visit Page

The Stumptown
Scallion

The Stumptown Scallion provides the good people of Portland with the investigative journalism they need to stay alert and informed. I handle the graphics and write some copy, but it's a joint venture with two good friends.

Franz Bakery Site Redesign

Date: September 2018 - March 2019

Role: Sole participant. Responsible for concept, prototype, web design, UI design, analytics, upkeep.

Objectives: Stakeholders' primary request was overall site beautification. Specifically:

  • Build a new site that improves visitors ability to find products, store locations, recipes, and contact information (UX).
  • Improve site load times (Front-end web design).
  • Give website a more modern, streamlined look/feel.

Constraints:

  • Tight deadline.
  • No outside help.
  • Limited Javascript skills.
  • Insufficient data/budget to implement product locator feature.
  • 30+ hours/week of non-website design work.

Method: Give the project's constraints, in order to stay on track and keep stakeholders happy, my design process was extremely streamlined.

  1. Amassed five websites from similar industries and asked a group of people to rank them and elaborate what they liked and didn’t like.
  2. Combined their advice with my own design intuition and built a basic wireframe of the site flow.
  3. Built site wireframe in Sketch.
  4. Built site framework in HTML.
  5. Created style guide, designed common UI elements, defined SCSS library.
  6. Implemented site style.
  7. Was informed much of company still uses Internet Explorer 8. Redesigned site to use flexbox instead of grid.
  8. Created spreadsheet containing every product with all nutritional information. Converted it into JSON data.
  9. Created second spreadsheet containing every Franz bakery and outlet store with all store/bakery information. Converted it into GeoJSON data.
  10. Built two advanced JavaScript functions. This was one place where I got crucial outside help.
    • The first function uses product JSON data to populate each product's information page. This meant there was only one dynamically loading product page, rather than ~150 static pages. This reduced the site's load time dramatically as a result.
    • The second function takes location GeoJSON data and dynamically populates an embedded custom Google map with all store and bakery locations. This was the best I could achieve without access to data showing what stores contained which products.
  11. Implemented remaining dynamic functionality.
  12. Built all forms.
  13. Set up basic Google Analytics tracking.
  14. Launched site on time, on the company’s anniversary!

Result: Because the old site had no analytics tracking in place, and because neither site sold product, it was difficult to measure the success of the redesign. The best gauge has thus been user feedback.

  • The company’s sales team relies on the site to show off product to potential buyers, and feedback from them has been unanimously positive.
  • The feedback from the site’s Contact Us form has only contained one negative response in regards to the site, and it was an incredibly helpful visitor who let me know about an issue he was having while using Internet Explorer.
  • Every board member was thrilled with the result of the site.

Naked Bread Site Design

Date: January 2018 - March 2018

Role: Everything.

Objectives: Educate consumers.

  • Create a “Naked Bread Encyclopedia”, allowing visitors to explore in great detail what goes into their bread.
  • Design the site to reflect the brand’s themes of simplicity and transparency.
  • Implement an "Ask A Baker" feature to address any unanswered consumer questions or concerns.

Constraints:

  • 10-week project, start to finish.
  • The requested simplicity of the site didn't leave a lot of room for embellishments or flair.

Method: This one was pretty straightforward.

  1. I built a database containing as much detail as possible for each product.
  2. I sketched out the site, and then coded it. Simple site = simple code. At the time I was less confident in my coding and used Bootstrap to help. The whole thing took two weeks.
  3. Adding all the information in was tedious and I was afraid of bloat, but becasue it was mostly text the site remained lightweight and snappy.
  4. All the embellishments came at the end. Luckily pizazz was explicitly unwelcome, so this step was more compositional than artistic.

Result: The breadth of information on the site has resulted in very few bread related questions from the 'Ask A Baker' form. Most of the feedback we get is from customers thanking us for making a great product that they can trust!

Resume

Download a PDF

Technical Skills

Software

  • Photoshop
  • Illustrator
  • InDesign
  • After Effects
  • Sketch
  • Affinity

Languages

  • HTML
  • CSS + SCSS
  • Bootstrap
  • jQuery
  • JavaScript (Servicable)

Experience

Web

  • Single and multipage websites Microsites
  • HTML emails
  • Google Ads
  • Google Analytics tracking
  • Wordpress

Print

  • Food packaging
  • Point-of-Sale displays
  • Sell sheets
  • Brand guidelines
  • Infographics
  • Billboards
  • Print media ads

Education

University of Oregon

(2009 to 2013)

B.S. Journalism

Advertising Focus

Timeline

Franz Bakery

Senior Designer (5/2019 to Present)
Marketing Designer (2/2017 to 5/2019)
  • Rebuilt company website from the ground up. Developed concept and wireframes, designed UX workflows, built working prototypes, coded entire site, established QA procedures and logged detailed maintenance guides. Site launched on time.
  • Redesigned outdated packaging, including organic breads, cookies and gluten free breads.
  • Built lightweight single page websites for subsidiary companies including Naked Bread.
  • Designed HTML emails that were Outlook 2007-proof.

Travel

SE Asia (Summer & Fall 2016)

A longtime dream realized. Me, my backpack, and my unwavering determination to master Thai cooking.

Revelry

Graphic Designer (4/2015 to 6/2016)
  • Helped take campaigns from inception to completion for our food and hospitality-focused roster of clients (Marriott, Hershey’s, San Pellegrino).
  • Created print and web ads, brand guidelines, posters, email campaigns, slideshows, infographics and social media content.

Myself

Freelance Designer (6/2014 to 4/2015)

Designed websites, brand identities, clothing, logos, email campaigns and more for an eclectic roster of mostly local Portland clients.

Lead Lizard

Marketing Automation Designer (6/2014 to 4/2015)
  • Built responsive email campaigns and web pages.
  • Conducted daily Wordpress site development and maintenance.
  • Designed countless web ads.
  • Scratched the surface of Salesforce’s automation capabilities.
Email
LinkedIn