Redesigning Electrifly: An Augmented Goods App
Updated: Sep 25, 2019
I've had the wonderful pleasure of being able to work on the Electrifly project at 302 Interactive. Electrifly.co is an immersive art and goods company which collaborates with artists around the United States to create pins, patches, murals, and more. 302 Interactive works with Electrifly.co to help develop their application which brings their products to life through AR, also known as Augmented Reality.
If you're not familiar with AR, it's taking digital content and placing it on top of the real world. Here's an example taken straight from the Electrifly application:
Video taken from Electrifly's Instagram.
I have been working on the user interface and experience for the application for quite some time, including contributing to redesigns of the app. It has certainly come far! Below are some screenshots of what the application looked like originally.
An info Icon is located to the top left while the Electrifly logo to the top right. A shop icon is placed on the bottom left, a capture button in the bottom center, and a collections icon to the bottom right. When taken to the shop, you're able to view various products offered by
Electrifly Collective, in addition to the product name and price. The collection page contains AR content which is downloadable on the device. The last screen is the screen which appears after clicking the info icon. It contains information on how to use the application.
After sometime, the shop page was taken offline so that it could be redesigned, this allowed developers to revamp the UI. You can see the new version below:
The iconography was updated, a new color palette was introduced, and Electrifly had rebranded their logo, which was updated in the application. The info screen text and alignment was also adjusted. With this new update, I had the chance to assist in the redesign of the collections screen. I suggested to have an item checkmark system to be able to select items to delete or download. This new system allows users to be able to pick and choose the content downloaded on their phone, which they weren't able to do previously, to assist in managing storage space on the device.
Afterwards, I was assigned a task to redesign the shop while keeping in mind the Shopify integration we wanted to provide to the client.
Users are able to navigate by swiping on the screen or using the bottom navigation bar, there are three different tabs; explore, shop, and favorites. A yellow bar highlights the active page the user is on. The shop also features a cart system, allowing users to easily purchase multiple products at one time. The number of products in the cart are shown via a circle pop up which appears over the cart icon located to the top right.
Users are able to explore all the products in the shop and explore page by using the filter system located beneath the header. Products can be favorited by pressing the heart icon. Favorites show up on the favorites tab and can be easily accessed at a later time. You can also search products by name using the search function. You can also search products by name using the search function.
Upon clicking on a product, the price, information and color variants for that product are displayed. An option is also provided to add to the cart. If an item is available in AR, a bolt is shown next to the products name.
I also had the chance to design a push and content notification for when new content has been added.
A push notification is sent to the phone with details about the new content. When the user opens the application a content card appears with the option to view more details. After pressing new details it opens up a new window with a photo of the content, and information regarding the release.
While redesigning the application, I also designed a light mode color palette which can be accessed from a sun icon in the info screen.
I hope you enjoyed this post! If you'd like to talk more about Electrifly feel free to reach out or contact them directly on their website.