Shift from Informative to Communicative Web Presence
Web Presence Redefined: Step by Step Story of Building Communicative Website Design
When today mobile/wearable apps are trending — people think that websites are dead. Yes- it’s true but only if websites are just informative or transaction based. Websites still hold power to create an impact if it turned into Communicative Web Presence.
We are quite excited and thrilled to announce a launch of our new web presence www.prismicreflections.com with fresh look and new approach.
It feels really great to see that past several months exercise turned pretty well, close to what we imagined (yeah, but not perfect)
Why we did the revamp? Why One should do it..
Our business, work orders & sales were intact (in fact great) though we had old website.
But what is today will not last for tomorrow or in future. Wise move to start preparing for future, step by step. Revamp was a mandate now, without any excuse.
Shift from Informative to Communicative
There are numerous reason why we decided to revamp. Generic one is to make our web look trendy, cutting edge & matching to the current web standards.
However, moreover to this, we realized that website make over is not just limited to look, re architecture and sharpening it from business perspective but to align & revive brand’s vision & culture as well. And everything has to be communicated with our customers in effective way.
When we revisited our old content and our daily ongoing activity we found that there is a huge gap, what we wrote earlier and what we are living now. Our work, culture, quality standards, thought process & everything has evolved! And we must register it somewhere, very first — on our website.
However, it was great challenge to spare time from our busy schedule when we are building awesome stuff for our clients.
How we did it?
Redesigning/Revamping a website could be an exhaustive exercise if you are really wanted to create meaningful communication with your customers through it.
I would quickly put the phases we gone through, step by step process we typically follow in every web project.
- Analysis & Research
- Strategy: Communicative over Informative
- (Re) Architecture, Flow & Mapping
- Content Makeover
- Low-Fi & Hi-Fi Wire frames, Prototypes & Usability Testing
- Iterate, Iterate & Iterate
- User Interface, Style Guide & Interaction Design (UI & IXD)
- Photo Shoot
- Front end development : Different devices, platforms & Browsers
- Search Engine & Page Optimization
- LAUNCH! Boost Through Social Media & Press
Started with Analytic, Analysis & Research
At Prismic Reflections(TM), this is very important stage. We had a deep dive into site’s analytic, customer behaviour on every page, statistics, different devices & browsers being used by our customers, keywords where we were ranking, so far generated business, inquiries and many more aspects in data.
Significant research conducted to validate with the market trends, business modules, competitors, recent consumer trends, client feedback — that helped us to understand the current scenario and some idea about what should we do.
Strategy: Communicative over Informative
It was based on the data we gathered earlier in analysis & research phase. Strategy was decided, refined and validated with market and some forecasting techniques were used. In today’s competitive world it is very much important (and crucial) to communicate effectively with the right set of audience in right way. We wanted to built something communicative, responsive and not just informative website.
(Re) Architecture, Flow & Mapping
We knew that beyond visual look there is a solid foundation of robust web architecture is necessary for a successful website. So we re architectured the entire content, links & pages making it more efficient and easy for decision makers (our clients) to help them to conclusion and generate call to action from our website — as quickly as possible.
A real challenge! We had lot to say and lot to showcase. We brought everything on table, sorted the best of them and still we had tons of data in hand.
We filtered it twice and then got something very selected which will really make sense and save visitor’s time to identify us and take the decisions based on what they will be seeing.
Text & image content was generated by us only. After trying with couple of content writers, we felt that only we can write well about our self. Later it was tweaked from SEO & Grammar perspective by our content writer.
Low-Fi & Hi-Fi Wireframes, Prototypes & Usability Testing
Quick paper sketches turned into black & white high fidelity wireframes , followed by clickable prototypes. Then we ran them through user testing with 10- 15 participants by giving them certain persona and use case scenarios.
Iterate, Iterate & Iterate
Based on user feedback and some important observation by Me and my partner Swarup, these versions were iterated twice (somewhere thrice). Don’t be surprised but we scrapped one complete draft of entire website & refined 2nd one as a new approach. It was a fun and amazing exercise to see things taking valid shape.
User Interface, Brand & UI Style Guide, Interaction Design (UI & IXD)
Something that we always in love with :-) Gone all the way to define new UI style guide, pattern & typography. Finally landed on simplicity with basic black & white approach and ORANGE color- representing Energy, inspired from Indian Flag Saffron & a Divine Master (A Guru)
An Interaction Design was planned during the UI design phase (and somewhat earlier in wireframe phase). Detailed documentation was prepared with instruction notes on design itself for front end development team to bring them on same page when they start.
Images are worth of thousand words, really! And they really deserves separate time, attention, care and love. We had a exciting and fun exercise of our team photo shoot. Most of the picture you see on our new website are original, shot in our real office environment with real people.
We are — what you see right there in our website!
Front end development : For different devices, platforms & browsers
Done with clean code, responsive media queries, html 5 tags & google developer’s guideline.
High precision were taken when transforming design source files into functional html pages.
Every single page and every single section within the page was tested on mobile, tablet & desktop (windows & mac) along with different versions of browsers. Iterated till we satisfied with the output. (Website still have some responsive issues that we are working to align it to our expectations)
Search Engine & Page Optimization
Existing keywords where we are ranking kept intact and added new keywords according to market and business trends. Analytic code integrated, sitemap, robot.txt updated, site speed loading time checked. SEO expert carefully researched and implemented the things here to make sure we do not fall in ranking but go higher than existing.
LAUNCH! Boost through Social Media & other platforms
Finally the time came that were waiting for. After testing at least hundreds of round — we backed up our old website in sub folder on the same server and uploaded the new files on the root- clean and fresh.
At the same time we informed all our possible clients about launch of our new presence and invited them to submit their feedback.
We pushed the launch news on social media- Facebook, Twitter, LinkedIn, on our website blog & some popular platform like Medium. Very soon, we will be submitting our website for AWWWARDS & CSS Design Awards.
Just in first 3 days — we have got hundreds of appreciation & congratulations email from our customers, friends & community members. So far new website has generated 3 new big inquiries which are turning into business in coming couple of days :-)
(and it is still continuing)
It’s always worth to invest your awareness, time, money and faith to your own online face. After people believe in what they see & if you really invest in presenting yourself in right manner, it will pay off for sure.