Color Selection: #d71920, #FFFFFF and #231f20

Goal: To Decide what color to use on all kind of element.

Process:

By maintaining a simple design, all elements should be easily identifiable and relateable to the logo. This can enhance customer engagement with the brand, as the same color scheme is also used on the products.

Style to Use: Clean, Neat and Sharp

Goal: By creating a site with a fresh, trendy, and user-friendly design, you can attract and retain customers. This will also help to improve the overall user experience and increase the likelihood of conversions.

Process:

The site has been redesigned to enhance the overall look and feel, with a focus on improving the user experience and visual appeal. The whole site get new look from Background image to Action buttons.

Elements: Content, Priority, Function

Goal: To ensure a seamless and functional navigation for the customer, we will need to analyze the current content and make informed decisions on how to improve the navigation.

Process:

To effectively communicate with the customer and ensure a positive user experience, it is crucial to create a well-designed navigation that provides clear and functional links. This will enable customers to easily navigate the website and find the information they need, while also providing helpful internal searching capabilities. After conducting some research, I have identified several design styles that the company would like to incorporate into the navigation. By examining these styles and comparing them to the current design of the website, I believe that the navigation would be the most visually appealing and user-friendly.

Elements: Hero Graphic and Footer

Goal: To incorporate the new product launch into the page design and ensure that it aligns with our new site style.

Process:

Because we want to present the idea of saving energy and eco-friendly grid, we have decided to include the concept into the hero graphic. We have also included the new product that will be launched in short future. I have conducted some research and have decided on the design that is currently on the website. In order to balance the elements and make the design look good, I have adjusted the footer design. Finally, we have decided on a four-column layout for the final footer design.

Elements: Product Image, Pricing Box, Scrolling Function and Product Information

Goal: To create a page that is user-friendly, easy to navigate, and visually appealing, we have designed it with a focus on eye-catching graphics and intuitive user interactions.

Process:

We have used other websites as a reference to ensure that the layout structure is user-friendly and visually appealing. We have made some adjustments to the wording, element sizes, and content layout. The most significant change we have made is to add a function that when the user scrolls down and the pricing box is not visible in the viewport, it is moved to the bottom just above the footer. This update is intended to improve the user experience and make the purchase action easier.

Elements: Category Setting, Page layout and Action button

Goal: To ensure that the pricing box and action button are clearly visible to the customer.

Process:

All the elements on the page are crucial and important. Secondly, the spacing and color between each element are related and consistent. The alignment of all elements is important to ensure that the eye flow is easy to follow and the content is presented in a logical and intuitive order.

Elements: Cart, Address, Shipping, Review and Successful

Goal: To ensure a smooth, easy, and clear checkout experience, it is important to ensure that all necessary information is provided and that the form is filled out easily. This includes providing all required information, shipping and billing addresses, and helping the customer to select the appropriate payment method.

Process:

All top e-commerce platforms have an easy and smooth checkout process. After the customer selects what they want, the final step on the site is to complete the payment. During the mockup/implementation process, some elements were adjusted, such as icons, colors, and wording. Each function and pages are tested to make sure the experience is meet the standard.

Elements: All element on the site from Nav to content.

Goal: To ensure the Mobile-Friendly.

Process:

The Mobile starts with the nav, and I tried a few mockups/layouts, such as slide-in and cover-up, but the company decided to keep the simple hamburger style. For the product page, we adjusted the pricing box to appear at the end of the viewport when scrolling over the top pricing box. All the Mobile adjustments were based on the following: correct/readable size, mobile-friendly, and easy to use. We aimed to keep the neat and trending style.

Languages: English and French

Goal: To provide our customer with French content

Process:

The website audience is targeted at the whole of Canada, and French-speaking customers are very important. In order to provide a good user experience, the website has implemented both English and French for the content. It is important to ensure that everything looks at the same quality and style.

Challange: Time, Styling and Content

Solution:

Due to various reasons, the project has been stopped and re-opened several times. It is important to ensure that all information/files are properly organized so that anyone can still follow/pick up from where it stopped(but luckily it's me to the end). Secondly, the styling needs to be clean and neat, as this sometimes can make the page feel empty. Thirdly, how to and where to present the content is a key question. The most important thing is to keep communication with the manager to provide enough information and ideas so that the company can make the final call based on them.

Result:

I believe we successfully launched a visually and practically impressive website. This is largely due to the tremendous effort and support from the team, who not only provided assistance with testing, but also actively sought out and suggested ideas. Here is the link to the site: