Narrowed Down the Scope
Because of the time limitation, after reviewing the challenge statement, I decided to mainly focus on the visual design and information flow on the homepage and leave interaction design out. I started with wireframes and created static interfaces of the homepage as the final deliverable.
Started with Wireframes
The most challenging part is designing an elegant and attractive landing page.
Instead of case studies, I decided to first display the highlighted features because it helped visitors to better understand the value MAQ created at the first glance.
I drafted three different layouts for the five highlighted features, and finally chose the one shown on the left because showcasing all highlighted features at once can better attract the attention of visitors. I also added "learn more" button as a call-to-action point to encourage visitors to explore more.
Before starting to design visuals, I played with wireframes to ideate different information flow and layout. I also explored the current website for 2 hours to understand the content and selected appropriate ones to tell the story in my new design.
Designed the Style of Website
Considering MAQ software is a data-driven and high technology company, I chose the Flat Design style and used icons to create a sense of consistency. I also used purple as the main color to create an atmosphere of the future.
Designed Visuals and Information
Highlighted key features of MAQ Software service and products
Showcased MAQ achievements by case studies
Addressed featured Power BI Visuals and impact
Reflected engagements of MAQ software in Power BI, Artificial Intelligence and latest technologies by news and blogs
Highlighted testimonials from clients
Showcased advantages of DevOps methodology, which were the reasons that clients chose MAQ
Marked achievements and reputations of MAQ Software
Introduced company culture and encouraged visitors to explore careers
Provided integration with social media
Designed a chatbot to provide real-time feedback and made user experience more friendly
Grid System: Responsive Web Design
The website was designed based on a 12-grid system, and can be implemented as a responsive website easily
12 column grid system (960px) for laptop browser (left)
4 column grid system (332px) for mobible browser (iphone X) (right)