Fillip
Roles: UX, UI, Prototyping
Type: Case Study
Team: Kimberly Chan, Hana Mareck, Rex Shi
Year: 2016
Overview
Fillip is smart and straightforward. It recommends activities to do at any given moment. With Fillip's help, it narrows down suggestions and learns from the users' every choice to come up with similar suggestions in subsequent uses. In other words, the more you use it, the more it will know what type of activities you’re interested in doing.
Role
Throughout the project, I conducted user research and user testing which was used to design the UI so I can prototype it for further testing. I also performed quality checks and provided feedback to ensure that we established a high level of polish and effective communication.
Product Video
Inspiration
Inspired by anticipatory design, my team and I wanted to eliminate the difficulty users have when trying to figure out what activities to do during their free time. A lot of websites and applications present their users with lists of suggestions—but that never ends well. By removing this friction, we saw the opportunity to create a more accessible and better experience for users.
Understanding the user
With a good idea of the opportunity at hand, I worked on personas to identify our user’s goals, needs, and expectations. This helped the team in coming up with five product principles that we kept in mind throughout the design:
Anticipatory: anticipating precisely what users will want based on their history.
Efficiency: maximizing users’ productivity when searching for activities to do during their free time.
Delightful and Playful: matching the spontaneous and lively personalities of our users, Fillip interacts with the user through a similar personality by using a voice and tone guide.
Autonomy: providing users with the resources to rapidly make decisions.
Low Resistance: providing a sufficient amount of information for users to make quick decisions.
Customer Journey Framework
After researching our users, my team and I created a journey map that would help us envision the various touchpoints that a user would experience. At the same time, this identified pain points which opened up opportunities for us to improve the user’s experience when searching for activities.
Style Guide
Since it's a brand-new application, we created a style guide that would represent the product’s principle through a color scheme, typographic hierarchy, visual components, and tone of voice. This became our reference point when designing the UI to create a unified experience and visual style.
Wireframes
By mocking up grayscale wireframes, it allowed my team to conduct initial evaluations of the interface design. This gave us a high-level understanding of the structure of the application and allowed us to determine how a user would navigate. My team and I also used these wireframes to conduct a heuristic evaluation, which pointed out problems to the excess of information and a lack of minimalist design.
User testing
Converting the first iterations of wireframes into high fidelity prototypes, my team and I were able to use it to conduct several rounds of usability tests which helped us further the refinement and solve any usability problems. We also utilized the think-aloud protocol and user interviews for user testing to help establish the problem areas. This provided us with useful insights such as color usage being repetitive, button hierarchy needed to be improved, users achievements was unnecessary and confusing (which we removed). The mockups we used for testing can be seen below:
Design
Below are high-fidelity mockups of the final interface iteration, to help in illustrating the user's journey.
Home Screen
Once the application opens, the user is greeted with a unique filter in the form of a sentence which helps anticipate the type of activities they want to do at the moment.
Onboarding
To assist first time users, we applied a playful tone to the onboarding which helps reassure the users when interacting with the application.
Choosing activities
Users are given a simple interface that shows enough information to make a quick decision. The more a user uses the application, the more it learns what the user likes to do through machine learning.
Activity details
Users can dive in deeper for specific information, and descriptions written with casual language to help users decide on an activity.
Save for later
Users can revisit interesting activity ideas as a reference point. By categorizing activities with different colors, users are able to easily navigate through the subtle differentiation as well.
Confirmation
With a decided activity in place, users are prompt with a confirmation before committing. Users are also able to send out invitations to friends to encourage spontaneity.
Profile
A simple profile page allows users to connect with their friends, and review the catalog of all the fun activities they've done in the past.
Multiple users
To have an enjoyable and interactive experience when deciding with friends, users are able to collaborate with each other to make the final decision.
Retrospective
Sometimes making decisions by yourself is hard, so Fillip helps users connect with friends to make decisions together. During this project, the team and I struggled with the various ideas and features that we wanted to implement and trying to fit everything into the application was an even greater struggle. We decided to take into consideration every edge case, such as making it more fun for the user by designing it like a game, but we noticed that it was unnecessary. With more time, I believe the interaction design and user experience could become more polished.