- I migrated this Laravel website from a CPanel server to AWS
- Set up AWS server architecture
- Configured web server to the ideal Laravel stack (NGINX, PHP)
- AWS Auto Scaling architecture
- AWS S3 integration, migrated existing user-uploaded files/content to S3 cloud storage.
- Configured AWS CodeDeploy as my deployment solution.
- Completed other updates to the site which the client requested.
- Spam prevention installed on web forms
- Improved UI
- Ongoing updates to their custom admin pages.
Painting By The Brush
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.
- Lead/Designed/Developed this project.
- Worked with an illustrator and videographer.
- Developed in Angular
- Developed the back-end using PHP
- Configured the hosting solution (AWS)
- Uses AWS Elastic Beanstalk
- AWS S3 to handle user-uploaded content and to serve the videos.
- Generates custom composited image from user-uploaded content for sharing to facebook.
- Integrates with Stripe’s API to process payments including recurring subscriptions.
- Created custom video player to give painters features that are unique and make it easier for painters to paint along with the video.
The Lost Canvas – Painting Parties
- Designed, developed, and wrote copy for the home page.
- Created a web app for painters to follow from Facebook events page and reserve a seat for a painting party.
- Allows painters to get a clearer view of upcoming events than what Facebook events page provides.
- Aims to improve the attendance rate for those who have signed up by requiring painters to “reserve” a seat and receive a reservation ID. Average attendance rate for any event that does not require pre-payment is an average of 50%, which was about accurate in this case.
- One requirement of the project is that the app will not accept pre-payments.
- Prompts painters to cancel if they cannot attend.
- Attendance percentage is now close to 70% on average.
- Generates an image optimized for posting to Facebook events page at the correct size and with a styled background.
The Lost Canvas – Coffee Menu
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 – Coffeeshop, Painting Parties
- Handled the marketing and social media for the business.
- Designed logo, branding, and printed materials.
- Designed/developed their home page for their coffee and painting parties.
- Manage their Facebook page.
- Ran ad campaigns via social media platforms, building an impressive facebook following and increased brand awareness among local customers.
- Created a web app to help manage their Painting Parties.
- Designed and implemented improved menu boards to go behind the coffee bar.
- Developed solutions within their small shop to help them utilize the small space better which required a lot of problem solving.
- Helped them create a simple but custom solution for the gift cards they offer which utilizes a custom point of sale app which I created.
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.
Branding and Outdoor Signage
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.
Business Card & Other Printed Items
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
Business Card / Loyalty Card
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.
Problem Solving Challenges
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.
ConceptRx Web Application
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.
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.
ConceptRx.com Home Page
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].