Alnec

Feel better in a clean, healthy, and convenient space.

Alnec is a new startup household cleaning electronic retailer that brings customers quality home electronic accessories to benefit their daily lives. The client needs a complete custom eCommerce website design.

Project Type
eCommerce Website Design (Client Project) 

My Role
UX/UI Designer, Graphic Designer

Timeline
2 Weeks

Tools
Figma, Photoshop

Project Goal and Challenges


Help the client identify a brand theme that is recognizable when compared to the competitors.

Design custom eCommerce pages by using common design patterns with limited content provided by the client. 

Deliver responsive design of both web and mobile versions. 

 

 

Scope of Work and Timeline

Phase 1: Project Kick-Off
video-conference
Phase 2: Branding Guide
content
Phase 3: UX/UI Design
computer
Phase 4: Hand-off
official-documents
Timeline-1

0 1   B R A N D I N G

Brand Story- A Clean And Healthy Living Space

Working on a new company's website requires a branding direction to guide through design decisions as well as maintain a consistent presence.  I decided to kick off the project by collecting the client's goal, company stories, missions and ideal look & feel.

By researching Alnec's competitors, I found most of them presenting themselves in an innovative and smart technology brand image.

With an opportunity to stand out among all competitors, we decided to move on to tell stories that tie closely with Alnec's brand purpose- to help people feel better in a clean, healthy, and convenient environment.  The theme focuses on a fresh, natural and clean theme.

Photo-2
Homepage-Wireframe

0 2   L A Y O U T

Demonstration Of Brand And Products

Thinking about what information customers need from shopping at this website, I created wireframes from scratch on a mission to appeal to customers and achieve business goals.

A key area of consideration is the homepage design, as it is the first thing many of the customers see when they visit the website. It sets the ground of the whole website to welcome customers, brings brand awareness, and accrues conversions.

Before moving on to the next step, I made few rounds of iteration based on the client's feedback and reviews, focusing on demonstrating the products and the brand consistently.

Other-Pages

0 4   U I   D E S I G N

Tell The Story With UI Design

As UX sets in the ground, I started UI design, furnishing the details to evoke the home's mood.

The color palette and typography were chosen with the focus of delivering a clean look UI. A set of custom graphics were designed to create a fresh home mood and wellness feeling.

For the convenience of hand-off work, all components and style guides are organized into documents for developers.

ui-
UI-Library-5

0 5    R E S P O N S I V E   D E S I G N

For Both Web And Mobile Users

To meet the needs of mobile shoppers and improve user experience, I designed the responsive mobile version for this website.

Homepage
Web vs. Mobile


Layout changed to vertical style, navigation changed to hamburger menu that slide in from right side.

wEB-1
Mobile-1

Collection Page Filter
Web vs. Mobile

wEB-2
Mobile-2

Coming Together

Final-Demo