tutorbookapp / tutorbook

Web app that helps schools and nonprofits connect students with expert mentors and volunteer tutors.
https://tutorbook.org
Other
59 stars 13 forks source link

feat: show full profile in results #267

Closed nicholaschiang closed 3 years ago

nicholaschiang commented 3 years ago

Fixes TB-151 and TB-32 (for admins).

linear[bot] commented 3 years ago
TB-151 Show meetings in users dashboard

Each row in the users dashboard should show each volunteer's: * Name * Email address * Phone number * Bio * Subjects (highlighting the ones that are currently being filtered) * Meetings (when they're booked, for what subjects, and with whom) * Availability This information should be presented in a uniform, easily scannable format (e.g. so that an admin can easily see what differs between various candidates for a new match).

TB-32 Show subjects in search result cards

**Is your feature request related to a problem? Please describe.** When looking at search results for multiple different subjects, users have no idea who can tutor which subject(s). Because of this, our default `OR` concatenation between selected subjects can seem confusing (e.g. when the user is expecting those subjects to be combined with a logical `AND`). Also, users are not likely to actually *read* the 300 character bio that is being shown right now (it doesn't add much value to the display): ![image](https://user-images.githubusercontent.com/20798889/93145347-f0994c00-f6a0-11ea-9ba6-d48e9a1923f5.png) **Describe the solution you'd like** Instead of just a bio, we want easily scan-able profile information in each search result. Right now, I'm thinking that'll be: - Profile photo on the left (as large as the result is). - Name (first name and last initial; located directly to the right of the profile photo). - Bio (truncated, only the first sentence or two will be shown; located right beneath the name). - Subjects (show subjects that the user is filtering for first and then truncate before overflow reached; below bio). - Reviews and ratings (once we get enough of them that is). **Additional context** Here are some other tutoring platform search results: **Knack:** ![image](https://user-images.githubusercontent.com/20798889/93145726-efb4ea00-f6a1-11ea-8e9e-15f00c2cf660.png) Some things that I like: - Shows location and availability concisely (e.g. "Tuscalosa, AL - Available online"). - Includes very short "bio" of sorts (defining characteristics of this individual v.s. the next). - Includes ratings. Some things that I don't like: - Very small profile picture. The profile picture should be as large as the card is (we want to see smiling faces). **Wyzant:** ![image](https://user-images.githubusercontent.com/20798889/93146533-ef1d5300-f6a3-11ea-8cc7-e154ae78799c.png) Pros: - Shows tutoring rate (N/A for us), ratings, and location prominently on the left (easily scan-able). - I love how they show the experience (e.g. "90 hours tutoring"). Cons: - Same problem as us. Wyzant is using way to much space for a bio that nobody is going to read. - Same problem as Knack. Wyzant's photo is much too small. **Preply:** ![image](https://user-images.githubusercontent.com/20798889/93145807-1d019800-f6a2-11ea-922b-8f989e409c10.png) Pros: - I think I like Preply's the best. They have an emphasis on a personal connection between you and your search results. - Shows video preview and availability dynamically on the right side. This declutters the main UI but still allows for a high level of detailed information to be shown on demand. - Includes multiple CTA's for each search result (i.e. "Message" or "Book trial lesson"). - Like Wyzant, prominently shows ratings and pricing (N/A for us). - Again like Wyzant, shows experience (e.g. "15 active students, 452 lessons"). - Good, big profile photo. Cons: - Again, doesn't show the subjects that they can tutor. Preply's search is setup to only allow you to pick a single subject, however (which makes sense... typically you're only ever looking for a single subject tutor). - The search results are a tad bit dense. - Unrelated, but the search bar (where the filters are shown) takes up a good 30-50% of the total viewport height. Not ideal at all.

vercel[bot] commented 3 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/tutorbook/tutorbook/3iaNibtBpukD1EsHWDZiFToXqwe4
✅ Preview: https://tutorbook-git-search-tutorbook.vercel.app

codecov[bot] commented 3 years ago

Codecov Report

Merging #267 (70aec1c) into develop (5a5c75a) will increase coverage by 10.92%. The diff coverage is 100.00%.

:exclamation: Current head 70aec1c differs from pull request most recent head 39e1634. Consider uploading reports for the commit 39e1634 to get more accurate results Impacted file tree graph

@@             Coverage Diff              @@
##           develop     #267       +/-   ##
============================================
+ Coverage    59.00%   69.93%   +10.92%     
============================================
  Files          220      221        +1     
  Lines         4625     4633        +8     
  Branches      1256     1259        +3     
============================================
+ Hits          2729     3240      +511     
+ Misses        1896     1393      -503     
Impacted Files Coverage Δ
components/analytics/index.tsx 60.86% <ø> (ø)
components/search/result.tsx 100.00% <ø> (+48.57%) :arrow_up:
lib/model/user.ts 89.61% <ø> (+2.26%) :arrow_up:
pages/api/account/index.ts 93.15% <ø> (+13.69%) :arrow_up:
components/users/result.tsx 100.00% <100.00%> (ø)
components/users/results-list.tsx 95.00% <100.00%> (+26.81%) :arrow_up:
lib/model/timeslot.ts 70.11% <100.00%> (+29.15%) :arrow_up:
components/select/index.tsx 79.50% <0.00%> (+3.27%) :arrow_up:
components/navigation/index.tsx 100.00% <0.00%> (+3.70%) :arrow_up:
... and 50 more

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 5a5c75a...39e1634. Read the comment docs.

cypress[bot] commented 3 years ago



Test summary

30 4 0 0Flakiness 2


Run details

Project tutorbook
Status Failed
Commit 70aec1ce59
Started Oct 29, 2021 10:05 PM
Ended Oct 29, 2021 10:25 PM
Duration 19:37 💡
OS Linux Ubuntu - 20.04
Browser Chrome 94

View run in Cypress Dashboard ➡️


Failures

org/users/id/index.spec.ts Failed
1 User display page > collects profiles before booking meetings
2 User display page > lets parents book meetings for their kids
profile.spec.ts Failed
1 Profile page > updates volunteer profiles
org/users/index.spec.ts Failed
1 Users page > copies org links and filters users

Flakiness

cypress/tests/org/settings/index.spec.ts Flakiness
1 Org settings page > shows error when not org admin
2 Org settings page > displays and updates org settings

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

nicholaschiang commented 3 years ago

📝 Changed routes:

/[org]/search /search
Screenshot of /[org]/search
(view full size)
Screenshot of /search
(view full size)

And 1 other route:

Commit 39e16347244bf52c26a37ca71787e12dcc658c01 (https://tutorbook-gjjt1xmlf-tutorbook.vercel.app).