From 0 to 1 side project : A group sport’s app for everyone


As a lazy basketball fan,I’ve been tried to find some girls like me who wish to have a nice ball game after work near my area instead of attending the ball club miles away.But it just didn’t go really well then.I was wondering if anyone have came across the same problem. Not surprised,there’re quite a few people who ask the exactly same question like me on current social media platform.

An Idea suddenly came to me”Why not making an app that can gather people together to have an wonderful sport experience…”

After having some conversations with friends to make sure there’s really a need to solve,I started the jounery right away.


I would like to refer the Double Diamond design method since I consider it an accurate perform of the design process which starts from divergent to convergent. I put the things that I planned to implement into four sessions.

Contextual Interview

Find out the social behavior and the culture of the people who love group sports

According to my experience, I do know there’re several ways how people play sports with others. One kind of people they already have their own regular sport’s group, and the others, they tend to meet their sport’s mate more randomly. So I decided to focus on those two kinds of people on interview.

I invited 4 people from those two kinds of users, each 2 of them to conduct the interview through the Skype. Most of the question are open-type questions such as:

  • What difficulty did you run into when you’re finding your sport’s mate?-
  • How do you think about it when you’re in this situations?

Also,I set some different questions to each kind of users, try to find out some phenomenon and what the problem they’ve been facing now


Arrange the feedbacks from the record of interview


Persona A-Sarah
Persona B-Tim
Persona C-Jessie

User story map v.s Brainstorm

User story mapping may help me clearly see the main structure before design

In the previous process, we concluded most of the crucial needs of each kind of users. I start to create some user stories refer to persona so that I can complete the whole story map. The story map’s written process are as following:

  • Most of the user needs are a larger scope of demand, I tried to meet their demand by several brainstorming process. After breaking the stories into smaller stories, it’s really clear to see its detailing and specific.
Breaking the large stories
  • A few needs are more like a tiny function which were specifically raised by users already, this kind of needs are tiny enough for user stories, and the most important part is to create a certain task for those tiny stories and put them upon to higher level on the map. Once if the task is build, I can create more tiny stories which is relevant to this task. This process helps the story map more completely.
Categorized the smalls stories to task

During the process above, I can placed the task and stories on the board by orders, a roughly product structrue gradually show off.

Besides, not all the detailed function are consider well in this section, the above are only presenting the partial process of thinking. The story map would have its iteration by the following process such like rough sketches and user testing.

Sketches v.s Brainstorm

Drawing numerous of sketches to find out all the possibilities of design

wireframe process

1 on 1 testing

After the Lofi-wireframe were made, I use Invision to make a very first prototype. I set a couple of tasks and list down the objective of those tasks which more helps me focus on the user’s behavior.

Prototype by Invision app
Tasks for users to acccomplish

Design iteration

Through the testing, at some point, I’m really surprise of what the user thinking and doing are entirely different from us,so that’s why we need countless design iteration to meet user’s needs.

I will show one of the most interesting iteration(also the substantial changes)as follow:

About creating a group

Most of the users will meet their sport’s mate on these app by joining sport’s activities,and the group will be organized soon after if they matches each other.I want to create a special and quick way for organizing the groups. There’re two ways as follow:

In the 1st iteration of the group creating part,I separate “create groups from activities” and “create a new group” as two different entrance. Since“create groups from activities” will be a commonly used function,while “create a new group”will be secondary function , so I though it will be a highlight for listing down “create groups from activities” in different color ,and the secondary function’s entrance will be showed as a icon.However, I didn’t even notice the icon has been actually placed on the high-hierarchy navigation bar which may cause a series of misunderstanding.

The results was clearly reflect on users,no matter how to create a group,they will only notice the icon on navigation bar, and totally ignored the feature that I want to highlight(One user even thought that the highlight part is the expanding action of my group card above)

About how to land in group page

In the 1st iteration,users need to choose a group card to enter a group’s main page.After testing ,this couldn’t be a thoughtful design,the reasons are as follow:

  • Switching group wouldn’t be a thing that always bound to happen when using.
  • Most of the users will have a primary and secondary sport’s group in a meanwhile,what they want is just switching the group manual when they need.

1st create group from activity

At 1nd iteration,the “create groups from activities” didn’t provoke users to click,and the list of the activities confused them either,furthermore,the action sheet seems not formally for creating groups.

1st create new group(the detail of setting group will be shown following)
1st workflow of group part


Once I completed a prototype,I uploaded to invision and asked friend for testing.After a couple rounds , I finally came up with a better way to create better experience of the group part,the solutions are as follows:

  • They can see the group home page right away they enter the group section
  • Placing switching groups and creating groups function on a “collapse area” which will be showed after just click an arrow beside the group name
  • Combining the “create groups from activities” and “create a new group” part as one thing which makes the process more reasonable.
  • Create a more smoothly experience on “create groups from activities”feature.
2nd create group from activity
2nd create new group
2nd workflow of group part

Thanks for watching :)

Like what you read? Give Pei Lee a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.