Zoey Yan

SkillSpace

Improve user engagement and establish a networking hub for members by conceptualizing and designing a new online community feature

Improve user engagement and establish a networking hub for members by conceptualizing and designing a new online community feature

Role

Role

Lead User Experience Designer, UX Researcher, branding

Lead User Experience Designer, UX Researcher, branding

Time

Time

July - August 2023

6 weeks

July - August 2023

6 weeks

Tools

Tools

Miro / Figma

Miro / Figma

🚩Goal

Redesign the Skillspace website to improve user engagement and establish a networking hub for our members.

Redesign the Skillspace website to improve user engagement and establish a networking hub for our members.

Redesign the Skillspace website to improve user engagement and establish a networking hub for our members.

🫂 Peer to Peer & Peer to Mentor

🫂 Peer to Peer & Peer to Mentor

Integrate collaboration tools like Miro and Figma, and community that allows connection with peers and mentors.

Integrate collaboration tools like Miro and Figma, and community that allows connection with peers and mentors.

Integrate collaboration tools like Miro and Figma, and community that allows connection with peers and mentors.

🍎 Unique Branding

🍎 Unique Branding

Incorporate Skillspace’ engaging, fun, and educational values into the core of our design.

Incorporate Skillspace’ engaging, fun, and educational values into the core of our design.

Incorporate Skillspace’ engaging, fun, and educational values into the core of our design.

🌐 Built on the Intranet

🌐 Built on the Intranet

Built on existing components or proposing custom components.

Built on existing components or proposing custom components.

Built on existing components or proposing custom components.

💻 User Experience

💻 User Experience

Create an easy and intuitive UI with cohesive branding.

Create an easy and intuitive UI with cohesive branding.

Create an easy and intuitive UI with cohesive branding.

BRAINCRASH


BRAINCRASH


Pain Point

Pain Point

🔻 Low Engagement Rate

🔻 Low Engagement Rate

🚫 Limited Interaction and

Collaboration Tools

🚫 Limited Interaction and Collaboration Tools

Issue / Challenges

Issue / Challenges

We started with figjam short session on identifying possible challenges.

We started with figjam short session on identifying possible challenges.

We hope this website can address users:

We hope this website can address users:

Feel disconnected from each other

Feel disconnected from each other

Lack of access to manage or document projects

Lack of access to manage or document projects

Lack of motivation when studying alone

Lack of motivation when studying alone

HMW: Reframe Challenges into Opportunities

HMW: Reframe Challenges into Opportunities

allow interaction to happen while learning

allow interaction to happen while learning

allow interaction to happen while learning

include positive incentives to motivate users

include positive incentives to motivate users

include positive incentives to motivate users

make the learners feel connected with each other

make the learners feel connected with each other

make the learners feel connected with each other

provide access for learners to manage or document user projects

provide access for learners to manage or document user projects

provide access for learners to manage or document user projects

IDEATION


IDEATION


MoodBoard

MoodBoard

To kick off visual designing, we gathered inspirations from other educational community platforms.

To kick off visual designing, we gathered inspirations from other educational community platforms.

We hope this website can be described as

We hope this website can be described as

🤓 Engaging

🤓 Engaging

👀 Diverse

👀 Diverse

🤩 Rewarding

🤩 Rewarding

IDEATION


Map of Features

To identify key features to include in our prototype, we compiled a list of features and mapped them according to difficulty of development and level of impact, along with chatGPT’s response

REDESIGN


Dashboard

REDESIGN


Dashboard

Before

Before

Explore Page

Before

Before

Instructor Page

Before

After

Able to book session with mentor for guidance, and follow instructor profile to know more on their learning and updates

FINAL DESIGN


New Features

Community Tab

Use community post forum to get the newest updates on peers

Community ranking to see your friends’ progress

Encourage user to use the product more frequent

Giving idea on what they can participate, and break tasks into mini tasks

Fun and engaging!

Workshop Tab

Attend live ongoing workshops hosted by mentors

Replacing user images with avatars - no privacy concern & fun

List of future, registered, and saved workshops for quick navigation

Live sessions powered by well-known products (e.g. Figma, Miro)

Interactive design editor platform for educators and learners

Whiteboard platform for engagement

Competition Tab

Live sessions to promote healthy competition between users and learn from each other

Powered by well-known products (e.g. Figma, Miro, etc)

Live chat feature to provide real-time encouragements and discussions

Home Page

Live chat feature to provide real-time encouragements and discussions

ANALYSIS


Development Timeline

In order to understand the real-world feasibility of our features, we hopped on a call with a seasoned developer to discuss and access the difficulty of launching each features. We summarized or findings into a development timeline.

In order to understand the real-world feasibility of our features, we hopped on a call with a seasoned developer to discuss and access the difficulty of launching each features. We summarized or findings into a development timeline.

Development Cost

After talking to the developer, we decided that we can prioritize features with high impact and low duration to implement, which narrows down to the ranking and badge features.

After talking to the developer, we decided that we can prioritize features with high impact and low duration to implement, which narrows down to the ranking and badge features.

Ranking

© 2024 Zoey Yan ft Figma & Framer

Instagram

© 2024 Zoey Yan ft Figma & Framer

Instagram

REFLECTION


Takeaways

Embrace the chaos and believe in the power of collaboration: Leveraging each member’s fresh viewpoint and together contributing to the innovative design process.

Embrace the chaos and believe in the power of collaboration: Leveraging each member’s fresh viewpoint and together contributing to the innovative design process.

Iteration is KEY: It is crucial to be flexible and adaptable, making small steps along the way and ensure quality over quantity.

Iteration is KEY: It is crucial to be flexible and adaptable, making small steps along the way and ensure quality over quantity.

You cannot make everything perfect: Designers should learn how to balance trade-off between features that are nice but time-consuming to develop.

You cannot make everything perfect: Designers should learn how to balance trade-off between features that are nice but time-consuming to develop.

© 2024 Zoey Yan ft Figma & Framer

Instagram

© 2024 Zoey Yan ft Figma & Framer

Instagram

© 2024 Zoey Yan ft Figma & Framer

Instagram

Create a free website with Framer, the website builder loved by startups, designers and agencies.