In this assignment, I work with three other classmates as a team to design a web platform for a startup from scratch. The start-up chosen by our group is called Moonshot, a platform for angel investing in athletes.

What is the problem?

• Becoming a professional athlete is expensive and risky. Professional tennis players spend more than $100,000 annually. This is a real problem for those with underprivileged backgrounds.

How Moonshot helps?

• To solve this problem, Moonshot brings supporters ("backers") to the rescue.
• For Backers:
  • Backers back their favourite up-and-coming athlete by investing in their career.
  • When athletes make it big, their backers will have secured the ultimate bragging rights, and the backers will make a nice return on their investment in the form of a cut (think ~5-10%) on the athletes' future earnings.
  • Backers can also get special perks such as sitting courtside and joining training.
• For Athletes:
  • Athletes get the money they need to continue their professional career.
  • Athletes can also gain their loyal audience early on!

If you are interested in knowing more about this startup, please check Moonshot's YCombinator page. Here, our design team choose to design a webpage interface because it can be accessed by most devices, which is essential for any product at its early stage to adopt more users.

Each of our design group draws a set of 3 frames for the Moonshot web platform, covering different aspects of its functionalities, including searching, viewing, and pledging for athletes. After comparing and contrasting within our group, we pick a set of elements or pages (tagged in yellow) that will be used for low-fi wireframe in the next section.

Combining the ideas from sketches and designing some new layouts, our group obtain a low-fidelity wireframe.

Based on the low-fi wireframe, we create our initial high-fi prototype for mockup. We receive several critiques for this version. See the image below for the prototype and feedback markups.

To address these feedbacks, we build our second version of high-fi prototype.

A sample interaction workflow is shown below:

Our overarching goal for user testing is to explore how the interface helps investors search, explore, and invest in up-and-coming athletes.

Test setup:

• Overall Task:
  • Search, view, and invest in an athlete using Moonshot platform.
• Scenario:
  • You are an investor named Youssef. You are interested in supporting up-and-coming young athletes in achieving their dreams. Someone recommended you Moonshot as a platform to search for and support young athletes.
• Task 1:
  • You are on the main page of Moonshot's website. First, to learn how the platform works, go check “How It Works” page. After that, go back to the main page.
  • [5-point rating scale: Very difficult to Very easy]
• Task 2:
  • Now you understand how Moonshot works. You want to search for some up-and-coming athletes from your hometown, North Carolina. To search “North Carolina", you can click on the search bar.
  • [5-point rating scale: Very difficult to Very easy]
• Task 3:
  • You are interested in the basketball player John Doe and want to learn more about him. Go to his profile page and read about his profile and recent updates.
  • [5-point rating scale: Very difficult to Very easy]
• Task 4:
  • You are very impressed by John Doe's achievements and dedication to basketball and want to support his career. Pledge $399 for John Doe. After that, go check out your new team.
  • [5-point rating scale: Very difficult to Very easy]
• Task 5:
  • Please talk about your feelings about the workflow (searching-viewing-pledging). Do you like the website? Is there anything that confuses you?
  • [Verbal response]

User Feedbacks:

• We receive video feedback from three subjects:
  • ChronicReader
  • SerenityCloud
  • BoBo2016
• To summarize:
  • Overall, UserTesting results validate our assumption on user behavior and prove the interface's learnability and usability.
  • All three users successfully complete all the tasks with little confusion. They describe the interface as "professional", "kind of neat", and "intuitive". On a scale from 1 (very hard to use) to 5 (very easy to use), all three users rate us 5 on almost all subtasks.
  • The first reported confusing design is on “How It Works” page where we use the Moonshoy logo as the button to go back to the main page. The second confusion happens when a user interacts with the search bar and is surprised by the fact that she could search by states. The last confusing feature is on the profile page where a user is unsure what does "my team" mean.

Potential Improvements:

• Some users might not know they can go back to main page by clicking on the logo. So we can add a back-to-home button on “How it works” page.
• Some users are confused about the meaning of “My team” on their profile page. We could add an info icon on the top right to explain those are the young athletes you have invested in.
• Some users are surprised they could search by location. We could add that hint in the search bar in gray words.

This is my first time making interface design based on others' idea, which is much different from all the previous projects. The design-critique iteration is very helpful for refining the design.