One theme to rule them all
UI Project // 2017
The task I was given
My product manager asked me to design an all purpose theme within a different premium pricing tier. Up to this point my employment primarily consisted of fully-custom designed websites that fit a company’s brand. I had made a website theme early in my employment to get a handle of the page set that the company offered and it was OK for not having any knowledge of the industry (which means it was fugly & designed in Photoshop(!!!)), but it was time for an upgrade.
What was the planing process like?
Because there was no specific client, going through brand, architecture and wire framing was not paramount and we could dive straight into to visual design to streamline the process. I assessed the lower tier themes features and set out to produce a starkly different vibe that clients could clearly identify while browsing our website options.
What was the production process like?
Pen & Paper is always the quickest way to get an understanding of your idea, while you are browsing for inspiration around the web (Dribbble/Awwwards/Behance) and clipping them to an inspiration board in Figma (Figma didn’t exist yet), but it happened in Invision at the time. I take 40 minutes to peruse the web and collect so many examples (I ALWAYS have an idea in my head for these types of projects at the start) that I’ll have a pile to start whittling down to useful ideas I had not thought about.
This was also the first time I had used Sketch, which was a Mac-only app and coming from Photoshop and designing in a tool made specifically for UI design by actual UI designers was a godsend. It already took me about 30 minutes to Photoshop a bunch of ideas for a website without any direction or constraints, but using Sketch and all of its shortcuts really changed me and made the work even more enjoyable and easier to churn out high-quality ideas at a faster rate. I felt at the peak of my powers at this point and could product artboard after artboard of multiple versions of the same idea.
What did you deliver?
The standard page set for our enterprise websites are 30+ pages. A. Company & Agent Home (2), B. Archive Pages (5): Properties, Agents/Teams, Blogs, Communities & C. Corresponding Details Pages D. Multi-Use/Miscellaneous Pages: Wide Layout, 1 Column Layout, 404 E. Other widgets
“When you don’t have a client, your manager is the client. and often times they are too close to it and it often times takes a bit longer because you can always extend the deadline just a little bit more if you need.”
At the point of completion, I learned the true importance of typography taking a good site to a great site. The previous theme had fairly safe fonts, which was part of the point of the first theme, but in this round, I made the fonts more bold, added some thoughtful kerning to it and it made a big difference and it easily became our best selling theme, but not necessarily because of typography, I was just really proud of it.
I had several ideas for themes in between this and the first, but it didn’t really make sense for the sales strategy at the time as the company was growing into different products, but I learned how to pitch more effectively and it definitely shows as clients were drawn to our next theme for a variety of factors, but appearance was a clear winner. Whereas the first one had very rigid blocks that awkwardly showcased the company brand, this one was a bit more agnostic to color brand and allowed the content to be more of a brand showcase, that several companies used in very different ways.
“I learned a new tool during this time and it can never be underestimated how the right tool can enhance your capacity to create.”
— The life-long learner in me.