The Task:

The brief was to design the company’s website such that it incorporates branding and enhances the overall experience of the site.
- Validate user personas from the brief research.
- Build the information architecture for the website to meet the needs of user personas.
- Make sure that the design website is in line with brands identity and guidelines.

After every process or design decision , I had a discussion with the CEO of the company over it where they gave their suggestions and inputs on the ideas I came up with. We followed an agile project management framework for this task which helped us in iterating and testing the ideas faster.

01 Research

Target Audience: Client, Online businesses
We started designing website from scratch. We listed out the business goals given by the company, and we tried matching them with the client's objectives.

Business Goals:
1) Deliver the promise of virtual experiences and engagements to our customers.
2) Provide technology and customer centric approach to deliver quality products.
3) Provide better customer service.

02 Ideation

The early stage of creating website was the preparation of framework. Which includes creating a plan,layout, Color palate, navigation design, Content inventory and contact us call for action. 

In the initial brainstorming session (My favorite part in the UX process!), we looked over a variety of websites for inspiration and identified the pros and cons of each website. We brainstormed on how we could bring all the good ideas into our website. After all the browsing and competitive analysis, we came up with our own mood board. 

Our IA looked like this.

03 Sketching

I started with sketching what each page would look like and what kind of content would be displayed including the layout and orientation of overall composition of web page. This helped us in freezing the flow and user journey for the website and gave a skeleton to build upon.

Why skeleton is important for website?
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiency.It helps to keep user engaged while the web page is loading. In simple word its better UX!

04 Wireframes & Design

The next step in the design process was to move each of the pages in Adobe xd to design high fidelity wireframes.

Home Page
The idea was that every page should have a story to tell and should answer the following questions —
1) What we are ?
2) Who we are ?
3) What we do ?
4) How we can help you ?

To make the human interaction more immersive with the website, we decided to have old vertical scrolling behavior on the home page which gave a cleaner transition to the sections and better visibility to the content.

Key Highlights:
1) Tried to have more impact with fewer words — Crisp visuals
2) Easy scanning.
3) To get more conversions — we decided to have ‘Contact’ as a primary CTA (Call to Action) on the header so that it gets user attention.

About Us Page
The chosen design followed the same style & pattern as the home page with a brief statement at the top that was complemented with a relevant illustration which kept the design of the website consistent and simple.

We also decided to showcase a step-by-step timeline accompanied by milestones of the company to make it easier to understand.

Our Work Page
The idea of Our Work page was simple to showcase projects with pictorial presentation and necessary information about all projects. We experimented with the layout and sorting filter for showcasing the projects on the work page.

Let's see how these sketches turned out to be on further improve and visual design.

05 UI Design

This phase was totally about developing color palates and graphical details, it needed to end up being ready to fit organized layout. The text progression, illustrations, just as pictures, needed to wind up being sound with the general look and belief and conveying the message precisely.

Home Page