Primary
#94d600
Secondary
#6f625a
Border
#c6c6c6
Light BG
#f0efe8
Link Color
#ff6d0d
Light BG Text
#c7c5b9
Open Sans 400
Aa
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
Open Sans 600 Bold
Aa
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
Merriweather Regular
Aa
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
Step 1
Challenge.
Baby Supermall was getting killed in SEO because their site was not mobile friendly.
We had to determine, by clicks per visit data which pages were the most relevant.
We started with product page (crib bedding), and moved onto the gender category pages and then followed by the other product pages.
Section No. 2
Approach.
Knowing that we were only going to be able to launch these mobile friendly, responsive pages, template by template, i decided to try and make the experience seamless.
The only time you’d hit a non-responsive page during your experience is if you clicked to go back to the home page. Knowing this, Ii rebranded the homage with the new colors, fonttype and logo. This way, although non-responsive you’d still feel like you’re on the same website.
I effortlessly worked; page by page and supplied the html/css for the templates as soon as possible. That way dev could release more templates and make the whole experience a great one!
Section No. 2b
Research.
I analyzed all the google analytic data and determined which pages were the most visited.
Then i started designing to this structure.
Step 3
Solution.
I started with the rapid prototyping process.
First I created wireframes using Balsamiq and Axure, and shared those with key stakeholders via concept board for notes and commenting.
Next, I moved to Sketch and developed high res mockups with specs and metrics for building in HTML5/CSS in bootstrap.
Since I was also in charge of building these templates (their dev team didn’t know bootstrap) I recorded the Process to teach their dev team (in India) how to use bootstrap. See the series here.
Step 3b
Prototyping.
