We are excited to announce the launch of Crowdz’ newly designed website - www.crowdz.io ! The new website is more user-friendly and provides easier access to features, pricing, and a company overview. It also comes with a bunch of new videos that showcase the humans behind Crowdz and summarize the product. We had limited time to produce the new website from the ground up. Here’s how we did it
Overview of the project
Members of the team sat down to draft the new website’s needs by looking at the existing site, and considering where the company is headed. We created a scheduled plan, dividing the timeline into milestones. A challenge arose, in that our new branding was barely done. We had little visual content from which to work. We needed to get creative, quickly. We hopped into the photoshoot, snapping pictures of various objects. This gave us a selection of all-purpose imagery with which to start building our design.
User Interface + Copy
From the generic plan, we were able to start organizing pages and their content with very rough sketches. As soon as this was done, we knew that we had a solid plan and that the next steps should go relatively smoothly. After all the content and layout were in place for each page, we determined user navigation, from the footer to the header, and within each page. As we were building the page interfaces, we started integrating copy (wording), which was later revised by a copywriter
Elements Rules Creation
Once we knew where we would need titles, subtitles, paragraphs, buttons, secondary buttons, etc., we created rules to make the design process easier. These rules translated as ‘Style’ and ‘Symbols’ in Sketch App. We created some for Desktop and Mobile using best practices and according to our own needs.
Sketch layouts + Mockups
Soon we jumped onto the pixel-perfect mockups: the marriage of design, user experience, and user interface specifications for production. With rules in place, a solid branding base, and settled navigation, the process went without too much difficulty. We were still creating content in parallel, such as video and photography. Placeholders marked where in-progress pieces were plugged in later.
Prototype + References
We created a prototype of the navigation using the InVision application. Using InVision’s Craft tool permitted us to update the prototype dynamically from Sketch. We were able to share with the team, get their feedback, and integrate changes before sending out the final mockups to the developers. For the dynamic elements, we provided developers with references to animations and component behaviors to communicate our idea
Build
We teamed up with engineers to build our website and decided to create a personalized theme using WordPress.org. Certain elements are already tagged for future changes and will be editable in the CMS (content management system)
Launch, Test, and Review
Our website is freshly released and undergoing testing through peer feedback and our own tools: PC, MAC, iPhones, Android, tablets, etc. The goal is for everyone who visits our site to get the best possible experience. We are keeping an eye on legibility, contrast, and inclusivity as we review it. Thanks for reading. Let us know if you have feedback on the new website!
