This project was a proposal made to my employer (as of this writing), in response to their expressed desire to overhaul their existing website at modernimpressions.com. Comparisons can be found lower below, but the basic summary was as follows:
- The current website lacks any responsive design
- The current website has improper mobile handling (it loads a different page and the navigation is still poor)
- The current website is using static images and table rows/columns for most elements, making changes expensive/complicated
- The client is unable to make their own content changes/updates to the current website
- The current website is using design philosophies that are at least 6-7 years out of date
- The current site does not follow current accessibility guidelines
- The client wants to create CTAs on their new site
The first stage was to perform a technical evaluation of the current website and design. I used several different evaluators, with results varying on how each one specifically tested the site. One aspect to consider was that overall performance on the site as-is, is actually pretty high, though this is due to the lack of content on the site more than anything else.
The primary areas of focus were clear, I needed to redesign for responsive screen sizing, I needed to optimize their SEO and provide them with the tools to maintain it, implement caching to improve performance and ensure that the CMS they use would be manageable by non-technical users.
The next phase involved researching competitors, and taking note of design trends within the client’s industry. I targeted the 5 top competitors in their industry that serviced the same geographical areas. Broadly speaking, these competitors have adopted modern designs, several still have poor or no responsive implementation, and are also loading low-resolution imagery that cannot scale without loss of quality. And most had poor SEO implementation. Vision Office Systems had the highest rating in the same evaluation as above, but this was only based on a code/content level, their mobile design was poor and would fail a user experience evaluation.
From studying those sites, I established the following design pillars for this industry:
With the design pillars established, and using the existing corporate branding, I aligned that with their own “wishlist” as well as suggestions of my own, to create a Moodboard and Brand Guide. I was able to identify the font used for the existing logo, and could provide a license to it via Adobe thus unifying the font family used for the entire site.
From there I designed new UI elements that could be implemented throughout the website, with a specific focus on mobile friendliness as that was a major item from their wishlist.
This was a unique experience, as the current web landscape was a relative unknown to this company. As such, as a proof-of-concept, I provided a total of 6 “roughly-completed” page designs for the site, as well as mobile mockups. These can be seen below, with comparisons to their current/old counterparts.
Full Design Gallery
In retrospect while this project did leave me with a handful of entries into my portfolio; the amount of pre-proposal work I put into this, due partially to frequent praise on the designs suggesting I was the top pick, has taught me to carefully determine how far I’ll stretch to try and get the job ahead of time. I was passionate about this design and at this point, had nearly designed half the sites required pages by the time of the proposal, with several others in early drafts.
This was actually my first project using Adobe XD, and it allowed me to prototype web page interactions and transitions, which spiced up my proposal in a way I don’t think I could have managed before.