Redesigning a website with installation and launching of E-Commerce
How I created my pop-up cards brand, coded a website to show the products and redesigned it later to launch an online store.
Redesigning a website with installation and launching of E-Commerce
How I created my pop-up cards brand, coded a website to show the products and redesigned it later to launch an online store.
WEB DESIGN
Role
Web & Graphic designer
Personal project
Year
1st web: 2015
Redesign: 2018
Tools
Html | Css | JQuery | WooCommerce | Balsamiq | Illustrator | Photoshop | Mailchimp | Stripe
Skills
Web design | Graphic design | Illustration | Lettering | Digital Marketing
Role
Web & Graphic designer
Personal project
Year
1st web: 2015
Redesign: 2018
Tools
Html | Css | JQuery | WooCommerce | Balsamiq | Illustrator | Photoshop | Mailchimp | Stripe
Skills
Web design | Graphic design | Illustration | Lettering | Digital Marketing
SITUATION
After I had completed my graphic design degree studies in 2013 I created a line of pop-up cards. I designed the pop-up mechanisms (paper engineering), created all the illustrations, designed 2 types of lettering for the covers and the visual identity of the brand.
I designed a website from scratch with HTML and CSS to show the cards. Later, when I decided to sell them online as well, I needed an E-Commerce.
THE RESULTS
I redesigned the web interface to adapt it to the business objectives.
The first website was a mere visual showcase with no strategy behind. With the redesign I managed to guide the user through the content and prepare the website for the leads conversion.
I built the online store from scratch with WordPress and WooCommerce.
I implemented E-Commerce and connected the virtual payment gateway with Stripe. I created a Lead Magnet, connected the forms with Mailchimp and attracted traffic from the social networks.
THE PROCESS
The Brand
Popapea is a brand of handmade with love pop-up greeting cards.
The original website
The website has practically no traffic, it is just a showcase website. After the redesign users are expected to come to know the products and buy.
On the current Home page it isn’t clear what the user is supposed to do once he lands there.
The maximum width of the content is 960 px.
On the home page’s hero there is an image slider without arrows or dots, the user has no control over it.
The slider is 714 px wide. In the right 225 px wide column, there is H1 headline, welcome text and a button with CTA to contact.
The first section (birthday cards) starts at the fold limit, you need to scroll to see it.
When scrolling, all the products are organized according to their category.
Redesign
The maximum width of the content has been increased to 1140 px.
The slider is replaced by an image that represents the benefit of the product (gift). The image occupies the full width and a text box with the H1 headline , CTA and button is placed on it (objective: see the products).
The height of the image has been reduced compared to the original design, so before scrolling we can see 3 highlighted sections. There are 3 banners to take the user to featured products.
Next there is a banner to attract subscribers. Below are featured posts to take the user to the blog.
The result
You can visit the website here:
