FMP: Final updates

After having my final group presentation with David and my peers, I have decided to focus on my final major project updates ahead of summative deadline in 3 weeks while the feedback is still fresh in my brain. I started by making a to do list of what I need to. I find that this really helps me keep on track in terms of time management especially:

FMP to do list

Online web browser extension prototype:

I’ll start by refining my walkthrough outcome by adding in sound and a voiceover to make the video more engaging, and also to help explain how the software works in terms of user experience. I did some research regarding royalty free music and found the website Thematic. It has lots of royalty free music – all that’s needed is a credit in the caption if uploading to Youtube which is ideal. As for the voiceover, I will simply use the voice memos app on my iPhone and record myself in order to 1. save time, and 2. not to run into any ethics complications.

Walkthrough animation work in progress screenshot

I did this using after effects and this was a pretty simple process as I had already done the difficult part of creating the working prototype.

I then simply uploaded the video to my Youtube channel (unlisted) and added the music credit within the description:

Referencing music from Thematic on YouTube upload

You can find the finished video here:

GIFs & Stickers:

Next, I’ll move on to animating my stickers so that they are moving GIFs. I find that moving additions to branding such as GIFs really level up the professionalism and enthusiasm within a brand, so GIFs are a must in this project. I also find that they will help massively with community building via Instagram – users will be able to choose the GIFs from the GIPHY library and add them to their stories to share their experiences of money saving and steps towards female equality via the AntiPat software.

I will animate the stickers into GIFs using Photoshop. Although the process can be quite lengthy, it is quite a simple process overall. I learnt how to do this in 1st year in a tutorial with Matt when we were looking into Scanimation.

GIF creation using Photoshop

I simply exported PNG versions of this logo marque at different points so it looked like it was turning. I only used 6 frames as I wanted it to look simple and not quite seamless (because GIFs usually aren’t because of how low their size has to be). Overall I’m really pleased with this outcome and will create the rest of the GIFs in the same way:

GIF 1

After having created the full GIF package, I decided to upload them to GIPHY in order to get full effect from my project. Luckily, I already have a GIPHY creator account (this is a VERY lengthy application process), so I can upload them straight onto there. They take a few days to be approved, and then they will appear on GIPHY based on the tags that I will give them. Although this process seems a little unnecessary, I felt that it would be great to see the GIFs in real life and not just mocked up. I think it adds an extra level of professionalism to my project and although I’m aware that it’s a hypothetical project at this point, I think it has real potential to become a real life working project.

GIF uploaded to the GIPHY library

In-store AntiPat

Feedback highlighted in my final tutorial was that the user journey of in-store AntiPat. The user journey needed to be improved to be more realistic and legible in a real life situation. Currently, the in-store version of AntiPAt is a QR code which is scanned when you get to the checkout (similarly to how it works online). However, this just wouldn’t work in real life. You wouldn’t get to the checkout, scan everything, bag everything, and then go and return things to go and get cheaper items when there’s a massive queue behind you or you’re going to miss your train, etc. Instead, a “scan as you shop” method would work more efficiently. David mentioned that I could use a futuristic technology to achieve a better, more legible system for the in-store version of AntiPat. I decided to research futuristic technologies which could work.

The first thing I looked into was NFC (Near-field communication), which is a set of communication protocols for communication between two electronic devices over a distance of 4 cm or less. NFC offers a low-speed connection with simple setup that can be used to bootstrap more-capable wireless connections. For example, contactless cards, Apple Pay, etc. Although NFC could be a viable option for the in-store version of AntiPat, there would be cheaper alternatives that do just as good a job. For example, QR code stickers could be printed and stuck to each product, or each product price tag on the shelf. This could be scanned using a smartphone camera, which could open a webpage that could scan the shops inventory and search for cheaper alternative products. However, I think that QR codes are pretty “2015” and that I could think of a much more innovative and futuristic method for in-store AntiPat. I decided to talk to my brother who is very technologically minded and has lots of futuristic knowledge for subjects like this. I showed him my presentation and explained the challenge that I was facing in developing a software for in-store AntiPat to work through. He told me to look into microchipping and NFC, but also mentioned Amazon’s recent grocery store feature whereby the trolleys are “smart”. He explained that the trolley’s have barcode scanners 360-degrees around the trolley, so that when you put an item in the trolley, it automatically scans the barcode. Furthermore, it has a weighing scales which weighs the product when placed in, or taken out of the trolley. It also has a screen to help the user to believe that it’s really working. I thought that this was a perfect futuristic technology for AntiPat to be involved in. In my last meeting, David mentioned that if I was to use a futuristic technology such as this, that it should be justified (so for example, Amazon could sponsor or partner with AntiPat to show their support for women and the Pink Tax issue that they face).

RESEARCH: Amazon Fresh trolleys

I found the below video on YouTube which demonstrates the Amazon Fresh trolley in action. Although this technology is fairly advanced, aside from the cameras, it is essentially just a “self checkout” on wheels (apart from the clever cameras/barcode scanners). I think this justifies the use of a smart-trolley such as this for in-store AntiPat – and is a realistic solution for the near future.

So, how I would propose for AntiPat trolleys to work financially would be that Amazon will gift a certain number of trolleys to each participating store (in order to show their support towards the AntiPat movement). I think that this is realistic in terms of the other movements Amazon has previously partnered with, such as donating $10m to the BLM movement (https://www.aboutamazon.com/news/policy-news-views/amazon-donates-10-million-to-organizations-supporting-justice-and-equity). There is also a site called “Amazon Smile” (https://smile.amazon.co.uk/gp/chpf/homepage?orig=%2F) which means that when you shop at smile.amazon.co.uk Amazon donate to your favourite charitable organisation, at no cost to you. Charitable organisations available include http://www.forwomen.org (which is a feminism and equality advocist charity). I feel that this strongly supports my justification for Amazon jumping on-board with the AntiPat software.

My next steps will be to develop an AntiPat trolley prototype and/or mockup to illustrate clearly how the trolley would work. To do this I will create drafts and show it within my upcoming 1:1 tutorials, along with showing it to family and friends who are unfamiliar with my project. This will help determine whether or not my explanation and diagram/mockup/prototype is sufficient for a clear understanding of both the idea and the execution.

I started by searching for existing shopping trolley mockups but couldn’t find anything suitable for my needs. So I decided to create my own. I needed to create a screen which featured the UX and UI of the in-store version of the AntiPat software within the AntiPat trolley. This is the basis for the interface that I came up with:

Smart trolley design

This is very consistent with the online browser add-on version of the AntiPat software, which helps maintain cohesivity of the brand identity across the different outcomes. This also increases brand recognisability which is also a key factor in my project. The main addition to this piece of design is that it includes a map for the user to follow in order to guide them to the cheaper alternative product. This improves the user’s journey and experience of using the software, which is something that was previously picked up on in a group tutorial. I feel that I have dramatically improved the user’s overall experience of using the AntiPat software in-store, and this method is totally realistic and legible, as opposed to my previous idea of scanning a QR code at the checkout and having to change every item by going through the shop again.

1:1 With David – Thurs 29th April

In my tutorial with David today I asked him about my idea of the Amazon trolleys. He agreed that the idea would work but suggested that it be an addition to the solution rather than the main aspect, just because of accessibility (so for example if a store only had say 5 trolleys, then only 5 people could use the software). This was really useful feedback as I hadn’t thought about it from that perspective. We discussed other options, such as a voucher being awarded to shoppers who scan their AntiPat QR code at the checkout for the difference that they would save, or maybe the difference in what they would pay would go to a feminism charity to help fund AntiPat in the future. Another option would be to go back to the “scan as you shop” method by using standardised devices found in most supermarkets. Although I think the principle of this idea is there, it wouldn’t work across all shops – only the larger supermarkets. After thinking about all of these options in depth I have decided that the best option would be for the difference of the saving being awarded to the shopper via AntiPat. Although I think that a donation of the difference being made to a feminism lead charity would be most beneficial – the incentive just isn’t there for most people in reality. People need to save money themselves in order for this to work. So, how it will work will be back to the QR code method. Upon entering the shop, shoppers will have the chance to scan a QR code which leads them to AntiPat’s sign-up page where they can register. Once registered, they will have their own unique QR code to scan at the checkout. Once scanned, AntiPat will work out how much they could have saved if they bought male or unisex alternative products and will provide them with a voucher to spend next time they visit the store – PROVIDING that they share their experience on social media. This will give AntiPat the exposure that it needs in order to be noticed by more consumers and retailers and in turn help demolish the Pink Tax. The trolleys will still be available in selected stores but more as an addition to AntiPat rather than the focal point.

I’m really pleased with the outcome of this tutorial because I now feel much more confident in my project outcome – specifically the user journey of the in-store version of the AntiPat software. My project feels much more refined and I’m really pleased with how I have applied my developments based on peer and tutor feedback.

Promotional Animation

I used After Effects to create my promotional animation for AntiPat. I wanted this animation to be easy to follow, engaging and also aesthetically pleasing. I created a storyboard to help plan out the animation. I learnt the storyboard technique back in my first year, during our Movement module. I regularly apply this technique in my work as I find it helps me keep on track with the animation itself, as I often get fixated on learning the animation techniques themselves that I forget the actual storyline of the animation. Here is my storyboard:

Animation storyboard

The illustrations in block 4 of my storyboard are taken as n idea from the Ax The Pink Tax campaign (axthepinktax.xom, 2019). I wanted to compare the two products and talk about the price differences so felt that this illustration was perfect for that. However, I wanted tp create my own illustrations to maintain brand consistency throughout the project so I did this using my iPad pro and Procreate. These were the results:

I’m happy with the illustrations and feel that they fit well with the aesthetic style of the project by using bold, vibrant colours mixed with harsh black outlines. I also think that the hand-type on the price tags gives the project a friendly atmosphere. Creating the animation was tough, and as I have mentioned previously, I often struggle to use the After Effects software effectively. However, after watching and learning via many YouTube tutorials, I can definitely feel that my software skills are improving in terms of speed, efficiency and overall software-knowledge. I’m learning the keyboard shortcuts which makes the process a lot more time-efficient. These skills that I’ve developed over the course of this project will help me massively in the future, as I intend to start creating motion-graphic work more regularly using Adobe After Effects for some of my freelance contracts in the near future.

Animation work in progress screenshot

Creating my design document

I created my design document as I made revisions and additions to my FMP, as I have found that in my previous projects, it’s much easier to update the design document as I go along, rather than leave it to the last minute and have to go back over all of my work. It’s just a much more efficient way of completing the work for me. Sometimes it can get a little overwhelming as I always have to have multiple windows open and remembering to update the design document can also be a challenge, but overall, it’s a much more efficient way of working for me personally. This is something that I’ve had to “trial and error” over the last three years of my course, and I feel a sense of success in my final project – like I’ve really nailed my project working method for my personal preference. This is definitely a skill I’ve developed massively over the last three years, and each project has helped me towards finding the best method that works for me.

1:1 Tutorial with David – Tuesday 4th May

Today I showed David my finished animation to gain feedback on certain elements. He was pleased with how my animation had progressed and the feedback was generally really positive. He noted that the music I’ve used is a little too “happy” and “calm” – he suggested I search for something a little more upbeat and enthusiastic. I totally agree with him here and think that it will help give the tone of voice of my project that extra bit of enthusiasm and motivation via sound. He noted that the static images near the end of the animation felt a little rough and unfinished compared to the rest so encouraged me to make them move if even slightly. He also suggested putting my roller banner mockup into context a bit more. I think I could do this by dropping it into an image of a shopfloor to make it more relatable and easy to understand for my viewers. In response to this feedback I sourced some royaly free stock videos of shopping centres using Pexels.com. This gives the animation a much more professional look and feel, as well as adding context for the roller banner and QR code scan using the smartphone. However, there weren’t many options of videos to choose from – and most were really short. I had to replay the one video in order to make it long enough. Next time, if I had more time, I would have gone into a shopping centre and taken my own videos, making all the necessary ethics arrangements and agreements. However, I just didn’t have time to do that for this project unfortunately. This is something that I will bare in mind for my future work, and allow enough time for. Finally, he said that I should add my AntiPat branding to more aspects within the animation in order to celebrate the brand which will give it as much recognition as possible within the promotional video. After the revisions, here is the result:

References

About Amazon. 2021. Amazon donates $10 million to organizations supporting justice and equity. [online] Available at: <https://www.aboutamazon.com/news/policy-news-views/amazon-donates-10-million-to-organizations-supporting-justice-and-equity&gt; [Accessed 28 April 2021].

Razor illustration. 2019. Ax the pink tax. [online] Available at: <www.axthepinktax.com> [Accessed 1 May 2021].

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s