Iterative Design: Winno
Desiging An App That Connects Fans to Influencers, Novice to Experts, Questions to Answers
Project Overview
For this project, our team is tasked to design for a start-up on Y-Combinator from scratch, without referencing the original work. We decided to work on Winno, a mobile app designed to allow users to connect with experts to answer pressing questions with insight into different industries. Through this application, we address 2 key needs. First, users who want to learn want to connect with experts in different fields to answer pressing questions. Second, experts and creators want to own their audience and get paid directly by their top fans. Thus, our goal is to design an app that allows users to discover experts and to schedule text sessions, and experts get paid for helping out and doing what they love.
Team Size
4
Role
UX Research
UX UI Design
Duration
3 Weeks
Time
Fall 2022
Tools Used
Balsamiq.
Figma
Miro
Adobe Photoshop
Sketching & Wireframing
Initial Sketches
Member 1
Member 2
Member 3
Home Screen
Category Screen
Sub-Category Screen
Infulencer Profile Screen
Member 4
Combining Ideas into a Wireframe
After coming up with sketches individually, the team recongregated and discussed different design strategies. Eventually, we combined each member's great ideas and translated them into wireframes.
Home Page
- Contains a search bar for searching using direct keyword input
- Contains My Upcoming Session Cards to make users' booked sessions easy to find
- Contains recommended section that expose users to influencers they might be interested in
- Contains category options for user browsing and exploration
Category Page
- Contains different sub-categories to cater to the users' specific interests
- Contains influencers' profile picture, names, and specialties for user to identify and compare key information
- Contains a "See More" buttons for user to dive deep into their topic of interest
Sub-Category Page
- Contains more experts/influencers under the same subcategory for users to explore
- The experts/influencers are displayed in cards, which showcases their key information
- The cards are envisioned to contain experts/influeners' names, ratings, prices, and brief descriptions
Information Hierarchy/User Flow
In addition to the wireframes, we also came up with a map that guides the user flow and information architecture
Mockups
Version 1: Pre-Critique
Navigation Flow
Home Screen
Category
Sub-Category
Influencer Profile
Booking
Message Flow
Home Screen
Messages
Chat
What We Did
- Implemented a rudimentary design/user flow that encompasses the browsing experts and messing experts feature of the app
Classmates & Industry Expert Critique Feedback
- The size of buttons on the main and subcategory pages are small, which makes them harder to notice
- The profile pictures on the main and subcategory pages are small, which makes the users struggle to see them clearly
- The back button on the message page plus the navigation bar creates confusion in navigation
- The user can go to the home page using the back button on the upper left corner and they can go to the previous page (not necessarily home page) using the back button, the difference in user consequences may create confusions in user expectations and mental model.
- The animation of the navigation bar creates a confusing mental model
- When navigating with the nav bar, the page-transition animation makes it look like new pages keep stacking on top of each other. This will leave the user with the impression that they are opening new pages each time they interact with the nav bar, which is not the case. Plus, there is no way to close the “new pages” or unstack the pages, which also creates confusion.
Version 2: Post-Critique
Navigation Flow
Home Screen
Category
Sub-Category
Influencer Profile
Booking
Confirmation
Message Flow
Home Screen
Messages
Chat
What We Did
- Enlarged profile pictures and buttons across the board
- Added visual design details to provide the visual depth, usability hints, higher contrast and attractiveness to the page
- Switch the nav bar page transition from stacking pages to dissolve to distinct in page navigation and nav bar navigation
- Redesigned the “My Upcoming Session” cards to emphasize the meeting time and the join button
- Redesigned the cards in the “Top Creator” sub-category page. Implemented tags to make user extract the key information in a more intuitive way.
- Added a media carousel for the expert profile page so the user can better learn about the expert’s work and expertise
Before
After
Before
After
User Testing
User Testing Design
Instructions
Please think aloud to let up know what you notice, what you think about the app, and what you intend with your actions. Also, I just want to let you know that you can be completely honest about your experience with the applications, we appreciate your input.
Setup
This is a mobile prototype so everything inside of the Figma file will not be clickable. Please use the mic to explain through your thinking process as this will help us gather your valuable input about the app. Thank you!
Main Task 1
Scenario: You hurt your hips playing basketball and the pain has been bugging you for weeks. You want to find an expert that can recommend stretching exercises for recovery and pain relief.
Main Objective: Browse the app and schedule an appointment with an expert that you think can best help with your injury.
Main Task 2
Scenario: Outside of playing sports you are also an entrepreneur trying to start a yoga studio. You scheduled an appointment with Amy Nguyen, a yoga youtuber, for advice on this venture. The session you booked is starting soon.
Main Objective: Please join The meeting to talk to Amy.
Summary of Results
- Users generally apprecated the layout of the pages, reflecting that they are "modern and sleek", “appealing and attractive”, and “easy to look at”.
- The testing subjects all successfully completed their task 1, reflecting that the process is "simple and straightfoward" and that everything was “where they were supposed to be”.
- The three subjects all successfully completed task 2. However, one small behavior that did not match our expectation was how two of the three users did not check the messages tab to text Amy. This was not a problem as there were two routes to take to succeed in this task: checking the messages tab or going to Amy’s chat directly through the home page. Since both routes resulted in the task being completed, the fact that most of our users went with the second route surprised us a little, but it did not affect their success.
- The users saw themselves using the app for healthy cooking inspiration, gym workouts, or even took on the role of the professional, saying that it could be used to help out small businesses. Others saw it as an opportunity to advance their careers, using the application to receive individual feedback and advice. Overall, the responses reflect that there is a market for expert help and advice, which can be filled by the app.
- One of the subjects expressed sense of uncertainty after confirmed their session booking. They are not sure if they book the correct time slot with the right expert.
- It was reflected that were minor spelling mistakes.
Usability Test Video Recording
Final Version: Post User Testing
What We Did
- Added a confirmation pop-up after the user click the confirmation button on the booking page, which allows them to double check their session’s time and the expert they booked.
- Add a Note for The Expert section at the booking page so that the user can communicate what they want to discuss with the expert in the session beforehand.
- Fixed spelling errors and inconsistencies in user journey in prototype
New confirmation Flow
Influencer Profile
Booking
Confirmation 1
Confirmation 2
Follow-ups and Conclusion
After finishing the final prototype, we contacted the owners of Winno and received feedback shortly. They reflected that they are taking a different approach from us that they are prioritizing attracting the influencers rather than the consumers first, which makes sense because the product needs to have a strong collection of experts/influencers as a precondition for attracting consumers. This made me realize that it is important to think about a product from ground-zero and lay a good foundation before the next steps. In this project, I mainly worked as a visual and interaction designer. Not only did I learn the importance to take great care of each visual element and animation to create consistent theme and mental model, but I also learned to incorporate the feedback from my teammates, my peers, and testing subjects for future iterations.
