很多人喜欢Vans。任何购买过鞋子的人都会分享出与传统运动鞋炒作相贴切的独特的感觉。

然而，很多人遇到的挑战是他们笨重的网络体验。与其他当代零售网站的美丽用户体验相比，Vans无疑感觉过时 - 违反直觉的设计，为访问者提供了太多选择，并且可以增强尴尬的UI。

尽管如此，用户仍然完全沉浸在他们的平台为世界提供的东西中。当然手机是王者，但电脑仍然统治！ - 特别是在不断发展的全球零售业中。

目标

1. 设计简单，直观且功能强大的桌面界面。

2. 了解有关产品的更多信息，并发现创建更清洁，更有凝聚力的购物体验的新方法。

3. 创建灵活性，以便与Vans社区中的其他人共享和交流。

提案

彻底改造现有的Vans.com UI，以增强一般用户体验并使其电子商务平台现代化。良好的用户体验对于成功的电子商务至关重要。

这将使用户能够获得更难忘的购物体验，鼓励与#TheFamily社区进行更多互动，使用户能够自由导航并可能制作更高转换率的电子商务网站原型。

设计过程

目标用户

以设计一个简单的解决方案，为过去的用户量身定制。

范围

用户： 10位18-25岁的真正消费者，他们在过去6-8个月内专门购买了Vans。

市场：纽约市的年轻人口。

直接来自用户的关键信息

“我喜欢Vans，但他们的网站是基本兄弟。” “这里有主页，然后还有其他所有内容都显示出来的东西。” “老实说，我从不关心他们网站的外观。” “如果我将它与其他网站进行比较现在流行的鞋企，Vans绝对可以更好地在我们的笔记本电脑和智能手机上展示他们的品牌。鞋子无论如何都要卖。“

了解产品

Vans由VF Corporation持有，这个公司拥有50个品牌，包括The North Face，Timberland，Dickies，Jansport和Wrangler。由于预计今年的销售额将达到23亿美元，因此Vans年度总收入中约有80％来自鞋类！它是VF Corp发展最快的公司，是一个安静的时尚巨头。无论如何，他们的平台扮演着重要的角色，决定着他们将如何继续发展Vans的真实性精神。

坚持其根源

Vans于1966年3月16日在加利福尼亚州的阿纳海姆成立，由Paul Van Doren兄弟，James Van Doren，Gordon C Lee和Serge D'Elia于1966年3月16日在加利福尼亚州的阿纳海姆成立，名为The Van Doren Rubber公司。到了70年代，Vans Authentic为突然滑板吊杆提供了合适的抓地力，并迅速成为滑冰者的首选鞋。其余的都是历史。

标志性的鞋类不再只是滑板运动员

Vans发展成为日常运动鞋。他们继续使用简约，怀旧和有机时尚合作，为全球所有年龄段的人们销售永恒的产品。

了解用户

设计师可以收集哪些见解？过去6-8个月内设计师直接通过其网站与购买Vans鞋的参与者进行了10次用户访谈，以了解用户对网络体验的看法。访谈的范围主要围绕消费者的在线决策，他们在电子商务网站中寻找的内容以及他们使用Vans的体验，以便通过网站的UI设计识别可用性问题。

在iMac上浏览网站时，通过个人访谈合成了简短的访谈。通过组织数据，这一切都归结为两个主要的反复出现的主题：

使用效率

正好有一半的参与者指出了他们通过导航菜单立即登陆网站所面临的选择。拥有超过1,000个库存单位，可以通过强调其可用产品的规模或仅仅压倒用户来建立兴奋。

浑厚的极简主义设计

10位参与者中有6位指出了主页与其产品页面/存档之间的美学二分法（见下文）。显而易见的是，主页演示得到了更多的关注，并且为了突出产品而付出了很少的努力。

这导致了设计师的主要见解：

Vans如何升级其旗舰网站以全面反映其产品的简洁性？

游戏计划

如上所述，可以通过两个方面帮助Vans成为更好的网站。

1.如何最大限度地减少导航菜单的美观以改善导航？

2.如何在不损害其完整性的情况下改进其产品页面的用户界面？

主要关注点是希望为用户提供更全面的设计，以便为每个经常性主题提供答案。

突出问题并提出迭代

在考虑了几种可能的解决方案之后，这里是使用Photoshop进行的一些迭代。

导航菜单

问题

选项太多

· 导航菜单杂乱无章，有16个链接！页面标题是一切开始的地方 -兴趣，关注和理解。当它混乱时会失去价值，因为没有人会因为最大的选择自由而变得更快乐。这肯定会导致导航问题。

· 37％的用户声称他们因网站上糟糕的设计和导航而感到恼火，这是他们离开的主要原因。

· 订单状态，查找商店，礼品卡，在线聊天，收藏夹，登录，加入货车系列和购物车都是页面链接，可以简化为图标或合并到现有组。

导航菜单特写镜头

· 搜索引擎查询“搜索视频”是不必要的。

· 购物车不是购物车

· 如果悬停已经发现他们的菜单，则每个页面链接的向下箭头图标都是不确定的。

标头解决方案概念

绝对的简约

· 合并商店，滑板，冲浪和雪 页链接，在下拉菜单中内部假设分组，在各自的性别/年龄类别内（例如男士冲浪，儿童雪）。结果是包含所有Vans库存的5个根页标题。

· 重新设计了搜索引擎以进一步简化其功能 - 将其填充四舍五入以赞美大胆的Arial-esque品牌排版，将放大镜图标重新定位到最左侧并删除“搜索面包车”查询文本。

· 消除订单状态和礼品卡页面链接。他们可以简单地在用户体验中的其他地方生活，作为弹出通知或实时聊天动画。

图标

· Find Store成为众所周知的*位器定**图标，收藏夹变成了一个♥，购物车成为一个交互式购物车图标，一旦添加鞋子或服装，可立即从灰色变为红色。

· 更大的空白=增加内容易读性，CTA突出显示，鼓励用户交互并创建内容的一般平衡。

登录/加入Unity

· 要登录或加入Vans Family吗？这些选项是一个团结两者的机会，使访问者能够做出他们想要的行动选择。这种组合消除了对登录 图标（的需要，仅用于商标星号Vans用于识别其独家奖励会员计划 - Vans Family的入口。

产品页面

问题

· 清楚地使用与粗体主页形成鲜明对比的平淡，过时的网页模板。

· 小字体几乎不需要注意。（没有理由为什么身体应该有少于16像素的东西）。18％引用小文本作为网站（和购买）放弃的动机。

· 缩略图图像与小字体结合使用会产生太多的空白，与繁忙的主页形成鲜明对比。

· 添加到购物车CTA是一个勉强嘎吱作响的左边缘属性。

· 聊天按钮垂直居中于购物车下方网页的最左侧。

· 颜色，大小和数量菜单不需要数字列出。

· 选择5的排版调色板（黑色，白色，蓝色，红色和灰色）会产生不清晰的视觉层次。

产品页面解决方案概念

更大胆的设计

· 增加一般文本大小60％的身体和80％的标题，以利用未充分利用的空白。

· 替换了圆角方形样本的缩略图彩*图色**像。

· 建议使用纯黑色的统一排版调色板，但外部链接除外（即尺寸表 和 了解更多）。

· （再次）最小化在Vans商店中的查找 并添加到收藏夹链接到非正式已知的图标。

· 放大并扩展添加到购物车CTA，同时将其颜色更改为纯黑色。（当然，绿色转换最多。它只需要与网站上的其他颜色互补，以避免冲突）。

· 在“数量”列中添加了交互式跟踪器。

· 将免费送货和退货和评价两列布局放入直接堆放在产品描述中的下拉菜单中，作为更高转化率的催化剂。

· 将定价迁移到标题的最右侧，没有美分值。

· 拍摄一张真品的新产品图片，以突出Vans可以采用的新方向，继续传达标志性的简约。

· 删除了所有不必要的标记链接。

· 将Vans Family徽标替换为不像素化且微不足道的徽标。

· 删除了大写文本转换以获得更大的均匀性。

最终原型

这项研究绝不是批评和概念的详尽清单。重新设计主页，个人资料页面，其全面的Checkout流程（从产品选择到订购电子邮件确认），海关页面和页脚 - 所有这些都具有新的，极其简约的品牌标识。并且相信原型设计的力量 - 定义，测试和验证用户体验的整体外观和感觉 - 与转换和创收密切相关。

希望继续深入探索一般用户体验的需求，通过更大的受众群体进行更广泛的测试，并介绍创建实验性Web功能的方法。将运动鞋双击到购物车中有多酷？

这在Vans.com看到了很多潜力，只需要在正确的方向上进行一些推动。根据设计方案，能够打*网破**站与用户之间的障碍，以便Vans能够继续履行他们的效率承诺。