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 doing some Social Good?
This article is my 3rd and final project for Coursera’s Google UX Design Specification. I’m using Figma again. I love its handy features, which are perfect for designing a simple user flow in a short period. 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 purposes 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 a vital role in eliminating poverty and social imbalance. Here education refers to a broader definition beyond the academic system. It can be any organization or agency that offers knowledge, skill, or even artistic cultivation. This article will share a skill exchange app designed for an 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 in the power of education. Apart from traditional classroom learning, it assumes that the best education should combine 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 specific domain knowledge but didn’t have the resource to do so in the past.
Features appealing to early adopters may include a powerful search engine that could match users with mutual interest, a seamless booking system, and an easy tracker for learning progress.
User Pain Points — Persona of Ioan & Jodie
Below personas reflect the app’s early target user segment: young adults between ages 18 and 30.
Ideation & Close-up Storyboard
Currently, there’re very few apps in the market that offer different skill exchange services on the same platform, so I came up with some quick ideas regarding other language exchange apps such as HelloTalk and Tandem and a 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 a gamification mindset.
Starting the Design with Figma
Digital Wireframes
After the ideation phase, it’s time to create digital wireframes. I designed an initial user flow for making exchange appointments with a partner on the SkillEX app.
Low-fidelity Prototype
SkillEX’s low-fidelity prototype connected the user flow of skill exchange appointments. It starts from skill browsing and partner selection to the final appointment page, where users can communicate via video, audio, or texts. There is also a progress tracking function embedded in users’ profile pages.
The prototype will be used in a later unmoderated usability study to monitor user operation when no support is on the scene.
Usability Study with Findings
During the usability study, I found that users demand a more customized interface when making exchange requests, which aligns with my initial research hypothesis.
Refine the Design
Call out for color master. Let’s do some painting.
Mockups
Based on feedback from the usability study, I updated overall mockups. Here’s to sharing two featured pages.
- Partner Profile
The partner profile page is designed so that users can review partners’ profiles and make the booking simultaneously.
As some users expressed concerns over appointment time and partner credentials, I used the 3-dot carousel icon to add a section where users can self-input relevant skill certifications and another area to include different time selection options.
- Account Creation
The design concept for the account creation page is to encourage new users to set up their skill preferences 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 the previous low-fidelity prototype. Overall animation and visual design were updated per feedbacks from more usability studies.
As for accessibility, SkillEX’s design focuses 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 the 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 screens.
Takeaway and Next Steps
My design concept for SkillEX is to give users a chance to learn new skills from people worldwide. 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.
I realized how difficult it is to incorporate different skill genres into one platform during the ideation phase. Also, was it challenging to design with a gamification mindset. Even so, I believe it’s an essential 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 be thrilled if someone were willing to launch a similar service soon. 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
If you like this case study or my learning journey so far, don’t be shy to give me a shout-out below or simply drop me an email if any questions.
Before you leave, don’t forget to subscribe to my newsletter so that you won’t miss all the fun. You can find my other learning articles here.
Last but not least, if you find this article useful, you can support me by clicking the icon below so that I can continue to create high-quality content on this website without ads.
