The following video reflects the Foxconn iAI's landing page and it serves as an introduction and very important first impression to our business and products.

I designed the main graphic of the iAI website. Though simple upon first glance, the hexagon design is rich with hidden meaning. It represents the finite control of space. The hexagon is the connecting center of universal coherence which ties everything together and links everything back. The shape itself creates a 3-D box that symbolizes our customer is seeking a stable center which is us. Also, the hexagon design has been applied to our AI product design and product-related digital marketing material.

Not only simply added call-to-action items to purchase our AI products, but we also listed core reasons why Rafiki AI Suite is your right industrial solution. Rafiki AI Suite is composed of FOLO, OPTIMO, and SoQ. Each product has a brief introduction along with the product image on product page.

If OPTIMO sounds like an option for your industry, you can access the product by clicking "Learn more". The page contains significant product information and a video introduction.

The "About Us" page shows information about the Foxconn iAI and the team story.

The user can learn the latest news regarding our big event, products, and story through News page.

Click on the Contact us tab in the navigation bar to consult any questions you might have.

Our team conducted primary research with 20+ potential competitors and we have some great examples which inspired our new design. Also, we used the existing website testing with potential users and gathered valuable insights and constructive feedback from them. Then, I synthesized my major findings into specific actionable insights to help Foxconn iAI website concept recreation.

I created the sitemap before jumping directly into the design. Based on the competitive research, I decided to structure the sitemap into five primary sections. They are products, about us, news, e-learning, and contact us.

We gathered a lot of feedback from the existing site to improve the new design. With those must-have functionalities in mind, I did some sketches on paper to wireframe how each product page would look like and make my ideas more tangible on paper. Then, seek feedback from the product team and tested with the user.

To ensure the readability of the site and match our brand vibe. I decided to use purple and blue as two primary colors. Purple combines the calm stability of blue and the fierce energy of Red. The color purple is often associated with power, ambition, creativity, wisdom, and magic, which is exactly something that our team was looking for. For the font, I chose to go with Lato(mainly) and Vollkorn. Lato speaks with an energetic and hushed tone which makes the interface easy to read.

I jumped into the design of different sections. High-fidelity mockups took me a lot of effort and time to make. Make sure we have the design that showcases how the finished site will look. After finishing each page, the final step is to string screens all together!