About Us

About Us

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

Learn More

Recent Works

portfolio
portfolio
portfolio
portfolio
portfolio
portfolio

Connect With Us

Designing and documenting a design system for DiscountIF Product Team.

Project


DiscountIF Digital Foundations was to establish a solid base upon which to build on-brand and consistent products and design systems that mirror our digital brand guidelines. This, the Project Luke design system is an evolutions of DiscountIF’s digital design language - a responsive web design system. All design assets were included in the library to be accessed by all members of the team and reduce the work load on myself providing files and assets.


Process


The design system was created to support the rapid prototyping and development of DiscountIF products. At the time we were developing both a B2C and B2B strategy and working on integrating with third party technology partners. This design system was created to be able to control the brand assets with our technology partners while providing a consistent voice across the company internally, across the operations team, design team and management.


At the time of creation, we had developed and succesfully developed our MVP. It was therefore key that we had a robust approach in place as we developed our new B2C site to support rapid growth. It was also vital that we were able to group all of our findings from our research and provide an up to date component library that would serve as a central hub for both our internal team, external developers and technology partners to support development of upcoming products and features.


The system was originally designed in Sketch and then migrated to browser, using Bootstrap 3 and CMS to host assets such as advertising specs and website components to simplify developer hand-off. In the end the site grew to provide a range of supporting documentation an served as a central hub for all DiscountIF activity.


  • Project Name DiscountIF Digital Foundations
  • Involvement Product Designer
    Project Lead
  • Date 2015
  • Category System Design, Product Design, Branding.
  • Credits Petar Payov - System Engineer
TheGourmetHeader
TheGourmetHeader

Built on Pre-Existing Framework

The site was mocked up and tested in Sketch and Invision. Once validated it was built responsively within the browser, on our already established framework, Bootstrap 3. Once fully tested and as development hours allowed, the plan was to integrate the digital design portal into our pre-existing CMS to allow elements to updated by all members of the team rather than just myself.


TheGourmetHeader

Brand Guidelines

The brand guideline documentation had previously been shared via PDF in order to keep key brand messaging consistent across the various touchpoints. However by migrating to the online portal, key assets and supporting documentation were able to be included. This meant that as new team members came onboard, they could use the portal as a quick finder tool.


TheGourmetHeader

Linked File Library

To support the operations team (not exclusively), key files were integrated within the pages to allow colleagues to quickly locate relevant files. These files were automatically synced across Dropbox in the same way as many teams use, supported by the online directory of files.


TheGourmetHeader

Responsive

Being built on a Bootstrap 3 Framework


TheGourmetHeader
TheGourmetHeader

Component Library in Sketch

The DiscountIF UI had now been established and built within Sketch. As the linked files were automatically updated and hosted as links, this provided developers a quick snapshot for any development enquiries rather than waiting on replies via email, slack etc. While some decisions still required an conversation, the ability to quickly check UI elements directly within Sketch files ultimately saved hours of development time. These elements were also focused on the upcoming B2B product in the pipeline, with lessons learned from the B2C project being funnelled back into this and future product updates.


TheGourmetHeader

Artwork Specifications

While artwork specifications were outlined in our branding guidelines, mainly to ensure a consistent message across social media channels, the system also allowed direct linking of files. This meant that key artwork files could be located, updated and delivered quickly as they were required.


TheGourmetHeader
TheGourmetHeader

Documentation

Google docs provides the perfect solution for the network of documentation this system requires. On top of its collaborative merits, the ease and speed of setup, content management, headers, bookmarks, linking and document outline allow the documents to navigate like websites, while all of our internal documents and branding guidelines were already hosted on the platform.


The Future


The 'DiscountIF Hub' as it came to be known, was originally designed to assist the various teams to be able to work closer together and be able to deliver products faster, by providing a one-stop shop that combined all assets, documentation etc. At the time the company strategy was focusing on rapid prototyping and testing of our latest consumer site, with one eye being on our upcoming B2B strategy. A key requirement was that the existing assets would be utilised in this B2B product and infact many of these assets, including the brand guideline documentation and web components, had already been created for the innovative cashback consumer site. A more detailed breakdown of this project can be read by clicking here.


The hub allowed the entire team, from myself through to the engineers and CEO to simplify their workflow, with less requests for documentation for example from the operations team based in Malta. The developer handoff process was also streamlined as the developers were able to easily locate assets through the component library, while also being able to refer to key brand guideline documentation, all supported by our existing workflow through Invision etc.


Thanks for reading.



TheGourmetHeader

Like what you see, fancy a chat? Learn more about me, follow me or  get in touch.