> **官方網站 Official Website：**
>
> **[Seymour® 每天 10 分鐘 培養英文好語感](https://seymour.tw/)**

Seymour® is an E-learning product developed under a LINE® environment, designed to focus on interactive micro-learning. The primary objective for Seymour® is to create a different practice-type environment for different user preferences and with the assistance of an AI guide to give learners feedback and offer a customized English learning experience.

Seymour® 為一個在 LINE® 環境架構下的數位學習平台，設計強調以互動式學習方式和微學習的模式來運作。Seymour® 的主要目標是創造一個多樣化的練習類型環境，以適應不同用戶的偏好，並在科技 AI 的幫助下為學習者提供反饋來作為指引，從而提供定制化的英語學習體驗。

---

## **Role and Contributions**

As a startup designer, I've been involved with Seymour® from the beginning. We tackled visual challenges to accommodate diverse user preferences. Through experimentation and user feedback, we found suitable solutions for a mutually beneficial experience.

## **工作設計貢獻**

作為初創公司的一名設計師，我從 Seymour® 的初期就參與其中，在一開始在視覺上也面臨不同的挑戰例如：不同年齡和不同教育背景用戶的需求有著不同的偏好以及美感。為了解決這些問題，我們當中進行了各種嘗試，收集用戶反饋，並探索不同的視覺風格。這種反覆試驗的過程幫助我們找到最適合的方案並不斷的與用戶互動，以達到雙方良好的體驗。

---

## **Early Stage**

We aim to create animations centered around dialogue, using everyday life scenarios to teach English. After completing sufficient designs and establishing four character settings, we conducted an Alpha Test. Below is the very early-stage animation video.

## **初期**

我們希望以對話為主的方式來製作動畫，通過日常生活場景來教導英文。在完成了足夠的設計以及四個角色的設定後，我們進行了Alpha測試。以下是非常初期的動畫影片。

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fw1b1W25RzJYzUEPOOtzw8Ga1Ye12%2Fdesigning-process-about-seymour%2F706ccd89-6c5a-43c9-ad8b-b68c2f8f924f.mp4?alt=media&token=3ac34e20-1907-434a-a45a-0ff6f948d080","id":"706ccd89-6c5a-43c9-ad8b-b68c2f8f924f","width":720,"height":720,"filename":"GLGR0081b.mp4","type":"video/mp4","caption":"","border":false}]}
```

---

## **Experimentation & User Feedback**

After testing and collecting feedback, we gained a preliminary understanding of our audience and their preferences. Based on survey results, we explored different styles and visual updates. These experiments and feedback allowed us to make adjustments throughout the design process, ensuring that the final product truly meets the users' needs and expectations.

## **實驗和用戶意見回饋**

而經過測試和蒐集回饋後，我們對產品的受眾和愛好有了初步的了解，根據問卷調查，我們展開了不同風格的探索及視覺更新。透過這些實驗和反饋讓我們能夠在設計過程中互相調整，以確保最終產品能夠真正滿足用戶的需求和期望。

---

## **Visual Redesign and Asset Preparation**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fw1b1W25RzJYzUEPOOtzw8Ga1Ye12%2Fdesigning-process-about-seymour%2Fdf7506d0-77e0-478c-9466-f79c20c01f36.png?alt=media&token=a824fe57-113a-40f0-a7fd-ee597ac5efbb","id":"df7506d0-77e0-478c-9466-f79c20c01f36","width":1920,"height":1080,"filename":"Experimentation.png","type":"image/png","caption":"","border":false}]}
```

We tested the colors of the characters and the stage, considering the video will be played on a mobile screen. We also evaluated the necessary details to make the video more engaging and ensure viewers complete the entire two-minute video.

My involvement included:

* **Illustrations for Stage Art**: Creating visually appealing and contextually appropriate stage art.

* **Character Expressions and Outfits**: Designing a range of expressions and outfits to enhance character relatability and engagement.

## **角色視覺更新**

我們決定針對角色和舞台的顏色進行更改，並考慮到我們的影片會在手機裝置上播放來斟酌多少細節是必要的，以確保觀眾能夠完成整個兩分鐘多長的影片。

我的工作包括了：

**舞台藝術插圖：** 創作具有視覺吸引力且符合情境的舞台藝術插圖。

**角色表情和服裝：** 設計多種表情和服裝，以增強角色的親和力和吸引力。

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fw1b1W25RzJYzUEPOOtzw8Ga1Ye12%2Fdesigning-process-about-seymour%2F6e0c05e6-1df7-4844-bb09-44266b65e6c4.png?alt=media&token=6af4ee77-1d51-4e62-bfb2-1911135fbcf3","id":"6e0c05e6-1df7-4844-bb09-44266b65e6c4","width":1214,"height":772,"filename":"image.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fw1b1W25RzJYzUEPOOtzw8Ga1Ye12%2Fdesigning-process-about-seymour%2F9ca88c6b-e79e-4eb3-b1e9-f495b3e3f2f7.png?alt=media&token=52f7df69-8b3c-4947-a680-e6593624150a","id":"9ca88c6b-e79e-4eb3-b1e9-f495b3e3f2f7","width":1174,"height":772,"filename":"image.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fw1b1W25RzJYzUEPOOtzw8Ga1Ye12%2Fdesigning-process-about-seymour%2Fc63cdb03-7430-4270-9c92-7ba31ca580b5.png?alt=media&token=a675944c-6d7e-49c1-b0f5-1d902e6bcf7e","id":"c63cdb03-7430-4270-9c92-7ba31ca580b5","width":1920,"height":1080,"filename":"Pantry.png","type":"image/png","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fw1b1W25RzJYzUEPOOtzw8Ga1Ye12%2Fdesigning-process-about-seymour%2Febc4a84b-eda3-4c20-be6a-467a6bf3c67c.png?alt=media&token=299a5153-44d8-4d32-a6aa-9a76f5c317a5","id":"ebc4a84b-eda3-4c20-be6a-467a6bf3c67c","width":1214,"height":772,"filename":"image.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fw1b1W25RzJYzUEPOOtzw8Ga1Ye12%2Fdesigning-process-about-seymour%2F25e47aa8-d00e-4d71-a83f-0257d130f9e8.png?alt=media&token=60a8675c-959b-4a53-ae76-c049654335c3","id":"25e47aa8-d00e-4d71-a83f-0257d130f9e8","width":1174,"height":772,"filename":"image.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fw1b1W25RzJYzUEPOOtzw8Ga1Ye12%2Fdesigning-process-about-seymour%2Fd6692b26-7539-44d0-87b4-7a42b112f566.png?alt=media&token=34ae9d7d-a722-4539-8b5c-fb25a22a19da","id":"d6692b26-7539-44d0-87b4-7a42b112f566","width":1920,"height":1080,"filename":"Bar.png","type":"image/png","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fw1b1W25RzJYzUEPOOtzw8Ga1Ye12%2Fdesigning-process-about-seymour%2F07339c4e-4c4a-4050-b4de-172eb94c015c.png?alt=media&token=04cf0eb1-00d3-4a0a-bfed-8a98bdbf934b","id":"07339c4e-4c4a-4050-b4de-172eb94c015c","width":1194,"height":834,"filename":"image.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fw1b1W25RzJYzUEPOOtzw8Ga1Ye12%2Fdesigning-process-about-seymour%2F4f56e4b7-d3ab-4288-b057-586f84e9fdce.png?alt=media&token=199e9260-9ee5-4130-8769-32498a293c38","id":"4f56e4b7-d3ab-4288-b057-586f84e9fdce","width":1194,"height":834,"filename":"image.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fw1b1W25RzJYzUEPOOtzw8Ga1Ye12%2Fdesigning-process-about-seymour%2F7d5ab44f-d843-4b9d-9890-c1b48aba2cd1.png?alt=media&token=2dac98ac-081f-4b6f-b95e-d2ab97fb849c","id":"7d5ab44f-d843-4b9d-9890-c1b48aba2cd1","width":1194,"height":834,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

---

## Collaboration and Brainstorming

Throughout the project, I collaborated closely with the engineering and content teams.

This involved:

* **Discussion with the Engineering Team**: Ensuring that the designs were feasible and optimized for implementation.

* **Content Team Coordination**: Aligning visual elements with educational content to maintain consistency and effectiveness.

* **Brainstorming Sessions**: Participating in brainstorming sessions to generate innovative ideas and solutions for the product.

## 合作與腦力激盪

在整個項目中，我與工程和內容團隊緊密合作。

具體包括：

**與工程師部門討論：** 確保設計可行性並優化實際運作過程。

**課程內容團隊協調：** 使視覺元素與教育內容保持一致性和有效性。

**腦力激盪：** 為產品產生創新想法和解決方案。

---

## Character Puppetry and Animation

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fw1b1W25RzJYzUEPOOtzw8Ga1Ye12%2Fsaan2vofzChLFkQlmeBi%2F29369b18-16c9-4e58-b597-cadb31b65546.jpg?alt=media&token=b21de275-633e-4d19-90cd-0f2a9eb7a945","id":"29369b18-16c9-4e58-b597-cadb31b65546","width":1521,"height":1165,"filename":"1712480786078.jpg","type":"image/jpeg","caption":"","border":false}]}
```

One of my key responsibilities was using the armature system in Blender® software to create and animate puppets for each character, archiving them into an animation library with additional components for future animation productions.

This involved:

* **Creating Puppets**: Designing and rigging character puppets to ensure fluid and natural movements.

* **Animating Characters**: Bringing characters to life through detailed animation work, ensuring they were engaging and expressive.

## 角色木偶操作和動畫製作

我的其中主要責任是使用Blender®軟體中的骨架系統來創建和動畫化每個角色的木偶，並將其建檔成動畫庫，以長期使用為目標的配上擴充元件來完成將來的動畫製作。

這包括：

**創建木偶：** 設計和綁定角色木偶，以確保流暢自然的動作。

**角色動畫：** 通過詳細的動畫工作使角色栩栩如生，確保它們具有吸引力和表現力。

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fw1b1W25RzJYzUEPOOtzw8Ga1Ye12%2Fsaan2vofzChLFkQlmeBi%2F2dccd0ee-6fd4-49f1-bccd-ebb9aa3c1a4b.gif?alt=media&token=188d0a51-d92b-455c-b3bb-147ae256dc4b","id":"2dccd0ee-6fd4-49f1-bccd-ebb9aa3c1a4b","width":540,"height":550,"filename":"Abigail 走路(架構）.gif","type":"image/gif","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fw1b1W25RzJYzUEPOOtzw8Ga1Ye12%2Fdesigning-process-about-seymour%2F341834b9-185e-4ac9-9c36-a06200055a17.png?alt=media&token=a275d0cb-8b40-458a-b9fb-40c533d70e3b","id":"341834b9-185e-4ac9-9c36-a06200055a17","width":1920,"height":1080,"filename":"Screenshot 2023-01-09 at 6.03.27 PM (2).png","type":"image/png","caption":"","border":false}]}
```

---

## User Interface Design for Interactive Practices

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fw1b1W25RzJYzUEPOOtzw8Ga1Ye12%2Fdesigning-process-about-seymour%2F7ca38b8a-6c2b-44c5-80d9-35416ba574f6.png?alt=media&token=d0e916b5-eea3-4c5d-82b0-7372944ab3a1","id":"7ca38b8a-6c2b-44c5-80d9-35416ba574f6","width":860,"height":1140,"filename":"image.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fw1b1W25RzJYzUEPOOtzw8Ga1Ye12%2Fdesigning-process-about-seymour%2Fd7b78aee-98f6-4a38-9cac-290b18855a71.png?alt=media&token=43c48c54-257e-4f6e-be44-1d612bf050c2","id":"d7b78aee-98f6-4a38-9cac-290b18855a71","width":860,"height":1140,"filename":"image.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fw1b1W25RzJYzUEPOOtzw8Ga1Ye12%2Fdesigning-process-about-seymour%2F155a165d-f22d-4a2f-af94-43384dfe963f.png?alt=media&token=a3c6cb95-c8cb-4412-b7be-6a4dc23b3b2d","id":"155a165d-f22d-4a2f-af94-43384dfe963f","width":860,"height":1140,"filename":"image.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fw1b1W25RzJYzUEPOOtzw8Ga1Ye12%2Fdesigning-process-about-seymour%2Faf68b7aa-4f70-44f7-a70b-5d789d7e45b0.png?alt=media&token=263d4b0a-0c73-4b8d-9f39-11477b6faac2","id":"af68b7aa-4f70-44f7-a70b-5d789d7e45b0","width":860,"height":1140,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

The last thing is to combine all of the works from above, I need to design the user interface for interactive practices on mobile devices, letting users see and use.

This involved:

* Interactive Practice Design: Designing intuitive and straightforward interfaces to enhance the learning experience on mobile platforms and meet diverse user needs.

## 互動的使用者界面設計

最後的任務是將以上所有工作整合，設計在手機設備上的互動練習使用者界面，以讓使用者能夠看到和使用。

這涉及到：

**互動練習設計：** 設計直觀且簡單的界面，以增強在手機平台上的學習體驗已達到不同使用者需求。

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fw1b1W25RzJYzUEPOOtzw8Ga1Ye12%2Fdesigning-process-about-seymour%2F7505b92f-db8b-4efb-aea5-201d1366753d.png?alt=media&token=4c11b3b6-cf35-4133-9fec-14ef04f3d564","id":"7505b92f-db8b-4efb-aea5-201d1366753d","width":2880,"height":1800,"filename":"Screenshot 2023-01-09 at 6.01.11 PM.png","type":"image/png","caption":"","border":false}]}
```

---

## **LINE Bot Designer (LBD)**

LINE Bot Designer is a specialized software developed by LINE, tailored for designing and prototyping user interfaces for chatbots. It enables designers to seamlessly transition from interface design to development mode, facilitating efficient creation and testing of interactive chatbot experiences on the LINE platform.

## **LINE Bot Designer (LBD)**

### LINE Bot Designer是LINE開發的專門軟件，旨在為聊天機器人設計和原型化用戶界面。它使設計師能夠無縫地從界面設計過渡到開發模式，從而在LINE平台上創建和測試交互式的聊天機器人體驗。

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fw1b1W25RzJYzUEPOOtzw8Ga1Ye12%2Fdesigning-process-about-seymour%2F390937a9-e290-4cc6-bdff-b545418798da.png?alt=media&token=87b7d81a-0119-4659-9585-8904d0bc2f87","id":"390937a9-e290-4cc6-bdff-b545418798da","width":1067,"height":373,"filename":"S+ - Whole Catalog Completed (Notif On).png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fw1b1W25RzJYzUEPOOtzw8Ga1Ye12%2Fdesigning-process-about-seymour%2Ffc3be00a-d931-4b8a-94d4-bc6cc6ab5d96.png?alt=media&token=43cb9ac9-0f42-4211-8920-2082cddb098a","id":"fc3be00a-d931-4b8a-94d4-bc6cc6ab5d96","width":524,"height":425,"filename":"S+ - No Prev Daily Push or Prev Daily Push completed.png","type":"image/png","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fw1b1W25RzJYzUEPOOtzw8Ga1Ye12%2Fdesigning-process-about-seymour%2F22ccd3e6-d7f0-4407-b275-207d9d452d3f.png?alt=media&token=df5ee41f-68ca-4c11-9a66-b127d9a1f609","id":"22ccd3e6-d7f0-4407-b275-207d9d452d3f","width":526,"height":431,"filename":"Screenshot 2024-02-20 at 6.04.56 PM.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fw1b1W25RzJYzUEPOOtzw8Ga1Ye12%2Fdesigning-process-about-seymour%2F9b947423-5c1b-42d7-a576-3c257cedfd45.png?alt=media&token=34e8a540-d30d-44ec-b106-988f502f8415","id":"9b947423-5c1b-42d7-a576-3c257cedfd45","width":797,"height":259,"filename":"Screenshot 2024-02-20 at 6.04.30 PM.png","type":"image/png","caption":"","border":false}]}
```

---

## Conclusion

Working on Seymour® has been a rewarding experience, allowing me to combine skills in illustration, animation, and design to create a product that assists users in learning English through practical interactive content. This process has deepened my understanding of the relationship between technology and human interaction, showcasing numerous possibilities to enhance interpersonal engagement.\
Thx for giving me the chance, and I'm looking forward to the next chapter. ✨✌

## 結論

參與Seymour®的工作是一次豐富的經歷，能夠結合插圖、動畫和設計的技能，創造出一個以實用的互動內容來協助使用者在英文上學習的產品。這個過程還讓我深入了解了科技與人類互動之間的關係，展示了許多增進人與人之間互動的可能性。

謝謝這個機會，期待著下一個章節的到來。✨✌

Design Process and Contributions 設計貢獻

Multimedia Designer, UI/UX

LINE Chatbot 對話機器人設計大賽

This project aims to improve the visual appeal and usability of the content, addressing the need for modernized visual presentation and enhanced user experience optimized for mobile platforms and various usage scenarios.

Client: [Studio Classroom](https://cloud.studioclassroom.com/hotwords/promo-line)

Role: Multimedia Designer

Design Type: UI/UX

Tool: Figma/LINE® BOT Designer

Studio Classroom - WordCloud

During my time at a startup, I spearheaded the experimentation with various styles and actively gathered user feedback to refine our approach. A crucial aspect of the Seymour® video was the character design, which I led by participating in the visual redesign and asset preparation, creating illustrations for stage art and character expressions, as well as designing outfits.

[Read more →](https://read.cv/weitse.tang/designing-process-about-seymour)

Client: [Seymour® 行動英文學習平台](https://seymour.tw/)

Role: Creative Assistance

Design Type: Vector Illustration

Tool: Affinity Designer

Seymour® - Illustration

Seymour® is an e-learning product designed to operate within a LINE® environment, providing a customized English learning experience by offering tailored practices with the help of an AI assistant.

[Read more →](https://read.cv/weitse.tang/designing-process-about-seymour)

Client: [Seymour® 行動英文學習平台](https://seymour.tw/)

Role: Multimedia Designer

Design Type: UI/UX

Tool: Figma/LINE® BOT Designer

Seymour® - UI/UX

Video production result

[Read more →](https://read.cv/weitse.tang/designing-process-about-seymour)

Client: [Seymour® 行動英文學習平台](https://seymour.tw/)

Role: Multimedia Designer

Design Type: Video Editing

Tool: Bledner, DaVinci Resolve

Seymour® - Video

We built a complete "Big Action Library" for Seymour®, focusing on animation production and video editing. The library includes illustrations, animations, and plug-ins for long-term use. We used Blender® software's armature system to create character puppets and animate them.

[Read more →](https://read.cv/weitse.tang/designing-process-about-seymour)

Client: [Seymour® 行動英文學習平台](https://seymour.tw/)

Role: Multimedia Designer

Design Type: Animation

Tool: Blender

WEI-TSE TANG

Projects

Side Projects

Awards

Work Experience

Education

Contact