This case study illustrates the full process of re-designing and building Elleday's website. Elleday.com is a travel guide platform that personalises travel tips.
There's always a lifecycle and structure to each project. This was the system of how we created Elleday.
The client provided what they had in mind over meetings and in documents, detailing the scope and work that needed to be done. I met with the team that the client hired for marketing and development to structure our collaboration workflow.
Based on its original design and brand, I was able to put together a plan for the redesign of existing and the creation of new pages.
Using the Bootstrap framework, the approved design were coded out into clean and structured front-end code.
Both the design and functionality were reviewed by the team to ensure it appears and works the way it should on all browsers and devices. The product was sent to the client for review after testing.
Once the client gave us the green light, the site went for further development. Elleday.com was given to the back-end developer to work on.
Before diving in to each pages, the brief is broken down to create the information architecture for Elleday's platform.
Based on the brief, we put together the wireframes that were coherent to how the final design would turn out.
Like all of my work, responsiveness was one of the key focus of creating Elleday.com. The presentation of intuitive structure and placement was what we focused on when creating the guidelines of the responsive site. Certain elements are displayed or hidden depending on the device used to access the site. It was important that the site could effectively retain users across all devices.
Elleday.com was built on Bootstrap and embodies Bootstrap 3's default UI kit. With that, I customised it for consistency with Elleday's brand.
Once we received the green light from our client, the style was implemented and other pages were completed.
I used Twitter Bootstrap for our front-end development framework. All of my code are structured with clearly defined comments.
On top of Bootstrap, I built a system to support the back-end development with a consistent implementation of the user-interface design. This directly impacts scalability on a positive note.
The front-end code is strictly and carefully indented and uses the commenting system as titles within the code. This enables any future development work easily understandable by other developers.
To ensure images and icons appear sharp and clear in all resolutions, especially those of high-density screens, they are all of high-qualify retina format. Only SVG or monochromatic icons are used.
Ott Marten Lunge