Zing.co was a company website redesign project I completed late 2014. I worked directly with the CEO of the startup to design a new version of their main product website in the point-of-sale software industry. The website goals were to 1) show the Zing brand was a modern and reputable software provider 2) explain the benefits and features of the software 3) provide a clear and easy signup process.
The Design Process
- Branding Discovery
- Wireframes and Copywriting
- Design Directions
- Visual Mockups
- Front-end Development
Below are deliverables created for each phase of the project starting with the final designs and working backward though the process.
Front-end Development
We decided to go with a front-end framework in order to speed up the development process and ensure updates where quick and easy. We used the Design Modo Startup Framework which came with dozens of interchangeable HTML/CSS layout elements that were responsive and retina ready. The framework had the flexibility for me to customize the look enough to offer multiple unique design options.
Visual Mockups
Homepage
Register Page
Back Office Page
Integration Page
Design Directions
Once the wireframes were completed, this then gave us a good idea of the content elements that were going to be on the page. I then made rough mockups in Photoshop of different visual directions. Below are a few examples of the rough concepts I presented when discussing different directions with the client.
Wireframes and Copywriting
Download all wireframes in PDF or see 2 primary pages below.
Homepage
Register
Branding Discovery
The project goal was to create a very modern visual style and messaging that said “top tear software”. I started off with a competitive analysis which consisted of a feature comparison table and messaging summary of competitors in the space. We used these assets when deciding which features to promote, write our initial copy and set ourselves apart from the competition.