Information Architecture
Content Site Maps: We laid out the whole site to create a hierarchy that made sense to all of the website's visitors, separating the content in different groups that where later represented with different navigation elements.
Information Architecture
Lo-Fi Wireframe Designs of the entire website:
Working hand in hand with the client is an educational experience for both parties: it gives you the opportunity to learn more about the client's business and requirements, as well as helps the client have a more content and objective oriented perspective for their website's strategy.
One of our goals was having clear call to actions on every page, or at least, on most of them. We worked with their marketing team on creating processes that started online, but connected staff from both their HQ and their retail stores.
Visual Design
I had the opportunity to work with Alcibiades Barahona on the design process for this project. Alcibiades brought the wireframes to life, following the client's brand book. We iterated between a couple of versions, until we reached a design that was satisfactory for the whole team.
The process of working with my client's marketing department, their advertisement agency and my team's designers, was a enlightening experience as well as a project management challenge, as I introduced SCRUM methodology to my work process.
Designing the whole project as wireframes, made the visual design phase a lot easier, since we were able to focus on the branding aspect of design, with all the marketing and content decisions already in place. This process of iterations and having multiple prototypes of different level of detail informed must of the decisions that had to be made, by both our client and our team.
Front End Development
I coded the pages using Bootstrap, to have a functional prototype that was responsive and gave the client a better picture of how users would interact with their website. This prototype help pinpoint content requirements, as photos needed for the banners, or missing copy on individual pages.
The custom Bootstrap markup was the foundation for the Wordpress Theme, that we built from the ground up, using Underscores as a starting theme. Our objective was a complete control of the markup, CSS styles and Wordpress theme, something that we couldn't achieve using a comercial theme.
Backend Development
Wordpress & Woocommerce: Wordpress proved to be a flexible and reliable backend framework for developing the website to our client´s desires. The combination of flexible plugins, a strong documentation and the incredible functionality provided by Woocommerce, made the development process a breeze.
