The Problem
How might we design an app that provides an easier process for professionals to network with other like-minded professionals through face-to-face meetings?
Note, this project was designed pre-COVID-19 in early 2019.
Bottleshake
Background:
Bottleshake is an iOS app that helps connect people over coffee. Search for coffee meetings with nearby professionals or create your own. Accept or pass on the people you want to meet.
As this was an app from a startup of the same name, we had to run lean. The team consisted of myself, quality-assurance tester, our founder, and a development team we worked with off-site to develop the app.
View prototypeDesign Role:
- Concept sketches
- Wireframes
- UX/UI Design
- Prototyping
Results:
- Reached #7 on Product Hunt on launch day
The Solution
We developed a solution that allowed users to post their desired meetings (or shakes as we liked to call them) and have them visible for others to join.
Invites to these shakes could be shared through various social media channels. This allowed for an easy way for users to connect with other professionals.
Discover
Understanding The Problem
To begin my research, I needed to know more about the problem I was trying to solve. I started gathering information on what pain points users currently have with networking.
- How do people currently network and build meaningful connections?
- What factors are important to people when networking?
- How do people find relevant connections to their profession?
Interview Takeaways
- Difficult to turn online connections from social networks into offline relationships
- Takes a lot of time to find other relevant professionals willing to chat
- People find offline relationships more valuable for networking
Define
Documentation
We used JIRA to help document tasks we needed for our weekly sprints. This helped us stay on track and establish business objectives & KPIs. I created the documentation for every story we started–explaining the background, requirements, reason why we're doing this, user research, and mockups.
Sketches
Here are some of the sketches I made during my research and low-fi design phase. I explored many different ways we could meet our goals; different layouts to display meetings, onboarding, map functionality.
The founder and I met continuously to refine the designs. Sketches were narrowed down and revised based on our conversations.
View sketches
Wireframes
We found that users were confused about whether the app initially was for meeting with friends, going out on dates, or for professional networking. The team tried different variations to show which shakes were for friends, dating, or networking. After concern from our users, we decided to forego the friends and dating part of the app.
Once we showed users the new iterations, they immediately knew that the app was for networking with other professionals. Ultimately, I believe modeling the app for solely professional networking was the best direction for the app to head towards.
View wireframes
Develop
High-Fidelity Mockups
As we headed into high-fidelity, our users were confused about two critical areas; the tab bar and the purpose of specific shakes. The tab bar, as presented in the earlier wireframes, presented accessibility problems. We added labels to each and added a dot at the bottom of the selected states helps provide contrast between what is selected and what is not.
As users created their own shakes, we learned that the titles being created were not descriptive enough to let others know exactly what the shake was about. We added a purpose field to help provide more context for each shake.
View mockups
Deliver
The Hand Off
At this point, we shared all of our documentation with our development team. We sized up different tasks and created stories to help us build our MVP.
I created prototypes to help keep our developers informed and help drive discussion. This included multiple discussions via JIRA and virtual meetings with the team.
View prototypeVideo demos I created to help alongside my hand-off to developers
The Conclusion
We finished our MVP and launched on the app store. We decided to launch the app on Product Hunt as well. The app received 273 upvotes and was the top 7 hunted product for the day.
This was such a great learning experience for me. I learned so much about designing for iOS and read so much of the Apple Human Interface Guidelines during this project.
If I had more time to work on this, I would perform more usability tests to find any additional problem areas on the app. For example, one area I believe could be worked on is the onboarding. This was an area I believe we did not put enough thought into so I would like to find ways to improve on that. Also, because of the times and to practice greater social distancing I would look into video chat features.
Screenshot of Bottleshake on Product Hunt