Vignesh
Digital Classroom
Project Type & Involvement
Work for Wall Street English - Product Design
Timeline
Aug 2016 - Feb 2017
Platform
iOS & android
Intro
Crafting complete design of the Digital Classroom mobile application, an app used by student who studied in Wall Street English Courses.
This is primarily focused on china and secondary focused on rest of the country. So we have some basic restriction in the audio/video call, Mobile data restriction etc.,
My Role
I was the sole product designer working on the mobile products right from scratch by strategising, conceptualizing, designing and delivering the hand-offs to the developers working for multiple platforms. My primary responsibilities included defining the product strategy, the vision for the product, wireframing low fidelity designs to prototyping high fidelity designs and collaborating with the product managers and developers by managing the entire design lifecycle in bringing out the product live.
Designing the Agile way
The product was meant to reach the users as soon as possible since this was the first version of the product and the evolving mobile world demanded a need for it. Hence, the agile methodology was defined to bring out the product quickly. Each step of the process was very quick and at its best pace contributing to the development of the product. The agile methodology process is as shown below
Conceptualization and Sketching
After finding out the basic requirements of the user, the key features were identified and ideated. Sketching helped us as we followed an agile method to quickly get an idea of how the product is going to shape and give a rough idea of the concepts.
Low-Fi Prototypes
The Low fidelity prototypes helped us take the sketches to the next level but a step before the high-fidelity mockups. Simple prototypes were of great use in identifying components for framing the design system and also to get initial feedback from the team before we stepped into concentrating on the visual design which required a mamonth effort.
Detailed view of visual design
Keep inform everything
Whenever the student joined the class we have to give him a info about the participation whether if he joined first or someone joined in the middle of the class we have to keep inform.
Onboarding
Giving some hint about the application is a tip for the students. They can understand some key features of this applications.
Active Speaker
When we are in a classroom every student should focus on the teacher, so we try to give the same classroom feel. Teacher video is fixed with this page. If any students speaks we have informed who is speaking. The below screens shows the active speaker in various pages like messages, full screen, on teacher video turned off, and when typing the messages.
Settings
On the menu inside we have provided some basic settings like controlling mobile data and other push notification settings.
Mobile Data
When designing a product for china the internet is one of the important things we need to think about. Mobile data cost is a bit higher in china so we have to keep informed if the wifi is lost/switching to mobile data.
Chat messages
Chat messages for the students and teachers. Students can chat with class groups or can able to chat with the individual students.
Participants
We have limited 8 students max for the class. We have some special features called breakout rooms where the teacher assigns some students into a room to discuss the topic. Teachers can jump into any classes at any time. The color indicates who all are in the same room. and the other image is how the breakout room looks like. They can able to see the current discussion topic with other students in the same room.
The landscape mode for the class
We have forcefully asked the user to rotate their phone when class starts. In this case, students can easily view the PPT/Slide which is presented by the teacher. Also, the student can able to annotate with this when the teacher gives permission to the students. Once permission provided for the student, they can able to write, draw a shape, point anything, or erase.
Also, the student can minimize the teacher video/move anywhere if needed.
Note: After the usability test with students and teachers we take this decision to rotate the device when class starts. All other usability test videos
Reflection & Takeaways
Not everytime a designer gets a golden opportunity to design an end to end product with a large consumer base. I cherish this opportunity which helped me in improving myself as a product designer impacting thousands of people and business. Here are few key takeaways in the process.
Learn about the users
I was able to narrow down the features for the first version of the product by learning about the users and their goals they want to achieve on using the product.
Never fail to take up challenges
Videocall applications are usually considered as an application involving a huge volume of devlopment and calculations. When I started the process it looked very complex, later I learned, collaborated, elevated myself throughout and now I have got a motive to solve scalable problems.
Collaborating with a cross-functional team
Ability to collaborate across cross-functional teams is an essential quality of a product designer. I got to collaborate with managers, developers working on multiple platforms, Branding guidlines team, quality assurance team, marketers to bring out the product to the customers. This helped me in accomplishing the goals as a team.
Accomplishing time-boxed goals
Setting goals and planning them according to timelines was one of the challenging aspects. Though the project was timeboxed we managed to bring out a successful minimum viable product that served the users.
Let's Connect!
If you are thinking about hiring me or would like to discuss a project, get in touch with me at
Email : b4u.vigneshg@gmail.com
Phone : +(91) 9500 230 527