Making TrapIt’s Mobile Application More Intuitive.
Clarifying interactions to increase feature usage.
Company
TrapIt
Team
Product Managers x 1
iOS Engineer x 1
Android Engineer x 1
Leadership x 1
My Role
Sr. Product Designer
Responsibilities
Prototyping, UI/UX Design, Stakeholder Alignment
Tools
Sketch, Principle, Sketchbooks, and Whiteboards
Platforms
iOS, Android
Year
2016
Project Goal
TrapIt's roadmap included a lot of new features that we had to make room for. We took this opportunity to rethink the interface and architecture of the current app.
Challenges
A small team, a new internal UX practice, and a lack of formalized research.
Results
Doubled the number of article shares.
Increased session length.
My Impact
I involved our iOS and Android engineers early and often, to build trust in me as their new designer, to identify pain points, and to align our strategy.
I designed a more contemporary-looking UI that leveraged OS-level design patterns, made interactions more obvious, and provided pathways for feature growth.
I used analytics to harness current user-behavior in the creation of a new interaction.
Research & Exploration
I had done a quick visual update on the app news feed before, but this was my first substantial project. I quickly started whiteboarding with both the iOS and Android engineers to ask questions about the current application, to identify issues that they had with it, and finally to prioritize features on our roadmap.
We kept fidelity low to experiment with new designs that changed the information architecture of the app to match primary navigation patterns of their respective platforms. Moving iOS to a tab bar would align with platform guidelines and improve feature discovery as we added more functionality to the app. Android also received the benefit of a decoupled sub-navigation that no-longer buried features.
We identified a user behavior in our Flurry analytics, and created a new feature around it. Most users were sharing from the home screen, meaning that they never actually went into the article. This lead to the idea of a 'quick share' action. When a user doesn't need to specify a custom message, they can quickly add an item to their queue for later sharing. The ability to customize the messaging is still available through the traditional sharing method.
Design & Validation
Once broad concepts were agreed upon, I moved from the whiteboard to my sketchbook to work through some more detailed flows. I created a tappable on-device prototype using these sketches to get feedback from the team and gain consensus on an approach.
I built out reusable components in Sketch to maintain consistency and speed up production of the final visual design.
Finally, I built a clickable prototype to aid in hand-off, conveying landing screens and animations.
Learnings
Session time increased and the number of articles shared jumped from 133 to 379 per day.
Perhaps just as important was what I learned about my new team: moving from the bureaucracy of a large organization to an small, agile startup team forced a change in process. A move away from formalized slide decks to consistent communication around low-fidelity artifacts yielded better results and stronger relationships.
