UI Improvement details of Crowdworks' Apps
CrowdWorks is one of the biggest crowdsourcing services and growing rapidly in Japan.
Registered developers/designers can apply to more than 70 kinds of projects/tasks,
from development of iPhone(iOS) and Android Apps, to website and logo designs.
They offer new work style to 130,000 users.
クラウドワークスのアプリ開発チームのデザイナーとして、ワーカーの仕事応募率を高めるために、Android 及び iOSアプリの仕事詳細のUI改善を行いました。
このプロジェクトは、プロジェクトマネジャー1人、各OSのエンジニアで構成されたチームで進めました。
I improved the UI of the iPhone (iOS) and Android Apps of CrowdWorks.
The goal of this project was to redesign the job detail screen in order to increase the job application rate.
I completed the project in a team containing a project manager, and engineers for each native OS.
主なデザインプロセス
既成事実の収集や分析を踏まえ、ユーザーのニーズを洗い出すために、まずユーザビリティテストとインタビューを実施。
その結果に基づいて、ユーザーの仕事選びの判断軸やペインポイントを可視化するために、ペルソナとペルソナのエクスペリエンスマップを作成。
そのエクスペリエンスマップを元に、ペルソナの課題を解決できるUIを考えファンクショナルプロトタイプに落とし込み。
その後もユーザビリティテストとインタビューによる仮説検証とプロトタイプへの反映のサイクルを繰り返し、ユーザーの課題達成のための最適なUIを実現しました。
Using our existing set of knowledge about user actions and customer reviews, we began by setting up a system for usability and interviews and conducting them at length.
We then analyzed the results of these interviews to gain insights about things that our users prioritize when deciding whether or not to accept a job, and created a persona and a map of the various kinds of users on our platform and their relative needs.
Then we transferred this knowledge into a rough prototype where the information hierarchy and overall experience was tailored for these "personas".
Even after completing the first round of UI updates, we continued to refine the design through a cycle including usability and interviews, leading to the creation of hypotheses which we then tested by updating the UI and analyzing the data to decide which updates become permanent.
The results of user Interviews and usability tests
ユーザーインタビューとユーザビリティテストの結果
ユーザーインタビューとユーザビリティテストの結果、仕事を選ぶ上での判断軸は職種によってばらつきがあるわけではなく、基本的な部分は概ね同じであることがわかりました。
Based on user interviews and usability tests, we concluded that the criteria used to select jobs didn’t differ significantly based on the type of job. And we also found that the following were the most important questions job seekers had, in order of importance:
- Is the job a good fit for me? (based on skills, time requirements etc.)
- Does this person seem easy to work with?
- Does this person seem trustworthy?
Each of these have corresponding data in the app, so my job then was to define an informational structure that shows user the data they want to see in the correct priority.
ファンクショナルプロトタイプ
このフェーズでは、様々なパターンをラフに再現し比較対象として用意し、ユーザーインタビューとユーザビリティテストを行うことで、異なるUIパターンのメリット・デメリットを洗い出しました。
Starting at the first stage of creating functional prototypes, our goal was to rapidly compare and iterate on as many versions of the design as possible, and try as many different UI patterns as possible.
Below are wireframe examples of four different configurations I considered :
1. This is a card-based style that optimizes for breadth of information by hiding detailed information for each section by default, but showing many sections so that again, users can quickly find the portion they care about and expand from there.
The job poster's reviews section is also compact, showing only their star rating until the user taps to view more information.
2. This design focuses on transmitting the specifics of the job itself, with as much detail as possible without forcing users to tap elements to get more information.
Client reviews are included but not prioritized as highly as the job details, and the same is true for the list of applicants.
3. This version further prioritizes information about the job poster themselves rather than the job posting, in an attempt to allow users to quickly judge the other user without wasting time thinking about whether the job is a good fit or not, just to find that the person posting the job looks suspicious to them.
4. This simple view employs a hybrid approach where it also focuses on the job details,
but also includes the status of existing applications to inform users about how many competitors they have.
These are both prioritized above the data for the job poster's feedback.
情報設計
ユーザーインタビューの結果とそれらを反映したペルソナ、エクスペリエンスマップ、そしてプロトタイプの作成とユーザビリティテスト、インタビューでの仮説検証のサイクルを回し、仕事詳細に表示する項目の順番、及びクライアント評価の見せ方を決定しました。
以下、今回の情報設計に至った具体的な理由。
タブ構成の解体
仕事詳細の全体像を把握するにあたり、以下の理由からタブ構成の解体を行いました。
・ユーザー調査の結果から、仕事詳細の全体像を把握する際、タブ内の情報を見比べる必要があることがわかりました。
しかし、タブがあることで、あちこち行き来しなければならなくなって、短期記憶の負荷が高まり、認知的負荷とインタラクションのコストが増加していました。
そのため、すべてのコンテンツを大きな1ページに入れたデザインにすることで、ユーザビリティを高めるUIに変更しました。
（代替として、同一ページ内に応募状況・クライアント情報のサマリーを表示）
ユーザーのニーズを検証し、表示項目を決定
ユーザーインタビューとテストによる仮説検証の結果をふまえ、以下のニーズをUIに反映しました。
①ワーカーは仕事情報に加え、競合となる応募者数が多くないかを判断の軸においていることがわかったので、「応募状況」の情報を、最重要情報である「仕事の概要」セクションの次に配置。
②ワーカーは「信頼できるクライアントなのか」を判断の軸においていることがわかったので、信頼できるクライアントかどうか、判断しやすいように、
以下2点を工夫しました。
A. 既存では評価の詳細画面はWebだけの機能となっていたため、アプリでも参照できるように、評価の詳細を確認する導線と評価の詳細画面を追加。
B. すべてのコンテンツを1ページに入れたデザインにすることで、クライアントの信頼度を判断するための基本情報である「評価 & 本人確認 (済/未)」が以前より下に表示されるレイアウトになってしまうことがネックでした。
そのため、「応募するボタン」を固定表示にし、ボタンの左側に「評価 & 本人確認 (済/未)」情報を表示。
さらに、この「評価 & 本人確認 (済/未)」ラベルに、評価の詳細を確認するための導線を追加することで、いつでも評価の詳細画面を参照することができるようにしました。
A & Bにより、ワーカーが、いつでもクライアントの「評価 & 本人確認 (済/未)」を参照することができ、クライアントの評価の詳細画面に遷移できるようになりました。
これにより、ワーカーがストレスなくスムーズに「信頼できそうなクライアントか」判断できるストーリーを実現することができました。
→上記①②の実現により、ページ内の一覧性を高めながら、ワーカーが応募したい仕事かどうかを素早くで判断できるUIに改善することができました。
アイコン改善
「改善点を事務局へ通知する」アイコン
「改善点を事務局へ通知する」ためのアイコンは、怒った顔のアイコンが使われていましたが、怒った顔だけでは、新規ユーザーはそれが何を表しているのかを判断することが難しいため、ラベリングを付けてわかりやすくする必要がありました。
また、怒った顔がページトップにあると印象が良くない、且つアイコンそのものの意味合いとしても、「事務局に改善点を通知する」と結びつきが弱いため、アイコンの形を三点アイコンに変え、その中に「改善点を事務局へ通知する」を配置するUIに変更しました。
共有するアイコン
データを分析したところ、共有ボタンは使用頻度が少なかったため、三点アイコンの中に含めることにしました。
ページ内の視覚的ノイズの軽減
スタイリングの観点から見て、以下の点を改善しました。
罫線の削除
「仕事の概要」で行ごとに引いている罫線は、見出しの下に引いている罫線のスタイルと同一であり、視覚的ノイズとなっていたため、罫線を使わず、アプリらしく且つ情報の区切りをわかりやすくするため、カードをベースにしたデザインに変更しました。
タイトルのカラー
改善前のデザインは、アプリ全体においてコントローラブルなオブジェクトに対し利用される水色がタイトルのカラーに使われていましたが、
スタイリングとしてテキストリンクと近接しすぎるため、見出しの色を黒に変更しました。
配色によるアクセント付けの代替として、マージンを多めに取り、太さと大きさで強弱をつけることで、「見出し」としての機能を担保させました。
Information Architecture
I used the information from user interviews and usability tests to decide what data to show on the screen and in what order.
I also designed the interface for showing user ratings, which are another major component for which we got feedback in our user interviews.
Removing the tab bar
Considering the overall architecture of the job details page, we decided to remove the tab bar.
Based on the results of user interviews, we concluded that the jumping back and forth between pages and comparing data necessitated by the tabbed structure was a suboptimal experience.
It caused an unnecessarily high cognitive load on users who had to keep the contents of other tabs in their minds while reading the content of other tabs.
Because of this, I decided to consolidate all of the tabs into a single-page design, in order to increase the page's usability.
In exchange, I elected to show summaries for the job's status and client information.
Deciding display attributes based on analysis of users' needs
We also gained various other insights from the user interviews:
1. In addition to seeing details about the job contents itself, many users were also curious about the number of fellow users who had already applied to do the job.
They want to understand how many "competitors" they have.
Because of this, I prioritized this data by moving it to the "job summary" section near the top of the page.
2. Another concern raised by users was the question of whether a job poster was trustworthy.
I realized this is very important users, but by moving to a single-page layout,
I was forced to move the reviews and job poster information further down on the page.
To solve this problem, I took several steps:
A. I created a new pathway in the app to view the specifics of a user's history,
which had previously been a web-specific feature.
B. I also added the data about a user's previous actions to the left of the "Apply" button, which is in a fixed position on the screen that's always visible.
This UI allows users to quickly decide whether the job poster looks trustworthy or not,
and it still allows us to gain all of the benefits from the new single-page design.
Both #1 and #2 above contributed to making the information hierarchy more consistent, and helped our users more quickly decide whether to apply to a job or not.
Improving the Icons
The "Request an update" icon
The icon for requesting an update from the job poster was initially an angry-looking face, but that icon wasn't enough to express the button's purpose, and we found that it confused new users.
To fix this, I realized that we needed to add a label to make it more clear.
Also, having the angry face icon at the top of the page isn't ideal.
I decided to replace the icon with a three-dot menu button with a text label so that users would know exactly what it did.
The "Share" Icon
After doing some data analysis, we found that the "Share" button wasn't used very much, so we also consolidated it inside our new menu with the three-dot icon.
Reducing Visual Noise
I also took the following steps with the aim of reducing the amount of "noise" in the UI.
Removal of Lines
In the original design, there were lines separating each line in the "Job Summary", underneath headers etc.
I decided that many of these lines were unnecessary and only felt like visual noise on the page.
They also take up vertical space, so I decided to remove them, which both reduces the noise and makes the content height more consistent.
I also added some additional grouping of page elements in order to create a more mobile app-like feel for the UI.
Title Color
Before my design renewal, the overall app's tappable elements were using a turquoise color for their titles.
However I decided that style looked too similar to links, so I switched the title text to use black instead.
In order to maintain the feeling of being "highlighted", I increased the title margins and also increased the size of the text so that they feel more like titles.
Before
After
