ADJOY

Multi-platform project to redefine how consumers
connect with their favourite brands online.

Adjoy’s goal was to create a platform that would re-think how brands interact with their consumers. This project consisted of three main phases, which were tackled via a number of design sprints based on the Google Ventures framework. The sprints took place in Tampa, FL and I would attend remotely via Skype.

For the first phase, Adjoy wanted to design and launch a standalone mobile app. Phase two involved partnering up with US retailer ShopRite to provide the same experience under a re-branded web app. Lastly, Adjoy needed a client portal platform, which would allow brands to upload & edit custom ad campaigns, as well as view statistics on their campaigns.

Role
Product Designer

Agency
Nat Guy & Partners

Standalone app

We made the decision early on to work in weekly sprints. With each new sprint, we’d build on the findings of the previous one to continually improve the usability and fidelity of each prototype. By the end of the first sprint, we had a basic understanding of what we wanted the app to look and function like, as well as feedback from real users on what worked and what didn’t. Notable feedback from users included preference towards a clean, free-scrolling feed, as well as a clear indication of earnings and easy access to them.

One of the key things I learned from a workflow perspective was that we need to switch prototyping tools. Originally, we had chosen Facebook’s Origami, due to it’s extremely high fidelity potential. However, I found that too much time was wasted during the prototyping phase due to the complexity of linking interactions and processing power required to build a fairly large prototype. From sprint two onwards, we shifted to Invision and the Craft plugin for Sketch, which allowed us to rapidly upload and update screens to our prototype whilst still maintaining a fairly high level of fidelity.

ADJOY

Multi-platform project to redefine how consumers connect with their favourite brands online.

Adjoy’s goal was to create a platform that would re-think how brands interact with their consumers. This project consisted of three main phases, which were tackled via a number of design sprints based on the Google Ventures framework. The sprints took place in Tampa, FL and I would attend remotely via Skype.

For the first phase, Adjoy wanted to design and launch a standalone mobile app. Phase two involved partnering up with US retailer ShopRite to provide the same experience under a re-branded web app. Lastly, Adjoy needed a client portal platform, which would allow brands to upload & edit custom ad campaigns, as well as view statistics on their campaigns.

Role
Product Designer

Agency
Nat Guy & Partners

Standalone app

We made the decision early on to work in weekly sprints. With each new sprint, we’d build on the findings of the previous one to continually improve the usability and fidelity of each prototype. By the end of the first sprint, we had a basic understanding of what we wanted the app to look and function like, as well as feedback from real users on what worked and what didn’t. Notable feedback from users included preference towards a clean, free-scrolling feed, as well as a clear indication of earnings and easy access to them.

One of the key things I learned from a workflow perspective was that we need to switch prototyping tools. Originally, we had chosen Facebook’s Origami, due to it’s extremely high fidelity potential. However, I found that too much time was wasted during the prototyping phase due to the complexity of linking interactions and processing power required to build a fairly large prototype. From sprint two onwards, we shifted to Invision and the Craft plugin for Sketch, which allowed us to rapidly upload and update screens to our prototype whilst still maintaining a fairly high level of fidelity.

With our revised workflow, we were able to work more efficiently and design and prototype more rapidly throughout each sprint. Findings and feedback from all sprints contributed invaluably towards shaping the user experience of the app. I found it extremely productive to test after each iteration to ensure we were on the right track before starting a new week.

Once we had refined the UX, we turned to basic branding and visual design, settling on playful card layout and bright color scheme to reflect the fun characteristics of the app. For typography, we opted for various weights of Poppins, taking inspiration from similar playful yet functional fonts such as Circular and Montserrat.

With our revised workflow, we were able to work more efficiently and design and prototype more rapidly throughout each sprint. Findings and feedback from all sprints contributed invaluably towards shaping the user experience of the app. I found it extremely productive to test after each iteration to ensure we were on the right track before starting a new week.

Once we had refined the UX, we turned to basic branding and visual design, settling on playful card layout and bright color scheme to reflect the fun characteristics of the app. For typography, we opted for various weights of Poppins, taking inspiration from similar playful yet functional fonts such as Circular and Montserrat.

Shoprite web app

Phase two of the project required us to adapt the standalone app UX and design to a desktop & mobile application for US retailer ShopRite. The primary challenge from a design perspective was adapting the mobile user experience to desktop resolution. Again, we would use Invision and the Craft Sketch plugin for prototyping.

Shoprite web app

Phase two of the project required us to adapt the standalone app UX and design to a desktop & mobile application for US retailer ShopRite. The primary challenge from a design perspective was adapting the mobile user experience to desktop resolution. Again, we would use Invision and the Craft Sketch plugin for prototyping.

Once we’d decided on the multi-card view for larger screens, we started to look at responsive design in an attempt to figure out how the cards should appear on medium-sized displays such as tablets and smaller laptop screens.

Once we’d decided on the multi-card view for larger screens, we turned to responsive design and figuring out how the feed cards should be displayed on intermediate-sized displays such as tablets and smaller laptop screens.

Client portal

The final component of the project was a client portal that would allow clients to upload and edit campaigns as well as review and export statistics. Again, we began the first sprint by discussing the customer journey and figuring out a comprehensive map that would define how we began designing the portal.

Client portal

The final component of the project was a client portal that would allow clients to upload and edit campaigns as well as review and export statistics. Again, we began the first sprint by discussing the customer journey and figuring out a comprehensive map that would define how we began designing the portal.

Once we were all happy with the overall user flow, we began to brainstorm ideas for the layout and general user experience of the platform. We looked at several different existing portal systems and table layouts for inspiration and began to make very rough sketches that we would build on later in the design process.

Taking design inspiration from systems such as Dropbox and Mailchimp, we began to map out the designs that would be used for initial prototyping and testing. One of the primary requirements from Adjoy was the ability to edit campaigns and view each campaign step in real time within the app. We opted for a two column layout, with the campaign details on the left and a real time phone representation on the right.

Once we were all happy with the overall user flow, we began to brainstorm ideas for the layout and general user experience of the platform. We looked at several different existing portal systems and table layouts for inspiration and began to make very rough sketches that we would build on later in the design process.

Taking design inspiration from systems such as Dropbox and Mailchimp, we began to map out the designs that would be used for initial prototyping and testing. One of the primary requirements from Adjoy was the ability to edit campaigns and view each campaign step in real time within the app. We opted for a two column layout, with the campaign details on the left and a real time phone representation on the right.

What I learned

I thoroughly enjoyed working with Nat Guy & Partners and Adjoy on this project. As the first large-scale fully remote project I’d worked on, I learnt a lot about workflow efficiency, time management, communication, and cross-platform design. I found the Google Ventures Sprint model to be an amazing means of validating concepts at every turn to maximise efficiency and prevent straying too far down unproductive paths.

Dabbl by Adjoy is available now, you can check it out at adjoy.com.
Downtime Dollars by Shoprite is also live now over at downtimedollars.shoprite.com.

What I learned

I thoroughly enjoyed working with Nat Guy & Partners and Adjoy on this project. As the first large-scale fully remote project I’d worked on, I learnt a lot about workflow efficiency, time management, communication, and cross-platform design. I found the Google Ventures Sprint model to be an amazing means of validating concepts at every turn to maximise efficiency and prevent straying too far down unproductive paths.

Dabbl by Adjoy is available now, you can check it out at adjoy.com.
Downtime Dollars by Shoprite is also live now over at downtimedollars.shoprite.com.

Want to chat?

hello@jimles.co