Tower Paints
🙌 Goals
- Polish existing mockup based on UX principles.
- Code final version in HTML5/CSS3 + Bootstrap4 for handoff.
- Finish project in < 1 week.
📝 Summary
The client had a rough, unfinished draft of a homepage / landing page for their new product, and wanted a polished, finished mockup that would then need to be coded in HTML5/ CSS3 + Bootstrap4. The rough draft we started with was disproportionate with overly large elements that were unintentional, and colors that were unappealing. Additionally, there were large sections that had yet to be mocked up. The project took 4 days of intensive redesign using Sketch, Adobe XD, and Invision App, followed by 1 day of programming in HTML5/ CSS3 and Bootstrap4.
📈 Process
- Consultation with client: discussion of needs, wants and wishes. Brand design guidelines and/or in lieu of no guidelines, discussion of branding, style direction.
- Rough drafts: presented 2+ versions initially to better understand client's branding style and direction. Cleaned up proportions, used Bootstrap grid layout in Sketch, made adjustments based on UX principles in both versions.
- Review + more drafts: Based on client feedback, made revisions and adjustments. For this project, we had at least 6 different drafts and reviews.
- After the final draft was approved, I coded the page in HTML5/CSS3 + Bootstrap 4, so that it would be 100% fully responsive and mobile-friendly. There may have been a few minor edits after this stage.
🎊 Results
- Completed, redesigned and polished existing mockup based on UX principles.
- Coded final version in HTML5/CSS3 + Bootstrap4 for handoff.
- Finished project in < 1 week.
🖥 Link
https://drivewaypaints.com/📣 Review
Details Part I: Redesign (V2.0, 2.1, 2.2, 2.3, 2.4 etc...)
This was the unfinished rough draft provided by the client.
Looking at it zoomed out seems ok, but once I put it on Invision App, much of it is clearly oversized, especially farther down the page. Additionally, it didn't appear to be using the Bootstrap 12-column layout - the maximum widths of the content do not match from section to section, so there was a fair amount of cleaning up to do. The biggest issue was that the client was unhappy with the design.
There were quite a few drafts in between this first draft which was handed to me, and the final draft -- in order to figure out what style the client had in mind for his brand, I usually gave him at least two options at each review point.
The client wanted something simple, but colorful and vibrant - he wanted to emphasize the qualities of this new driveway paint and also bring out the samples because most driveway paint sellers do not offer samples. I pulled the colors from his existing Tower paint logo and from the photos of the driveway paint cans to stay inline with the brand, since this is the first project for this particular product there weren't set style guidelines to follow.
Here is the final draft:
Progress went much faster once I figured out what the client liked in terms of styles - I would say it is bold, contrasting, colorful and a little edgy with the use of angles and split screens.
A few of the UX suggestions I had:
- Add a "Buy Now" button on the navbar so that on any screen, if a visitor decides they want to buy, it is easy and immediately accessible for them- they won't have to scroll up and down to hunt for the product section.
- Put the Contact section towards the bottom: In most scenarios, sticking with the standard usage/ layouts that users are accustomed to is the best UX solution, and most of the time, the contact form is somewhere near the bottom. The address and phone number in the footer is also pretty standard, so that was another suggestion I had to make it easier for visitors to contact them.
- Add an up arrow at the bottom of the page, since it is a somewhat lengthy page, it makes it slightly easier for the visitor to get back up to the main content.
Details Part II: HTML5/CSS3 + Bootstrap
This part flew by in comparison to the mockup stage. I've worked on projects where they choose not to use mockups and just code it per written agreements and requested changes-- it's so much more efficient to spend the time to nail down the mockup to a point where it's at least 90% there, than to have to recode the entire thing 2+ times.
The most challenging part of the front-end programming was getting the angled containers just right. In some cases, I've seen online where programmers opt to use images for angles, but in this case, I wanted a sharp clear line, and also, needed it to work responsively with bootstrap -- particularly the section that is both angled and split screen with text-- so I needed to code it. The problem with rotating containers is that if you have a normal div at 100% width and rotate it, then the corner will stick up - so the solution was to make the rotate <div> 120% wide, with -10% margins on the left and right, and have the parent of the <div> have an overflow:hidden;. Then - to get the text and split screen just right, I rotated the child <div> the opposite direction, and used Bootstrap for the split screen on desktop.
Another challenging aspect was the carousel for this page - I needed to code the color selectors to display above the carousel indicators at the bottom of the carousel for desktop, and below it for mobile. The color selectors needed to be fixed and on top of the carousel.
I took advantage of quite a few Bootstrap elements on this page, such as the carousel, navbar, dropdown, accordian, and of course the layout/grid system as well as margins and padding.
What I Learned
- Send EVERY new client my full set of design questions regarding branding, styles etc, no matter how far along they might be in the design process. "Almost" done might be pretty far from done.
- How to code angled backgrounds in a responsive manner.
If you're still reading, you might be interested in the final results: https://drivewaypaints.com/ Or, perhaps you'd like to go back to my portfolio.