XGIMI Web Redesign

May, 2019

极米科技是国内知名智能投影仪厂商,在 2018 年中国投影仪市场中以 57.5 万台荣登出货量第一(来自 IDC 报告)。然而较之市场上的成就,极米在品牌传达与体验设计上却还算不上优异。基于此,我对极米的品牌和官网进行了本次概念设计。(声明:本案例所有产品图均截取自极米官网,仅作交流展示使用。)

XGIMI is a famous projector company in China. It ranked 1st in Chinese projector market 2018 (from IDC report). However, XGIMI is not great enough at branding and experience design. This's why I designed this concept.



通过观察,我发现极米官网目前的设计问题主要围绕在三点:形象不够简约、品牌一致性差、设计不够精致。因此这三点是我希望通过这次概念设计重点提升的。

XGIMI's design problems are mainly at three points: brand image is not clear enough, brand consistency is poor, and the design is not meticulous enough.

人群属性





由于没有极米官方的数据支撑,因此我希望通过百度指数来对投影仪受众获取一定基础的认知。由上图可见,对极米品牌感兴趣的人主要集中在一二线大城市。而对各类家用投影仪感兴趣的人群中,中年男性约占有 80%。但要特别注意的是这个数据仅为百度提供的模糊搜索数据,实际购买人群比例可能并非如此一边倒。而可以较为肯定的是,年龄在 30 至 39 岁的男性为该市场的核心受众。

I used Baidu Index to get an overview of the user population in the projector market. As can be seen from the above figure, people interested in XGIMI are mainly concentrated in big cities. Among the people interested in various types of projectors, middle-aged men account about 80%.

字形选择

在 logo 的字形选择上,综合上面的指数我希望选择更简洁、更通用以及更轻快的字体。最终,我选择了 NeoSans 作为 logo 的西文字符,源柔ゴシック(思源柔黑)作为汉字字符,效果如下。

In terms of font selection, combining the above research, I hope to choose the following characteristics: simple, universal, and brisk. In the end, I chose NeoSans and 源柔ゴシック (思源柔黑) as typography.

颜色选择

我在原版 logo 的橙、红、蓝、绿色系基础上对颜色进行了微调,希望保证在浅色与深色背景下都能呈现一种「不艳丽」的色彩呈现。

I fine-tuned the color based on the orange, red, blue, and green colors of the original logo. I want to guarantee a "non-bright" color rendering in both light and dark backgrounds.

原网站





原网站在视觉上的问题主要体现在这几个方面:风格略显过时、过于参考米商城、一致性差、细节不够注重等。

The original website's design problems are mainly reflected in these aspects: The design is rough and outmoded, It's too referenced to Mi Mall, Poor design consistency, Lost Details.

设计思路





综合原网站的缺陷,我从四个层面对新网站提供了改版设计方向:
1. 战略层:便于全球化发展。我在新设计中考虑了国际化的可能性,便于未来通过文字翻译即可实现多国语言,而不需要返工重新开发;
2. 结构层:网站应该重产品展示而非电商。因为目前公司产品线较为简单,商品也少,不如将重心放在公司的品牌展示、新品宣传上;
3. 视觉层:设计更简约清晰。主要体现在布局留白、UI 控件的设计上,以及使用 SVG 切图、更高清的素材等;
4. 实现层:响应式设计。响应式设计既利于项目开发,也利于不同设备用户体验的统一。

I provided design directions for new website from four layers: 1. Strategy: facilitate the development of globalization, 2. Structure: the website should be partial to product display rather than e-commerce, 3. Visual: the design is more modern and simple, 4. Develop: use responsive design.

新网站