Nooie Website Redesign

January 2023
UI/UX Designer

Redesign "Nooie Official Website" for improvement and product categories extension.

About Nooie

"Nooie" is a company that produces smart home products which can be controlled through the "nooie" app.
These products include cameras, doorbells, plugs, lights, and more.

Problems Define

1. Expand the header to accommodate the increasing product range for better scalability.

2. Enhance the visibility of the store button to drive sales by making its placement more prominent.

3. Ensure that the website's colors and overall tone align with the brand's color guidelines.

4. Reduce the number of marketing banners to avoid excessive sales-oriented content and keep the page length manageable, allowing users to easily find desired information.

5. Include real user experiences and recommendations to build product trust among potential customers who haven't made a purchase yet.

6. Ensure the information in the footer and header is cohesive and corresponds to each other.

Sitemap

After discussions with the PM, marketing team, and developers, we have devised a new website architecture based on the requirements and feasibility outlined by each department.

Header

Before: There is almost no extension space for new categories, and the priority of Shop is too low.

After: Header is separated from services (top header) and products (second header), and highlight the Shop text button.

Decrease Banners

Before: The excessive use of pictures and banners on the website creates a cluttered and overly promotional appearance.

After: Following the discussion with the marketing team and CTO, we have successfully simplified the content and enhanced the visibility of key selling points. Additionally, we have reduced the number of banners to two, allowing us to prioritize the showcasing of our products and services.

Add Referrals

Create a new section dedicated to referrals, where the photo frames are linked to Instagram posts. This will effectively enhance the appeal of our products and make them more attractive to potential customers.

Color

Ensure that all colors used on the website align with Nooie's brand colors for consistency, and create color styles in Figma.

Footer

To enhance the website's structure, we organize the information into three distinct sections. From top to buttom: Header Information, Customer Interaction, and Social Media.

Launched Website

Please click on the following link to view the actual appearance of the website.

https://nooie.com/

(Please note that there may be slight differences between the current state of the website and the design draft.)