UX based UI Designing for Websites or Products

Hi everyone! We are ready for summer as heat is on over here in India. Well that’s about typical weather conditions but we feel the heat is on over the web & internet too!!

Seriously, web is changing rapidly as everyone is looking for nice designs & user interfaces. UX is the big word now a days & people have understood the importance of user-centric designs. Every site wants to be good & to look good for their targeted users. I think this is the clear start of the era for design led engineering over the web. So all designers should fasten their seat belts and get ready for the take off!! Being a designer by heart, well I am truly excited.

I am attaching here a screenshot for one of the recent project we did in last quarter. This is a perfect example of UX based UI design we designed and implemented for one of the crowded website from Netherlands. Just take a quick look at how the design evolved from their old site to fresh new one.
UI-UX-Example

Entire project has been developed in PHP5,/MySql based on trusted framework -Codeigniter. As a result they have got 30% more visits since from the launch of new website. The site has been gone through 3 months of rigorous development for enhancing the database schema, load balancing and match current trends of SEO.

I would like to share the UX process what we follow for mid sized projects. It goes through 3 critical phases mainly.

1. Discover or Analysis:
It starts with client meetings. If possible we meet our client face to face or we conduct online meetings. We love to ask many questions to our client such as “what are their goals or objectives?”, “What made them to adopt UX based Design approach & invest for?” etc. Knowing our clients and their expectations helps us enormously. Sometimes client wants to go for extensive analysis based on real world simulations, in such cases we use some of the best online tools to gather the analytical reports by means of online workshops & real time user case studies. We dive more deeper in the see to fetch the real shiny perls which helps us to take next actions. Tools like “www.usertesting.com” helps in to set online campaign for the targeted user groups. Based on analytical reports from these fantastic tools (& Google Analytic) we start working on information architecture. We prefer our clients to get engaged in each step as they know their business and its requirement very well.

2. Preparing Wire frames & Designs:
Based on the data gathered during Analysis & workshops next is to start drafting rough sketches of wire-frames on paper or get on the desk and use some tools like Justinmind Prototyper?which lets you to play around and prepare clickable prototypes to explain the flow of the UI more easily for everyone. If everything goes well, next is to do a healthy visual research & to define the visual persona of the project. Once we are all set we handover the wire-frames to our designers to come up with perfect visual and logical blend of designs. Zoom in to see and make sure every pixel falls in right place there. It covers everything from defining brand colors, shades, engaging call to actions, crafting suitable icons & imagery and defining quality typefaces etc.

3. Front End Development:
Once client validates all designs and designers have completed the rounds of iterations, its time for front end developers to get in action and make all designs live. Both designers and front end developers discuss and decide about how we can make the final drafts more engaging from user’s perspective. We use right spices to make a perfect recipe like HTML5, CSS3, frameworks like Twitter Bootstrap or Gumby (just to make sure that designs are ready to fit on wide range of gadgets & personal devices). Ever evolving jQuery scripts are just like toppings which we use as it may require & we are done!

Further we do suggest client to go for A/B testing, if its suits in their schedule. But we believe real world helps us actually & we can go for further improvements if required during next phase of project. Based on our experience UX is based on your research, keen observation, following your gut & sometimes mixing up some Guerrilla Technics (specially for small projects).

Do share your thoughts and help me to update my knowledge if you have any suggestions.

Share This Post On

Submit a Comment

Your email address will not be published. Required fields are marked *