Image for post
Image for post

Read this article in English / 點我看英文版

前情提要

在產品開發初期,一切都以快為前提。UI 可能不是最重要的環節。但在產品有一定規模後,缺乏管理的 UI library 往往變成拖慢設計團隊專案製作的原因之一。以下我將跟大家一步步分享我這一年在新創公司從建立,到管理 UI 元件的步驟及心得。

目標

1.提供設計團隊更容易使用的 UI library。2.提供設計團隊更容易更新的 UI library。3.將 UI library 更新流程融入工程師的開發步驟。

解決方法

1. 統一軟體使用

公司在經歷了不同的設計師使用了不同的軟體後,多樣的軟體和檔案造成了 UI library 管理的難度。在參考了 uxtools.co 之後我決定統一使用 Sketch Library 作為我們公司管理 UI library …


Image for post
Image for post

Read this article in Traditional Chinese/ 點我看繁體中文版

Intro

At the early stages of product development, everything is about speed. UI might not be the most prioritized thing. But after the product has reached a certain scale, not having a well-managed UI library will slow down future product design processes. Below is a step-by-step of what I learned about building components and managing a UI library.

Objectives

Design a UI library that can1. be used effortlessly by the design team2. be updated effortlessly by the design team3. integrate seamlessly with the engineering team’s development process

Solutions

1. Software usage unification

When I arrived at the company, previous designers had used different design softwares to create UI components, leading to an inconsistent and messy UI library. After doing research, I chose Sketch Library as the platform for our company’s UI library management software due to the fact that it has multiple open source plugins and it is popular within the design industry. …


Image for post
Image for post

Read this article in English / 點我看英文版

前言

MOCACARE 旗下產品 MOCAheartMOCACuff 自上市以來幫助許多使用者快速測量及記錄健康狀況。將產品連線至 app 後紀錄健康資料不外乎是最常被使用的功能之一。

然而,在 app 不斷更新及加入新功能後,我們察覺到使用者在連線 MOCACARE 產品至 app 的這段流程出現許多可優化的地方。

以下是我們優化 MOCACARE app 連線體驗的設計過程:

決定優化目標

我們首先觀察了不同使用者將 MOCACARE 產品連線至 app 的過程,並蒐集他們對這段流程的感受。以下是部分我們蒐集到的回饋:

連線步驟操作有點籠長。

每次都要切換要連線的產品,有點麻煩。

有些步驟的插圖解釋的有點不清楚。在不熟悉 app 時, …


Image for post
Image for post

Read this article in Traditional Chinese / 點我看繁體中文版

Intro

After MOCACARE launched MOCAheart and MOCACuff, these products helped many users measure and track their health data efficiently. Using the MOCACARE smart phone app to pair with the MOCAheart and MOCACuff, measure health data, and collect health data, are the most important functions of the app.

However, after many app updates and additional new features, we realized that there was room for improvement in the the app pairing process.

Below is our design process of optimizing the pairing experience of the MOCACARE app:

Determine objectives

First of all, we observed different users pairing the product to the app and made note of the users’ feedback. …


Image for post
Image for post

Read this article in Traditional Chinese / 點我看繁體中文版

Intro

A set of well-designed icons not only will efficiently communicate correct information to users, but it will also inject good user experience into the product. Nowadays, a set of well-designed icons is essential to product design.

When I started on this app icon redesign project, I ran into the problem of a tight deadline coupled with a limited workforce. Given these restrictions, I decided to focus on the most frequently used icons first. …


Image for post
Image for post

Read this article in English / 點我看英文版

前言

一組好的 icons 不僅能幫助使用者快速了解正確的資訊,還可以為產品注入好的使用體驗。擁有一組優質的 icons ,對於現今的產品開發而言再重要不過了。

重新設計所有 MOCACARE app icons 所要花的時間比我預計的還要多上許多!在有限的人力(也就我一個 UI 設計師啊!)及時間下,我決定先著手進行 users 較常用的那幾個 icons,並在設計的過程中清楚列出 MOCACARE Icon Suite 該有的設計準則,以便未來可以持續為使用者產出體驗一致的 icons。

以下是我在設計 MOCACARE App Icon Suite 時所定的五項準則:

1. 容易被理解

Icons 的設計必須要讓使用者一眼就可聯想到正 …

About

Yen Hung (Jeff) Lin

Designer @Engagio. Previously @MocaCare and @HTC. yenhunglin.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store