Corporate Zen's website explains their services and displays examples of their work. I was tasked with creating a new website that would help them stand out and better showcase their work.
My Role
UI Designer: sole UI designer for this website, including layout, typography, image selection, and sketches used in the portfolio section.
Project Manager: served as the main contact for the various developers involved in the project, created requirements, oversaw development.
UI Design: Finding A Concept
Above are three early homepage mockups that were not selected.
Corporate Zen's owner wanted a unique site that would stand out. Per my normal process, I started brainstorming ideas and creating sketches, while also getting a feel for what competitors were doing. Once I had some solid ideas and sketches to work from, I created homepage mockups in Adobe XD, and shared the best ones with Corporate Zen's owner.
He selected his favorites, and we worked through several iterations. Along the way, the owner commented that he liked a sketched mockup I had used as a placeholder image. Since Corporate Zen builds and designs things, we realized a website that mixed both the early and later stages of the process could work well.
With the concept and aesthetic set, I designed a site focused on mixing rough and refined, showing how rough drawings could become polished sites. To do this, I made sketches very similar to the ones I create during my normal design process for all the sites featured on the work section of the site (see image below). On portfolio pages, I followed these with screenshots of the actual site, showing how the rough sketches and ideas can transfer to completed websites. To match with the sketches and in-process feel, I used thin lines that fade into the background of the site and display as guidelines for headings. I also used handwritten "welcome" text on the homepage juxtaposed with a clean sans-serif that rotates through some of Corporate Zen's services.
The top of a portfolio page showing a mockup sketch, similar to the sketches I created when brainstorming site concepts and designs.
Corporate Zen's clients sometimes do not have extensive web experience, which can make the process intimidating. In addition to showing how complex websites start as rough sketches, I also selected an approachable heading typeface that recalls older book focused fonts. I felt that this font, based on a time when printing presses were used, gave the site a more welcoming and analog feel that should help calm those worried about the scope of the undertaking. I also felt the font fit well with the sketches and feel I was going for. I also kept the pages short and straightforward.
Of course, Corporate Zen builds and designs modern websites. I showed that side of the work with screenshots of the finished websites on portfolio pages. I displayed these in what were, at the time, some of the newest laptops and desktops available. I also chose a modern and clean typeface for the body of the site, creating a nice contrast with the heading typeface.
Screenshots of the actual sites in various devices contrast with the rough sketches and help to show how Corporate Zen moves from concept to finished site.
Project Management
As a PM, I created requirements for the website, being careful to explain how it should function. Then I worked with a team of external developers to create the site in WordPress. Once the developers turned over the site, I tested and reviewed it to make sure it met the requirements. Using Trello, I provided feedback where edits were needed.
Finally, I worked with an in-house developer to launch the site on a live server. I also reviewed and tested the site on the new server, providing feedback and checking progress. With the bugs worked out, I made sure we set up redirects to transfer the old site's ranking authority to the new site.
Next Steps
I created all the content currently on the site, with the exception of some blog posts. Since I created the content, two more sites have gone live, so I will need to add those to the "work" section of the page. By carefully documenting how I created the sketches and images, I hope to be able to maintain consistency. I've enjoyed working on this site and look forward to continuing to polish it.