The current SaaS was in need of a redesign and had new functionality being added. I was tasked with refactoring the huge css file into more maintainable files with a less preprocessor.
Prior to the second overhaul, I created a pattern library with material design concepts and gave it a slightly more open look and feel along with a new font for the headers. When rewriting the less files I used semantic naming conventions for future capabilities like color theming to be added with ease. I then implemented the new design for the SaaS called Dockett.
I liked the clean look of the Ubuntu font but also wanted something more conservative for the headers. That's how I landed on Source Serif Pro for the headers. The original software had extremely tiny inputs I wanted to open things up enough for the eye to differentiant but needed to keep it tight to minimized scrolling. Also, the original had the label and inputs side by side which doesn’t lend well to readability so I stacked the labels and inputs.
Refactoring large files should be broken up into more manageable parts. Save an old copy and start from scratch slowly adding only what is needed. Use semantic language instead of color names that can then easily get changed to not the actual color.
Cristina did not have a website for her business yet. I met with Nichole, her daughter to discuss the most user-friendly ways for people to schedule an estimate. After reviewing some other cleaning sites and really targeting the immediate call to action we landed on this design.
In the initial discovery meetings, I found out that people would want to learn about three main things when searching for a cleaning service.
After we defined users’ needs I created some sketches and then moved on to making a prototype in Sketch. Another designer created the logo for Cristina. Once we got that I decided on fonts and then applied them to the final design draft. The last challenge was learning exactly what data we needed to collect. The main thing was making sure that people outside of the greater New Orleans Metro area didn’t request service. I solved this by implementing a zip code drop down only offering the zips they would service.
For the actual build-out of the site the stack I landed on using was bootstrap, npm, express, and Mongo DB. The site is mostly static except for updating the testimonials. Due to this, I decided to opt for a non-CMS build.
Npm is a bit more difficult to work with than anticipated.
The current Clay Creations site was in much need of updating. The wordpress and php both needed to be brought up to current versions as well. Also, we needed to retake all of the images of the inventory so why not do a total redesign for them. Along with this, the client was not able to manage their site whenever they needed to change the inventory or the show dates.
I started with a fresh up to date install of wordpress and the barebones theme of twentynineteen. Next, I wanted to find the most simple way for us to use the currently existing paypal structure and keep it simple for any layperson to still be able to update without too many issues. I went with PayPal Simple Cart its use of shortcodes is easy for the client and works like a charm.
I wanted to keep the color scheme they use with the red and blue. But I wanted to add a bit of the look from the clay studio. To add that I changed the background to the clay splatters showing some of the methods they use in their studio.
Keep your database updated. Use as few plug-ins as possible and ones that have lots of installs.
Here are a few examples of some websites that I have completed and worked on.
inVision mockups or redesigns
Prototype for website.
Rush simple prototypes for a yet to be named construction project bidding SaaS.
Redesign that I created in combo with material design components.
The design flats that I used for creating less from scratch for the during app creation.