Designing a Voice Conferencing UI/UX for YourSigma

So Chris (business partner/co-founder) and I have got voice conferencing working on yoursigma.com. Now I have to design the user experience and interface. Want to help?

Here is some background information:

  1. Voice conferencing should be its own subscription tier. It’s not expensive but it costs us more than chat.
  2. Of course, it can be made available for a limited time as part of a trial.
  3. It can be used for a blended learning experience, whereby a teacher coordinates a class of students in online activities and also teaches them in person.
  4. Later (when I have a better grasp of how to go about it) users should be able to buy “credits” or time to spend with tutors getting one on one help.

So, right now I want to design for three main use cases, as I see them:

1.Group practice sessions

When students are taking a practice exam (session) together – looking at the same questions, at the same time – then they can click a button to hop into a voice conference with other participants in their session. Where do I put the button, if they’re subscribed or otherwise able (in a trial, maybe)? If they’re not able, where do I put the button that opens a payment page in a new browser tab? Here are my best options, I think.

UI<em>Session</em>1-31-14-4

2. Dashboard

On the dashboard, students/teachers/tutors could just be shootin’ it or getting ready to study something together.

For this case, we can host up to 5 simultaneous voice conferences of up to 40 people (not expecting capacity to be an issue for some time). The question is where do I put buttons so that users can join or start one, and does that button include a one liner about how many are in it already, and what they are doing together (although we can’t do that last part just yet)?

Initially, my ideas are 1) to create a news/stock ticker bar at the top of the dashboard. The dashboard header (that section at the top but below the navigation bar) has space now, although eventually I wanted it to be used to give adaptive, individual recommendations to students about what they should do/study/learn next.

2) The right-hand sidebar could also be used, since voice conferencing is so closely related to the chat experience.

UI_Dashboard 1-31-14

3. Studying

Finally, there needs to be a way to join a conference while studying something (video or reading). In this case, it would be nice if the button was consistent with its placement in a session (#1) because the interfaces for the two are already so similar. But we could also do news ticker still, because again there could be up to 5 voice conferences to choose from.

png-10

For Later:

Later, I think I’ll have to build a dashboard tab maybe to describe who’s in which conference and what they are up to in more detail.I also need to figure out how to facilitate tutoring.

Wrap-up:

So, that’s what I’m working on. Usually I go to www.dribble.com or patterntap.com to see if and how other much more skilled designers have approached something similar. Then I usually just mess around in Chrome’s developer tools. Or whip out Illustrator and draw on a screen shot.

If you, dear reader, have any brilliant ideas or have seen a good interface elsewhere that could accomplish this, please say so! Post it here, on facebook, or email me: [email protected]. Have a good weekend.