Case Study: MKM Serwis
I worked with MKM Serwis in 2015 to create a new brand for the company. This time the management wanted to deploy a new website that is mobile-friendly, optimised for search engines and has a modern feel and look. To completed this challenge I teamed up with amazing copywriting team from Zmień Zdanie. So far this is by far the best project I worked on.
The Beginning
Every good project should start with clarification of client needs. That’s where the brief comes in. This simple tool is essential for every project that I’m a part of. After creating a brief I know what colors to use, what the company does, what are the services and products it offers and what is the point of the website.
My brief template is available to use and share on my GitHub account here. I’ll add more tools soon for you all to enjoy!
# Brief Template
## 1 Introduction
*Deadline, contact information for person responsible for the project on client side.*
## 2 Enterprise description
*What services are provided by the client? What kind of products it offers? What is the business’ mission and values?*
## 3 Users
*For whom the webpage is developed? Describe user’s segments that will visit this webpage.*
## 4 Website’s goals
*Describe main goals Of the website and users actions critical to achieve them.*
## 5 Website's structure
*Point out sites and sub-menus for main menu as well as all the websites that have to be created.*
## 6 Additional information
*Choose additinal services and informations*
- [ ] Static website
- [ ] Website which uses CMS
- [ ] One language website
- [ ] Multilanguage website
- [ ] Hosting needed
- [ ] Domain needed
- [ ] CMS Training
- [ ] Technical Support
- [ ] Newsletter implementation
- [ ] Mail accounts creation
- [ ] Copywriting
- [ ] Search Engine Optimization Services
# Visual Guide
## COLORS
*Describe what kind Of colors palette you would like to use. Or add colors right away.*
## FONTS
*Describe what kind of font you'd like to use or paste a link to the font Of your choosing.*
## SIMILAR WEBSITES
*Paste a link to concurence website and describe what you like about them and what you don't like.*
## INSPIRATION
*Describe additinal visual elements that you like, based on other websites. Provide a link and describe a websites - what you like and what you don't like*I created this template using Markdown syntax, because my favorite writing app this days is iA Writer.
As you can see in the brief, there’s really a lot of information that I can gather. Starting with general informations and ending with design specific questions that enable me to create a webpage that my client will love.
The Design
The brief is completed. Now I have a complete set of information needed to complete the project. It’s time to start the design process.
Along with that I send a brief copy to the copywriting team Zmień Zdanie that I collaborated with on that project so they could brainstorm ideas about the content they needed to craft.
I always start designing with pen and paper to create a simple wireframe for the webpage.
Personally I think that using any dedicated software to create wireframes is a slight waste of time. The simplicity of a pen allows me to think and work faster on different concepts. Saying that I sometimes use a brilliant app from Adobe called Comp (believe me, I see the hypocrisy in that :) ).
Wireframes created? Great. Let’s move on to so-called high fidelity prototype (Photoshop project) of a webpage. When creating high fidelity prototypes I usually have to go through a few cycles of iteration.
Here’s the first pic I send to the copywriting team:
It’s quite different from the final product. The idea stayed the same, but it was revised due to issues like SEO and client’s preferences. The thing I try to avoid at all cost is creating prototypes with every single detail in them. What I mean by that is creating every single webpage that will be shipped in the final product, like a separate project for every service.
Instead of that I create what I like to call „Views” (inspired by MVC Frameworks). Thanks to that I can create only 1 view for each template of a web page like Single Service, Services, Main Page, Gallery, Sample page and so on.
That saves a tremendous amount of time, enabling me to finish a page faster and more efficiently.
The fun part — coding
With bits and pieces figured out I can start creating a working webpage. When the design is agreed on the copywriting team can create content and I can peacefully work on the implementation of design.
I don’t jump straight to coding a new WordPress template. Rather than that I first create a markup of a webpage in HTML and CSS.
I can send it to the client for the last improvements and changes that he or she wants (like changing footer and nav bar in this project).
I also never code every single webpage that will be found in final project — again all I do is code „Views”.
With views completed and all the code prepared for WordPress implementation it’s time to use some PHP. First of I start with WordPress starting theme called Underscores. It saves a lot of time and permits me to deal with the most important issues.
For development I use MAMP to create local server and develop independently on my machine.
Thanks to that I don’t have to be concerned with anything and I can prepare everything for deployment on client’s server. For ease of work I use GitLab with free private repositories (it’s great). Having a repo initiated in MAMP folder it’s easy to make changes and push them to a remote.
46 commits later — the webpage is ready to be deployed (yay!).
Deployment
The deployment with WordPress can be a bit frustrating at times. On my local server I always create a 100% working web page with all the content, installed plugins and everything other that client needs for the success of a new webpage.
For deploying on client server I use an amazing plugin called All-in-One WP Migration. This plugin recreates my local build on clients server with just one click.
After that all that’s left is running a QA for a last time on a live organism, shaking our client’s hand and moving on to the next challenge.
Intrested?
Every new project is an opportunity to learn. Right now I’m looking for a project that involves a lot of animations. If you have such a project — contact me. Let’s collaborate!
As always if you have any questions/suggestions — comment below or message me on Twitter — @mrkaluzny.
