大廠實(shí)戰(zhàn)案例！WPS 個(gè)人中心改版設(shè)計(jì)復(fù)盤

要對(duì)一個(gè)長期穩(wěn)定的舊界面進(jìn)行改版，是一項(xiàng)具有挑戰(zhàn)性的任務(wù)。這需要考慮用戶習(xí)慣的變化，以及改版對(duì)業(yè)務(wù)收入的影響。

往期改版：

一、項(xiàng)目背景

WPS PC 端個(gè)人中心頁面多年未改，因?yàn)闃I(yè)務(wù)不斷增加，現(xiàn)在顯得臃腫且無序，而且頁面結(jié)構(gòu)已無法滿足新的需求。因此，CED 聯(lián)合產(chǎn)品、運(yùn)營一起推進(jìn)了一次改版重構(gòu)，旨在提升整體用戶體驗(yàn)以及業(yè)務(wù)承載能力。

二、重構(gòu)思路

頁面的重構(gòu)思路主要從體驗(yàn)問題和業(yè)務(wù)訴求出發(fā)，基于問題來設(shè)定本次改版設(shè)計(jì)的目標(biāo)，然后基于目標(biāo)制定一系列的執(zhí)行策略，最終項(xiàng)目上線后進(jìn)行結(jié)果的驗(yàn)證，沉淀項(xiàng)目經(jīng)驗(yàn)。

Step01：問題分析

經(jīng)過體驗(yàn)走查、對(duì)過往數(shù)據(jù)的分析，以及對(duì)接上游業(yè)務(wù)方的訴求，發(fā)現(xiàn)問題可以歸為 2 大類：體驗(yàn)不佳和不滿足業(yè)務(wù)訴求。

1. 體驗(yàn)不佳

頁面由于多年沒更新視覺，跟新版 WPS 的主視覺已經(jīng)不太匹配，同時(shí)由于多年的功能迭代和業(yè)務(wù)擴(kuò)張，頁面視覺已經(jīng)相去甚遠(yuǎn)，整體體驗(yàn)的質(zhì)量大幅下降。

2. 不滿足業(yè)務(wù)訴求

基于原本的卡片結(jié)構(gòu)，各業(yè)務(wù)會(huì)在一定程度上相對(duì)獨(dú)立。由于各業(yè)務(wù)的內(nèi)容不一樣，導(dǎo)致每個(gè)卡片的信息密度、視覺樣式都相去甚遠(yuǎn)。整體上看，業(yè)務(wù)混亂且缺乏重點(diǎn)。而且，由于框架限制，原頁面難以支持新業(yè)務(wù)的拓展。

Step02：目標(biāo)設(shè)定

基于上述的問題，經(jīng)過與產(chǎn)品、運(yùn)營側(cè)的多次探討想法，我們制定了以下設(shè)計(jì)目標(biāo)，幫助解決體驗(yàn)的問題和滿足業(yè)務(wù)側(cè)的訴求。

Step03：設(shè)計(jì)策略

1. 重塑秩序

原本頁面頭部卡片，個(gè)人身份信息、基礎(chǔ)功能、運(yùn)營入口混雜在一起，排布散亂。卡片平鋪無主次，且多業(yè)務(wù)混雜難以區(qū)分。

要想頁面回歸秩序，需要把頁面內(nèi)容重新整理并合理排布?！感畔⒅貥?gòu)」和「頁面框架搭建」，是重塑秩序的兩項(xiàng)核心內(nèi)容。

① 信息重構(gòu)

針對(duì)舊頁面的信息重構(gòu)，我們采取「頁面拆解」-「內(nèi)容增刪改」-「重組與分區(qū)」的流程來進(jìn)行。

經(jīng)過與各業(yè)務(wù)模塊負(fù)責(zé)人核對(duì)，完成了內(nèi)容的增刪調(diào)整和重組。重組后的頁面信息可大致劃分為四大模塊，分別是“個(gè)人相關(guān)、基礎(chǔ)功能、業(yè)務(wù)功能、運(yùn)營推廣”。

② 頁面框架搭建

頁面框架重建主要為了提升內(nèi)容聚合度，以及進(jìn)行合理排布，確保框架更為清晰、易理解。基于用戶反饋和歷史數(shù)據(jù)，我們結(jié)合用戶的訴求，將高頻的功能優(yōu)先呈現(xiàn)。同時(shí)，兼顧業(yè)務(wù)的訴求和未來業(yè)務(wù)的可拓展性，進(jìn)行了整體框架的設(shè)計(jì)。

主界面劃分了 4 個(gè)區(qū)域，頂欄為全局功能區(qū)，接著是大促活動(dòng)的主推運(yùn)營配置區(qū)，左側(cè)為個(gè)人歸屬區(qū)，右側(cè)為會(huì)員業(yè)務(wù)、基礎(chǔ)業(yè)務(wù)、運(yùn)營業(yè)務(wù)的聚合區(qū)域。

個(gè)人歸屬區(qū)

左側(cè)個(gè)人歸屬區(qū)主要包含個(gè)人相關(guān)的內(nèi)容，如頭像、名稱等基礎(chǔ)信息，會(huì)員身份&權(quán)益套餐展示，以及我的云服務(wù)、我的資源、我的積分等個(gè)人擁有的資源；

多業(yè)務(wù)聚合區(qū)

此模塊集合了多個(gè)業(yè)務(wù)的內(nèi)容，包括會(huì)員業(yè)務(wù)、運(yùn)營業(yè)務(wù)、基礎(chǔ)業(yè)務(wù)、以及后續(xù)可能新增的業(yè)務(wù)。每個(gè)業(yè)務(wù)以 Tab 標(biāo)簽的形式進(jìn)行切換，為后續(xù)業(yè)務(wù)拓展提供良好的框架支持。

2. 視覺升級(jí)

① 個(gè)人信息樣式瘦身

原本身份卡尺寸較大，視覺很突出，但也會(huì)占據(jù)過多的空間。強(qiáng)對(duì)比的大色塊，會(huì)顯得視覺過于突兀，同時(shí)會(huì)導(dǎo)致卡片上的內(nèi)容可讀性降低。

新版身份卡做了簡化，把個(gè)人信息提出卡片，提升可讀性。

該區(qū)域同時(shí)強(qiáng)化了個(gè)人所擁有會(huì)員、權(quán)益的展示，目的是讓用戶更輕易感知自己目前的身份權(quán)益和消耗情況，而且可以通過點(diǎn)擊彈窗查看具體的消耗狀態(tài)。

即使減小了身份卡的區(qū)域面積，這里仍然是最突出的位置?？紤]到用戶對(duì)會(huì)員感知的一致性，該處與其他場景出現(xiàn)的會(huì)員身份卡保持基本一致。

② 會(huì)員卡片規(guī)范化

原本的會(huì)員卡片信息元素分布零散，且不同狀態(tài)下，樣式各異。經(jīng)過與產(chǎn)品、運(yùn)營等業(yè)務(wù)方溝通協(xié)商，簡化了卡片樣式，制定了卡片內(nèi)容規(guī)范。

③ 業(yè)務(wù)模塊精簡

對(duì)于業(yè)務(wù)功能引導(dǎo)，從卡片改為列表，是和業(yè)務(wù)爭議較大的點(diǎn)。但實(shí)際數(shù)據(jù)證明新版的入口流量遠(yuǎn)大于舊版，是原來的 5 倍左右。

3. 運(yùn)營感知

頁面為運(yùn)營內(nèi)容整理了一個(gè)單獨(dú)的區(qū)域。由于該模塊是活動(dòng)推廣的內(nèi)容，需要強(qiáng)化活動(dòng)的氛圍。因此，對(duì)活動(dòng)運(yùn)營入口、優(yōu)惠信息做了視覺強(qiáng)化，增加對(duì)用戶的吸引力。

Step04：成果驗(yàn)證

經(jīng)過數(shù)月的分析、構(gòu)思、方案制定和開發(fā)實(shí)施，項(xiàng)目已經(jīng)成功上線。然而，對(duì)于設(shè)計(jì)師而言，上線只是一個(gè)階段。項(xiàng)目的真正價(jià)值需要通過用戶反饋和數(shù)據(jù)驗(yàn)證來確認(rèn)，跟進(jìn)反饋并持續(xù)迭代優(yōu)化是我們的責(zé)任。

1. 測試與驗(yàn)證

WPS 用戶量巨大，一下子全量發(fā)布會(huì)面臨極大的風(fēng)險(xiǎn)。我們采取了逐步放量的策略，收入數(shù)據(jù)和用戶反饋相對(duì)穩(wěn)定后，繼續(xù)進(jìn)行階梯級(jí)放量。灰度階段整體相對(duì)穩(wěn)定，在保持收入穩(wěn)定的情況下，還有上升的趨勢(shì)，灰度 50%期間 eCPM 值提升了 10%左右。

為了第一時(shí)間收到用戶的反饋，本次改版在右上角新增了反饋入口。自上線以來，收到了一些反饋，但整體對(duì)于界面體驗(yàn)的負(fù)面反饋相對(duì)較少。當(dāng)然，我們會(huì)根據(jù)用戶反饋持續(xù)做優(yōu)化。

本次改版變化極大，對(duì)用戶習(xí)慣的改變也很大，但就反饋而言，用戶對(duì)新版的接受度還是蠻高的。

總結(jié)

對(duì)于一個(gè)擁有龐大用戶群且業(yè)務(wù)收入長期保持穩(wěn)定的界面來說，即使是一次簡單的改動(dòng)，也需要設(shè)計(jì)、產(chǎn)品、運(yùn)營等進(jìn)行多維度的綜合考量。本次改版是一個(gè)全面的過程，涵蓋了信息架構(gòu)的重建、界面框架的搭建、視覺元素的升級(jí)以及新標(biāo)準(zhǔn)的制定，實(shí)現(xiàn)了從舊版到新版的徹底轉(zhuǎn)變，是一次重大的改版。

項(xiàng)目歷經(jīng)幾個(gè)月，最終能夠順利實(shí)施，得益于產(chǎn)品、設(shè)計(jì)、運(yùn)營、開發(fā)和測試等各方成員的通力合作。改版帶來的顯著變化和業(yè)務(wù)數(shù)據(jù)的積極反饋，證實(shí)了我們的改版方向是正確的。這也進(jìn)一步鼓勵(lì)我們?cè)谖磥砝^續(xù)勇于創(chuàng)新，大膽假設(shè)，小心求證，為用戶和業(yè)務(wù)持續(xù)優(yōu)化產(chǎn)品。

歡迎關(guān)注作者微信公眾號(hào)：「CED設(shè)計(jì)團(tuán)隊(duì)」