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.
此篇文章會顯示動態置底廣告
為什麼會看到廣告
留言0
查看全部
你可能也想看
1.加權指數與櫃買指數
週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
重點摘要：
1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息
2.SEP 上修失業率預期，但快速的降息速率將有助失業率觸頂
3.未來幾個月經濟數據將繼續轉弱，經濟復甦的時點或是 1Q25 季底附近
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
在當今多元化的商業環境中，產品和服務的收益流對用戶體驗有著深遠影響。本文探討了不同收益模式（如廣告、訂閱、租賃等）如何影響用戶的行動成本與付出代價，並指出UX設計師在設計過程中需要如何平衡收益與用戶體驗，以提高用戶滿意度和維持穩定收益。透過這些策略，UX設計師能確保產品在不斷升級的市場中取得成功。
UX研究員在進行質性研究時遇到的三大挑戰，包括研究時間長、受訪者代表性不足和研究效果難以衡量。針對這些挑戰，本文提供實用的解決方案，如限縮研究範疇、逐步交付研究、明確受訪者標準、結合量化研究及使用業務指標來評估效果等，幫助團隊更有效地執行質性研究，以滿足需求。這篇文章適合想深入質性研究的UX研究員。
The Metaverse and Extended Reality (XR) are rapidly emerging as the next frontier in digital interaction, blending the physical and virtual worlds...
本文討論UX設計師面試中的常見問題，並提供有效的回答建議。這些問題涉及個人介紹、職位申請動機、貢獻、擅長項目、薪酬期望、職業發展計劃等。
歡迎來到 UX（用戶體驗）設計顧問的世界！每一天，我們像是探險家般，深入用戶的心智地圖，解開產品與服務中的謎題。想知道如何讓一天的工作既有成就感又富有創意嗎？讓我帶你一探究竟！
在設計的世界裡，字體遠遠不止是文字的表達，它們是情感的傳遞者，是風格的塑造者。選擇正確的字體對於達成溝通目的至關重要。一個不恰當的字體選擇可能會讓你的設計失去本應有的魅力。為此，我們在這裡推薦一系列與不同情緒相匹配的字體，讓你的設計作品更加精準地傳達出想要的感覺。
「遊戲化設計(Gamification)」在教育領域是時常被提起的名詞，尤其在108課綱推行後，許多教育機構設計模擬情境遊戲來進行課程，以達到素養教育的目的，讓「遊戲化教學」受到許多兒教講師、從業人員的注目。同樣身為教育工作者，我也不禁思考是否可以將遊戲化設計廣泛應用於終身學習課程領域中...
1.加權指數與櫃買指數
週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
重點摘要：
1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息
2.SEP 上修失業率預期，但快速的降息速率將有助失業率觸頂
3.未來幾個月經濟數據將繼續轉弱，經濟復甦的時點或是 1Q25 季底附近
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
在當今多元化的商業環境中，產品和服務的收益流對用戶體驗有著深遠影響。本文探討了不同收益模式（如廣告、訂閱、租賃等）如何影響用戶的行動成本與付出代價，並指出UX設計師在設計過程中需要如何平衡收益與用戶體驗，以提高用戶滿意度和維持穩定收益。透過這些策略，UX設計師能確保產品在不斷升級的市場中取得成功。
UX研究員在進行質性研究時遇到的三大挑戰，包括研究時間長、受訪者代表性不足和研究效果難以衡量。針對這些挑戰，本文提供實用的解決方案，如限縮研究範疇、逐步交付研究、明確受訪者標準、結合量化研究及使用業務指標來評估效果等，幫助團隊更有效地執行質性研究，以滿足需求。這篇文章適合想深入質性研究的UX研究員。
The Metaverse and Extended Reality (XR) are rapidly emerging as the next frontier in digital interaction, blending the physical and virtual worlds...
本文討論UX設計師面試中的常見問題，並提供有效的回答建議。這些問題涉及個人介紹、職位申請動機、貢獻、擅長項目、薪酬期望、職業發展計劃等。
歡迎來到 UX（用戶體驗）設計顧問的世界！每一天，我們像是探險家般，深入用戶的心智地圖，解開產品與服務中的謎題。想知道如何讓一天的工作既有成就感又富有創意嗎？讓我帶你一探究竟！
在設計的世界裡，字體遠遠不止是文字的表達，它們是情感的傳遞者，是風格的塑造者。選擇正確的字體對於達成溝通目的至關重要。一個不恰當的字體選擇可能會讓你的設計失去本應有的魅力。為此，我們在這裡推薦一系列與不同情緒相匹配的字體，讓你的設計作品更加精準地傳達出想要的感覺。
「遊戲化設計(Gamification)」在教育領域是時常被提起的名詞，尤其在108課綱推行後，許多教育機構設計模擬情境遊戲來進行課程，以達到素養教育的目的，讓「遊戲化教學」受到許多兒教講師、從業人員的注目。同樣身為教育工作者，我也不禁思考是否可以將遊戲化設計廣泛應用於終身學習課程領域中...