Designing an MVP
As ZipRealty's first TV application, this app connects Zip with users through a new channel. Offering an engaging search and TV experience for home buyers and sellers the app features Zip's home inventory and video content.
Leveraging the TV's large screen size, the MVP app creates an immersive user experience with fullscreen photos and Zip's core search feature. Currently in development, the second phase of this MVP will incorporate brand video content. Content will center around home buying and selling experiences like DIY tips, Realestate 101, and other videos of interest.
How do you create a TV experience?
Starting from a high level we took a stop back to uncover what makes a good TV experience. What did the platform offer, what did the business need, and what did our users need?
User & product goals
Critical to any product (and not mutually exclusive from each other), we crafted MVP user and product goals based on data from our other products, business needs, and user research.
Broken up into 2 phases the initial phase of the MVP focuses on building out our core search feature. The first phase of the MVP is purposefully bare boned and focuses on a minimum amount of features. With this focus we were able to concentrate development, design, and management efforts to release a viable product. After its initial release we intend to role out with Phase 2 and incorporate user feedback.
User goals
Phase 1:
1. Being able to search seamlessly through a brand's home inventory.
Phase 2 & 3:
2. Contacting an agent to view a home
3. View brand video content to learn about home buying and selling
Product goals
Phase 1:
1. Engage consumers by leveraging the unique TV platform.
2. Showcase current home inventory.
Phase 2 & 3:
3. Provide platform for brand video content.
4. Account syncing
The user audience
Drawing from secondary research we develop a few simple personas that we thought were relevant to this TV product. Broken up into "First-time buyers", "Repeat buyers", and "Home sellers", we used this personas to guide the development of product and user goals into behavioral and product plans.
Simplified personas
User behavioral plans
Using the two primary user personas we set about to translate our research and user goals into plan of actions. The behavioral plans are rough maps of the journeys we believe a user will take to successfully create a behavior using our app.
The plan is segmented into four main parts that correlate with minimum viable actions that a user must take to successfully advance to the next stage of action, and the eventual "end" goal. While creating the plan we imagined ourselves as these personas and wrote down actions, thoughts, and expectations that these users might encounter while interacting with the app.
Contacting an agent
Viewing video content
Structuring the app
Armed with user/product goals, behavioral plans, and research we finally felt confident to create a sitemap! Synthesizing all of this into an app structure, we focused on two things:
1. How would the app architecture effect user navigation? How would users find content?
2. How does the app architecture effect development and phasing?
The sitemap
Developed with user navigation in mind, the MVP consists of three top level tabs Search Results, Search, and Brand TV.
User flows and wireframes
Working with the product manager and gathering all of the requirements, I started the design by developing user flows of major tasks in the app. While developing the user flows, I focused on a few things.
1. Who was completing this task? What type of user/persona is this for?
2. What are the intended goals and outcomes?
3. What are the probable paths, decisions, and actions someone might take while trying to complete these tasks?
Translating the user flows into wireframes to communicate the visual interface, I started with low-fidelity wireframes. Doing this enabled me to design and iterate quickly. I focused mostly on placement of UI elements, content, and interaction with the user/other parts of the app.
This level of wireframing was particularly valuable when presenting to other members of the team for internal feedback. By keeping to the broader strokes, we were able to focus on high level issues of the interface before getting caught up in the nitty gritty parts.
Refining the app
Taking those wireframes I continued to develop them to a higher level of fidelity, defining content placement, type, UI elements, and interaction patterns. Working closely with the developer we talked about technical limitations and time constraints to further refine the interface into a working prototype. After some back and forth we finally created a fully functional MVP prototype.
Testing with user flows
Working prototype in hand we set about to do some user testing for feedback. Some of our testing goals were:
1. Finding out if users followed assumed paths and behaviors.
2. Checking existing UX and UI patterns for usability.
3. General problem discovery.
Creating a testing framework, I wrote out the testing procedure and tasks for a moderated usability study. Treating our user flows as visual hypothesis we used them as tools which served as a basis for comparison of assumed behavior vs. actual participant behavior. Participant tasks correlated with tasks outlined by the user flows, and represented the major MVP app tasks.
Recording each test I concentrated on probing, guiding the participant, and asking follow up question during the actual test. Still in the process of analyzing the results, initial feedback has already proved useful in pointing out confusing navigation and UI elements that we thought were obvious.