Gamification UX Design for Social Good
更新於 發佈於 閱讀時間約 20 分鐘
SkillEX, a Case Study Exercise from Coursera's Google UX Design Specification
UX design project no 3, what should I do this time? How about “Pay it Forward” and do some Social Good?
This is my 3rd and final project for Coursera’s Google UX Design Specification. I’m using Figma again. I love its handy features, which is perfect to design a simple user flow in a short period of time. Believe it or not, it took me less than a day to complete all the design artifacts.
Let me wind back a bit. The project was an assignment for a series of courses on Coursera, called “Google UX Design Professional Certificate”. It is designed for beginners who have no prior design experience like me. You can also check out my other two UX design portfolios here.
Same as in previous projects, user feedbacks below are hypothetical for demonstration purpose only. Let’s take a look.
Project Overview
Today I'm going to create a platform for the benefit of social good.
I always believe education plays an important role in eliminating poverty and social imbalance. Here education refers to a broader definition beyond academic system. It can be any organization or agency that offers knowledge, skill, or even artistic cultivation. In this article I’ll share a skill exchange app designed for a NGO (Non-Governmental Organization). The demo will be focusing on the user flow of making an exchange appointment.
Understanding The User
User Research — Summary
As a non-profit NGO, SkillEX believes the power of education. Apart from traditional classroom learning, it believes that the best education should be a combination of cultural cultivation, art education, technical readiness, and continuous interest exploration. Creating a platform for free skill exchange can benefit young adults; who may want to learn certain domain knowledge, but didn’t have the resource to do so in the past.
Features that are appealing to early-adopters may include a powerful search engine that could match users with mutual interest, seamless booking system, and easy tracker for learning progress.
User Pain Points — Persona of Ioan & Jodie
Below personas are reflecting the app's early target user segment, which are young adults between age 18 and 30.
Ideation & Close-up Storyboard
Currently there’re very few apps in the market that offer different skill exchange service on the same platform, so I came up with some quick ideas with reference to other language exchange apps such as HelloTalk and Tandem, as well as social app like Meetup.
I have incorporated their general design concepts and chipped in my own proposal to address possible pain points and gaps. My ideations focus on creating a concise platform with gamification mindset.
Starting the Design with Figma
Digital Wireframes
After ideation phrase, it’s time to create digital wireframes. I designed an initial user flow for making exchange appointment with a partner on the SkillEX app.
Low-fidelity Prototype
SkillEX’s low-fidelity prototype connected the user flow of skill exchange appointment. It starts from skill browsing, partner selection, to the final appointment page; where users can choose to communicate via video, audio, or texts. There is also a progress tracking function embedded in users’ profile page.
The prototype will be used in a later unmoderated usability study to monitor user operation when no support on scene.
Usability Study with Findings
During usability study, I found that users demand more customized interface when making exchange requests, which align with my initial hypothesis at research phrase.
Refine the Design
Call out for color master, let’s do some painting.
Mockups
Based on feedbacks from usability study, I updated overall mockups. Here’s to share two featured pages.
- Partner Profile
The partner profile page is designed in a way that users can review partners’ profile and make the booking at the same time.
As some users expressed concerns over appointment time and partner credential, I used the 3-dot carousel icon to add a section where users can self-input relevant skill certifications, and another section to include different time selection options.
- Account Creation
The design concept for account creation page is to encourage new users to set up their skill preference from the very beginning. After usability study, I added more rows for both skills to learn and skills to exchange.
Featured mockups in the sequence of “Welcome Message”, “Account Creation”, “Partner Profile”, and “Appointment Confirmation” from left to right:
High-fidelity Prototype
The final high-fidelity prototype followed the same exchange booking user flow as previous low-fidelity prototype. Overall animation and visual design was updated per feedbacks from more usability studies.
As for accessibility, SkillEX’s design is focusing on creating a gamification style with interactive icons and contrasting colors for visually impaired or amblyopia users.
View the high-fi prototype here:
Responsive Design
The design for SkillEX’s screen size variation includes original app plus separate tablet and desktop versions. You can see the app's 2 steps Account Creation pages were merged into 1 for both Tablet and Desktop screen.
Takeaway and Next Steps
My design concept for SkillEX is to give users a chance to learn new skills from people around the world. I’m hoping that some users will even have the opportunity to explore different career options after taking some time to advance their new skills.
During ideation phrase, I realized how difficult it is to incorporate different skill genres into one platform. Also was it challenging to design with a gamification mindset. Even so, I believe it's an important factor to both retain users and help them achieve their personal goals.
Next Steps
I enjoy every step of this social good project. I would thrilled if someone willing to launch similar service in the near future. That being said, I do have some ideas about how to make the app better:
- First, continue to do market research and usability tests to improve interactive design on different devices
- Second, add more features on user page. It can be either partner comments or rating, users’ own learning feedbacks, medals for achieving certain learning goals, or verification from professional certification organization
- Third, include more incentives. Example are learning progress tracker on users’ own page, and other physical incentives (ie, coupons from partners who sponsor the app’s operation) to reward users' continuous learning and achievement for pre-defined goals
Hope you enjoy my UX design project, until next time.
If you like my article, feel free to give me a clap below or follow my account. If you are a fellow self-learner on UX design, don’t be shy to leave your comments! Find more case studies and business stories here.
What’s more, you can always give me some “Likes” if you are a Liker on Liker Land.
Liker Land is a place where you can register for free to be a “Liker” and support content creators. Without the intervention of mass corporate ads, this blockchain application is a great invention to support individual creators. If you’re already onboard, welcome to show your support via the link below.
留言
留言分享你的想法！
你可能也想看
Google News 追蹤
全新 vocus 挑戰活動「方格人氣王」來啦～四大挑戰任你選，留言 / 愛心 / 瀏覽數大 PK，還有新手專屬挑戰！無論你是 vocus 上活躍創作者或剛加入的新手，都有機會被更多人看見，獲得站上版位曝光＆豐富獎勵！🏆
本文探討AI筆記工具的優缺點、選擇建議及未來趨勢，比較NotebookLM、OneNote+Copilot、Notion AI、Obsidian+GPT插件和Palantir Foundry等工具，並強調安全注意事項及個人需求評估的重要性。
去聽了一堂社會設計的課…順便整理了一下網路上的資料。
觀點決定了對問題的理解… 主流 VS 邊緣(女人、移工、窮人) 看似不重要的小人物們。從哪一個角度出發看事情，會有不一樣的思考。
社會設計是什麼?
社會設計（Social Design）是一種設計理念與實踐方式，旨在透過設計解決社會問
"Your most valuable skill is the thing you can reliably do under pressure that delivers results--and looks like magic to those nearby."
"Novice wan
ch
企劃一個幫助成年大學生
培養SDGs的web3電玩
手機板和電腦版要可以連動
幸福課程 fb
幸福教練黃老師
朝資訊媒體
下面是一個初步的構想，
可以幫助大學生培養可持續發展目標（SDGs）意識的Web3電玩：
名稱：SDGs Quest
簡介：
SDGs
Summer 將自己的數位成長學習系統進行整合與調整，運用 PAI系統 轉為專案形式，加上不同目的的客製化篩選、排序、圖示等資料庫可視化的呈現 ，讓課程、學習都能夠清晰明瞭。另外除了課程外，也融合自己的書籍閱讀、資訊整理搜集等，讓整個頁面更貼近屬於我自己的「數位成長學習」習慣。
1.找到熱情與興趣
用有趣的方式重組構想
我是可以改變的！
改變人生的簡單小事，3的法則。
世界上只有50個人。
好好說自己的故事，學習助人的藝術。
做對的事，而不單是做聰明的事。
找到自己興趣、能力和市場需求的交集
拋開別人的期望，
為自己，做做最想做的事，
找到能夠發
✅ 在【社會設計與設計思考工作坊】課程當中，運科竹深入了解創業的精髓和成功要素，並且透過若干方法，可以更快切入創業的步驟與構想的開發！✅ 在【創業計劃書撰寫工作坊】學到實用的創業計畫書寫作工具和方法，提升創業技能，並且瞭解✅ 此外，還能夠與業界專業人士，及有創業理想的志同道合夥伴互動交流。✅ 業師們
全新 vocus 挑戰活動「方格人氣王」來啦～四大挑戰任你選，留言 / 愛心 / 瀏覽數大 PK，還有新手專屬挑戰！無論你是 vocus 上活躍創作者或剛加入的新手，都有機會被更多人看見，獲得站上版位曝光＆豐富獎勵！🏆
本文探討AI筆記工具的優缺點、選擇建議及未來趨勢，比較NotebookLM、OneNote+Copilot、Notion AI、Obsidian+GPT插件和Palantir Foundry等工具，並強調安全注意事項及個人需求評估的重要性。
去聽了一堂社會設計的課…順便整理了一下網路上的資料。
觀點決定了對問題的理解… 主流 VS 邊緣(女人、移工、窮人) 看似不重要的小人物們。從哪一個角度出發看事情，會有不一樣的思考。
社會設計是什麼?
社會設計（Social Design）是一種設計理念與實踐方式，旨在透過設計解決社會問
"Your most valuable skill is the thing you can reliably do under pressure that delivers results--and looks like magic to those nearby."
"Novice wan
ch
企劃一個幫助成年大學生
培養SDGs的web3電玩
手機板和電腦版要可以連動
幸福課程 fb
幸福教練黃老師
朝資訊媒體
下面是一個初步的構想，
可以幫助大學生培養可持續發展目標（SDGs）意識的Web3電玩：
名稱：SDGs Quest
簡介：
SDGs
Summer 將自己的數位成長學習系統進行整合與調整，運用 PAI系統 轉為專案形式，加上不同目的的客製化篩選、排序、圖示等資料庫可視化的呈現 ，讓課程、學習都能夠清晰明瞭。另外除了課程外，也融合自己的書籍閱讀、資訊整理搜集等，讓整個頁面更貼近屬於我自己的「數位成長學習」習慣。
1.找到熱情與興趣
用有趣的方式重組構想
我是可以改變的！
改變人生的簡單小事，3的法則。
世界上只有50個人。
好好說自己的故事，學習助人的藝術。
做對的事，而不單是做聰明的事。
找到自己興趣、能力和市場需求的交集
拋開別人的期望，
為自己，做做最想做的事，
找到能夠發
✅ 在【社會設計與設計思考工作坊】課程當中，運科竹深入了解創業的精髓和成功要素，並且透過若干方法，可以更快切入創業的步驟與構想的開發！✅ 在【創業計劃書撰寫工作坊】學到實用的創業計畫書寫作工具和方法，提升創業技能，並且瞭解✅ 此外，還能夠與業界專業人士，及有創業理想的志同道合夥伴互動交流。✅ 業師們