Actomedia e-commerce service page & templates
category
UI Design
UX Design
tools
Adobe XD
Adobe Illustrator
Adobe Photoshop
Pen n' Paper
brief
COVID-19 was a huge hit to most of the physical store owners as their consumers were at home and their stores closed due to lock-down. Moving online was the most viable option to get the brands back to life.
And we had the resources and decided to expand the studio services to this industry we came up with an idea that would have store owners happily sign-up for e-commerce with the confidence of the service.
task
I was tasked with creating four templates/themes for the e-commerce website that the developer could replicate as a demo theme.
Also, the wireframe & the user experience of the service page was handled by me. Providing graphics and overseeing the layouts and wireframes being brought into the demos was also handled by me.
process
ideate
Researching the existing themes & templates used and preferences
draft
Create basic layouts on pen and paper
wireframe
Moving the layout from paper to online
prototype
Developing a mock clickable theme & UI.
the brand
Actomedia srls is a studio based in Pescara, Italy. They provide a wide range of services including Visual Branding, Marketing & Advertising Design, UI Design, Publication Design, Environment graphics and so much more. Their specialization lay in the services provided to agencies & startups like AR for enterprises, chatbot, blockchain. I was lucky enough to work with them as a Freelance Graphic & UI UX Designer(remote).
birth of an idea
When the world was hit by COVID-19, the sales all over plummeted overnight. Over the period it continued to be difficult for most brands to reopen unless they could handle and provide services online. Brands without an online or e-commerce presence could not provide services or products. Only an online presence would provide the customers a way to avail service or buy products contact-less.
During this period we were going through expansion & brain-storming on various services we could provide our existing clients as well as increase our customer base. As a team, we collectively voted on including "e-commerce" as an independent service under the agency. Our team included all the skills and specialization required for this & there is also market availability.
After a few team meetings and a lot of to and fro we decided that,
-
E-commerce will be an independent class of service
-
It will include demos for first-hand experience by the customer
-
The demos & templates will be customizable
getting with it
As the first step, I was tasked with finding designing a few online store templates/ wireframes. To achieve this I had to study and understand, designs that were useful & useable. It included:
-
Figure out the usability factors of such designs
-
The affordance of such design systems
-
User engagement in such systems
I got to work drawing and exploring ideas. I kept coming back to the basics of these sites. One factor I noticed was that there were many styles but the foundation lay in the basics. With that in mind, I designed 4 wireframes- including the store, sales, sign-up/login, cart, and more.
After wireframes and prototyping, I went about defining the visual style of the e-commerce page so that it could carry across the same style as the other pages. The page was intended to look visually consistent with that of the consumer-facing service pages of the agency so it caters to the audience including that of the current demographic.
hiccups
This was the first time after years that I was working with WordPress, a lot had changed from the time I used it for blogging. Finding the footing was a struggle, but was able to quickly catch up.
One main struggle was working with WPBakery, the WordPress website builder but Lorenzo was a big support to getting the page live and smoothly running.
