Mathew Cheung

CV

Mathew Cheung

Introductions

The Problem

Design

Conclusion

Introductions

The Problem

Club owners want to invite and encourage experts to share enriching content directly with dedicated club members. They find Instagram/Facebook to be good for content but lack meaningful engagement, and vice versa for Whatsapp.

The Problem

Club owners want to invite and encourage experts to share enriching content directly with dedicated club members. They find Instagram/Facebook to be good for content but lack meaningful engagement, and vice versa for Whatsapp.

The Problem

Club owners want to invite and encourage experts to share enriching content directly with dedicated club members. They find Instagram/Facebook to be good for content but lack meaningful engagement, and vice versa for Whatsapp.

Streamlining the focus

I will be focusing on how we workshopped different ideas to arrive at the final scope of the project. In terms of UI, I will mainly go over the thinking behind a template-first approach to make creating runner-centric content as easily as possible.

Streamlining the focus

I will be focusing on how we workshopped different ideas to arrive at the final scope of the project. In terms of UI, I will mainly go over the thinking behind a template-first approach to make creating runner-centric content as easily as possible.

Streamlining the focus

I will be focusing on how we workshopped different ideas to arrive at the final scope of the project. In terms of UI, I will mainly go over the thinking behind a template-first approach to make creating runner-centric content as easily as possible.

The Design Stage

The Design Stage

The Design Stage

Ideation

This project allowed to be more involved with the client and have a genuine collaborative process. We kickstarted the process with the following prompt from the client: How can we create a space that drives conversation?

Ideation

This project allowed to be more involved with the client and have a genuine collaborative process. We kickstarted the process with the following prompt from the client: How can we create a space that drives conversation?

The Design Stage

This project allowed to be more involved with the client and have a genuine collaborative process. We kickstarted the process with the following prompt from the client: How can we create a space that drives conversation?

Getting inspiration

Getting inspiration

Any Distance

This platform basically turns any user profile into it's own "running club". You can add friends where everyone can choose to post their daily runs, showcase their stats and progress or take part in events together. This is an example of complete autonomy to any user to run their own club without administration from a 3rd-party.

Strava

Discord

Any Distance

This platform basically turns any user profile into it's own "running club". You can add friends where everyone can choose to post their daily runs, showcase their stats and progress or take part in events together. This is an example of complete autonomy to any user to run their own club without administration from a 3rd-party.

Strava

Discord

Any Distance

This platform basically turns any user profile into it's own "running club". You can add friends where everyone can choose to post their daily runs, showcase their stats and progress or take part in events together. This is an example of complete autonomy to any user to run their own club without administration from a 3rd-party.

Strava

Discord

Explorations

Explorations

Idea #1: A "Discord-style" experience

We took "Conversation" quite literally and imagined a "Discord-style" interface used for clubs to host events and make announcements. Members can create their own channels based on niche topics to allow flexibility and member involvement.

Idea #1: A "Discord-style" experience

We took "Conversation" quite literally and imagined a "Discord-style" interface used for clubs to host events and make announcements. Members can create their own channels based on niche topics to allow flexibility and member involvement.

Idea #1: A "Discord-style" experience

We took "Conversation" quite literally and imagined a "Discord-style" interface used for clubs to host events and make announcements. Members can create their own channels based on niche topics to allow flexibility and member involvement.

Idea #2: Conversations driven by content and topics

We re-interpreted the prompt and thought about conversations in the form of comments and user engagement. This led to a forum-style experience where conversations are driven by content posted by the club admins, running experts and other members.

Idea #2: Conversations driven by content and topics

We re-interpreted the prompt and thought about conversations in the form of comments and user engagement. This led to a forum-style experience where conversations are driven by content posted by the club admins, running experts and other members.

Idea #2: Conversations driven by content and topics

We re-interpreted the prompt and thought about conversations in the form of comments and user engagement. This led to a forum-style experience where conversations are driven by content posted by the club admins, running experts and other members.

Getting our idea assessed and signed off

After further discussions, we proceeded with Idea #2. We created a rough architecture of how we envisoned the app and what features are included, to give the client a complete picture. This was important to outline what features and designs will be promised as deliverables, as well as to allow the developers to assess feasability and establish their timeline.

Getting our idea assessed and signed off

After further discussions, we proceeded with Idea #2. We created a rough architecture of how we envisoned the app and what features are included, to give the client a complete picture. This was important to outline what features and designs will be promised as deliverables, as well as to allow the developers to assess feasability and establish their timeline.

Getting our idea assessed and signed off

After further discussions, we proceeded with Idea #2. We created a rough architecture of how we envisoned the app and what features are included, to give the client a complete picture. This was important to outline what features and designs will be promised as deliverables, as well as to allow the developers to assess feasability and establish their timeline.

(Have a scroll through our figjam board)

(Have a scroll through our figjam board)

Creating content that is intentional and meaningful

We wanted to make the process of creating intentional and meaningful content for runners as easy as possible. We experimented with a template-first approach, nudging users to create content with optimised templates for specific use-cases. After referencing content from sources such as Youtube and Instagram, looking through comments for FAQs to gauge content interest, we decided to focus and design templates optimised for the following content types:

Creating content that is intentional and meaningful

We wanted to make the process of creating intentional and meaningful content for runners as easy as possible. We experimented with a template-first approach, nudging users to create content with optimised templates for specific use-cases. After referencing content from sources such as Youtube and Instagram, looking through comments for FAQs to gauge content interest, we decided to focus and design templates optimised for the following content types:

Creating content that is intentional and meaningful

We wanted to make the process of creating intentional and meaningful content for runners as easy as possible. We experimented with a template-first approach, nudging users to create content with optimised templates for specific use-cases. After referencing content from sources such as Youtube and Instagram, looking through comments for FAQs to gauge content interest, we decided to focus and design templates optimised for the following content types:

1

Coaching

1

Coaching

2

Coaching

2

Product Reviews

2

Product Reviews

1

Product Reviews

3

Q&As

3

Q&As

3

Q&As

4

Route Reviews

4

Route Reviews

4

Route Reviews

Mapping out our User’s Journey

Mapping out our User’s Journey

I've illustrated one of the potential template journeys for creating a post. Here is how we envisioned our users to create a post for a product review.

I've illustrated one of the potential template journeys for creating a post. Here is how we envisioned our users to create a post for a product review.

I've illustrated one of the potential template journeys for creating a post. Here is how we envisioned our users to create a post for a product review.

(Scroll to the right to uncover more)

(Scroll to the left to
uncover more)

1. Clicks “+” icon on the landing page

2. From the template selection step, select “Gear talk”

3. Fills in basic details such as the title and text description of the post. Clicks “Continue”

4. After clicking continue, users can add photos of the product being reviewed

5. Assign ratings out of 5 and assign tags based on what the gears are suitable for

6. Review the entire post and click "Submit"

1. Clicks “+” icon on the landing page

2. From the template selection step, select “Gear talk”

3. Fills in basic details such as the title and text description of the post. Clicks “Continue”

4. After clicking continue, users can add photos of the product being reviewed

5. Assign ratings out of 5 and assign tags based on what the gears are suitable for

6. Review the entire post and click "Submit"

Conclusion

This was my first project that involved taking something from the conceptual stage, to a full design deliverable. Therefore, there were bound to be challenges unique to this project compared to my other experiences.

Conclusion

This was my first project that involved taking something from the conceptual stage, to a full design deliverable. Therefore, there were bound to be challenges unique to this project compared to my other experiences.

Conclusion

This was my first project that involved taking something from the conceptual stage, to a full design deliverable. Therefore, there were bound to be challenges unique to this project compared to my other experiences.

Challenge: Anchoring our concepts and getting client sign-off

I got a chance to work with a client, who has a strong vision about solving concurrent issues he's facing when trying to get a community together. In another way to put it is, he's a visionary. One of the challenges I faced was to anchor on specific problems to solve on day one. Is it to optimise content creation? Are we making event hosting more frictionless? These were all ideas that we workshopped together with the client, along the way new ideas would form such as "How can we involve AI in this process?". To address this, we needed a way to map out all the features and visualise for the client, in order to get an agreement and understanding on what will be delivered. In the end we created the Figjam I included earlier on in this case-study, it provided a big picture of the scale of the project and the building blocks to actualise the client's vision.

Challenge: Anchoring our concepts and getting client sign-off

I got a chance to work with a client, who has a strong vision about solving concurrent issues he's facing when trying to get a community together. In another way to put it is, he's a visionary. One of the challenges I faced was to anchor on specific problems to solve on day one. Is it to optimise content creation? Are we making event hosting more frictionless? These were all ideas that we workshopped together with the client, along the way new ideas would form such as "How can we involve AI in this process?". To address this, we needed a way to map out all the features and visualise for the client, in order to get an agreement and understanding on what will be delivered. In the end we created the Figjam I included earlier on in this case-study, it provided a big picture of the scale of the project and the building blocks to actualise the client's vision.

Challenge: Anchoring our concepts and getting client sign-off

I got a chance to work with a client, who has a strong vision about solving concurrent issues he's facing when trying to get a community together. In another way to put it is, he's a visionary. One of the challenges I faced was to anchor on specific problems to solve on day one. Is it to optimise content creation? Are we making event hosting more frictionless? These were all ideas that we workshopped together with the client, along the way new ideas would form such as "How can we involve AI in this process?". To address this, we needed a way to map out all the features and visualise for the client, in order to get an agreement and understanding on what will be delivered. In the end we created the Figjam I included earlier on in this case-study, it provided a big picture of the scale of the project and the building blocks to actualise the client's vision.