Painting By The Brush offers online painting videos to show people how to create simple artwork. It is designed for anyone to have fun following along with the video to create their own painting.
The subscription model allows users to subscribe and get 1-3 videos per month or purchase videos individually.
This coffee shop’s menu is large for a coffee shop. They carry lots of flavors and offer many coffee drinks as well as cold drinks. They also have lots of pricing rules in cases where drinks include flavoring/whipped topping / espresso shots in their prices. This all caused the previous menu to be confusing and overwhelming to customers.
The solution I came up with was to simplify the menu somewhat (but not too much), and to design it so it clarifies some of the confusing points while comfortably displaying all of the many options available to the customer.
I created a mock-up so the shop owner would be able to see how it would look in the end. I have included it in the image below. Compare to actual photo above.
To do this I decided the menu boards needed to be larger and somewhat numerous. I also added color, in part to help distinguish between hot and cold menus, and in part because the shop is colorful place and very art-oriented. I also added icons to describe when flavoring/whipped topping is included in the price and when it costs extra. This even helps the baristas understand it better too. I added icons for espresso shots. This helps customers to know how many shots they put into each type and size of drink and whether the drink includes espresso at all.
Many customers in the area are not familiar with terms like “latte”, “breve”, “frappe”, so I designed a poster from scratch which describes the drinks offered by the shop and how they are made (taking into account the specific way this shop makes them).
When designing the menu, I needed to keep the cost of materials down. I chose to use relatively inexpensive white boards as the “frame” and then I chose to have the menus printed out as posters with a thicker paper weight. I attached hooks to the backs of each white board myself and crafted a system by which they hang at a downward angle, making the menus easier to read and helping to minimize glare. Then I mounted the posters to the white board with double sided tape. Because of the low cost of printing the poster, it will be easy enough to update the contents of a menu by having a new one printed and re-mounting it. The owner is very hands-on and is willing to do many things herself to reduce costs.
The Lost Canvas Gallery is a small coffee shop and art gallery started by my mom in October 2014. They also sells things like art supplies and hand-made items from local artists. Of course I was willing to help her out in getting things set up but I also saw this as an opportunity to leverage my design, problem solving, and technical skills. I wanted to help make her business succeed by standing out in an area where many small businesses are not doing great. I attribute the lack of success of many of the other small businesses in the area to lack of or poorly executed branding, marketing and poor maintenance. Because of this I knew that she needed nice branding and outdoor signage. I designed these as well as business cards, gift cards, hanging price tags, website, google maps presence, and more.
The outdoor signage was a challenge because it was my first time designing for a sign. Despite the challenge, I mocked up an example and positioned everything to size to make sure it was right. Since the shop sells a variety of items including coffee and artwork – I chose to separate the sign into two parts to allow more flexibility in product emphasis and offerings.
The next step for this part of the project is to create some signage for the Facade.
The pieces in the image above include: Gift Card, Business Card / Customer Loyalty Card combo, hanging price tags.
I do not consider myself to be a print designer but I knew that my design skills could translate into a design that could be sent to our low-cost printer and still come out looking pretty good, which they did.
Since overhead costs and management efforts need to be minimized, we needed a solution that was low cost and easy to manage. For a business this size, a fully electronic gift card system would be too hard to setup and manage and the overhead cost would be too high. My solution was to create a nice custom printed card with a place for the cashier to write in the customer’s value and a unique identifier code.
This unique code gets cross-referenced with a simple log containing a sequential number followed by a unique alpha-numeric code. This log comes from an online system I created using AngularJS. The user can load up the page, enter the last number in the sequence, generate the new log, and print it out. Part of the simplicity of this is that it the web page does not need to be secure because new codes are generated each time the page is loaded.
View the Gift Card Log Generator
I challenged myself to create a business card that doubled as a customer loyalty punch card in order to keep costs down and keep things lean and to do so in a creative way. Ten punches equals a free coffee.
The shop is fairly small yet there are lots of items to display. There needs to be room left for indoor seating and art classes which are taught there a few times a week. Yet it cannot look cluttered. One example of a solution to this problem are these shelves which I designed and built.
They are a great solution because they utilize space very well and take advantage of vertical space while maintaining an elegant appearance. To make them, I was supplied with various old coffee tables, end tables, and desks of varying height and width. I then cut each down he middle length-wise, and painted each piece the same color. After that I took measurements and created an Illustrator document containing each shelf part to scale. This allowed me to create a balanced layout and experiment before committing to cutting the table legs to length and drilling into the masonry.
Sample page: Order
Sample page: Cart
I led the design and development of the ConceptRx.com app – working with PHP and MySQL on the back-end and HTML, CSS, and Angular on the front-end.
The example pages include an experimental logo for a possible branch of the core company. I designed this logo and helped to brainstorm the name.
I chose to use Angular JS on this project since it is the best Javascript framework I have come across. I went with a no JQuery approach to keep the size of the app as low as possible and challenge myself to integrate Angular fully. Angular’s features allowed me to spend less time coding my own solutions and more time focusing on the visual design of the app. With Angular I was able to speed up the app by reducing the number of AJAX requests needed by referencing existing data between pages.
Each main features of this app had complex challenges which I had to find unique solutions to. For example, the Order Page had many requirements involving the sorting, displaying, and automated aspects of the list. The Order Page is intended to do many things that make a pharmacist’s ordering process easier. I want to go into more detail but I won’t because there is a lot to it. One of the big challenges was designing all of the features we wanted into one list without it becoming confusing and hard to use.
The Cart Page also had some challenges that most carts or checkout pages don’t have. It needed some features that are specific to the pharmacy world including: The ability for the pharmacist to see their current order broken down by supplier. The ability to include or remove all items by a specific supplier from the order. A check to let the user know that they have met the minimum required order for that supplier. Ability to edit the order inline. Alerts that notify the supplier of various aspects of the Supplier/Price they have chosen for a given drug.
Since both the Order page and Cart page needed to use a common feature for adding and editing items in the current order – I used a modal that I created to contain the tool required. I created the modal as an Angular add on and built in short cuts and customization options. It allowed me to build the tool within it smoothly despite its complexities. It deals with multiple lists of data, makes two-way references back to the original item row, and does its own calculations to help speed up the user’s ordering process.
Once the App was ready to roll out, I created a roll out process. This App had some unique requirements and I created a roll-out process which we followed for the initial roll out and future version updates. Customers from the old system had to be transitioned into the new one. This involved importing their login accounts into the new system, re-integrating the new software into the pharmacies workflow. For new customers, we had to integrate our software with whatever software they were already using to track things like current inventory numbers, and inventory usage data.
I designed, coded, and wrote copy for the home page. I also created the logo and brand identity. I designed this home page to let customers know what ConceptRx is and what it does in as quickly as possible. This meant clear and concise copywriting and limiting unnecessary or misleading text and imagery as much as possible.
ConceptRx started years ago, before I was involved, as a platform to help pharmacies manage their inventory. The service gained lots of initial interest from pharmacies. At the time it was cutting-edge. However, customer base quickly diminished due to a clunky interface and countless usability issues. This eventually spawned an idea to rebuild the company with a new identity and completely new web application.
I worked with a team to plan and implement these changes. I created the new logo and brand identity, and worked to architect the new app and it’s features. I even worked with our print designer on brochures and postcards.
The homepage is designed to be 100% responsive. Whenever possible, I try to do responsive development using a single HTML document whenever possible. This is as opposed to having a separate document that loads adaptively depending on the device being used to view. I find that this can make future updates more straightforward, makes the whole process cleaner, and causes the site to work well on intermediate screen sizes (such as when a desktop browser window is not at full size).
The next step was building the new web app. More about the App [here].
Brandon Henson 