Portfolio Series. True+Way ASL. Daniel Cox. UI/UX Design Process. Web Development Process

Transcription

1 Portfolio Series True+Way ASL Daniel Cox UI/UX Design Process Web Development Process

2 True+Way ASL True Way ASL is an American Sign Language curriculum content provider serving high school and college classes. Their vision is to assist students as they learn sign language with a teacher and aims to achieve this with an online e-textbook. The project scope is to revamp their website and include a CMS (Content Management System) to allow ease of adding additional content. The curriculum provided are videos set up as private content with subscription models. Team size for the project was two members, a project manager that I worked directly for and myself as a user interface/experience designer and web developer. Total project time from start to finish was 4 months over the summer (2017), the finished product contains 350 webpages of curriculum content with sufficient hosting power for the videos. I was responsible in setting up a brand new B2C (Business to Consumer) website from scratch that meets the following requirements: Easy to navigate e-textbook system for both student and teacher versions CMS with roles for adding content Member account structure that validates teacher's credentials while allowing students to register freely Secure content that can be accessed via a current subscription, selling various levels of curriculum Classlink.com Single-Sign On Implementation Mobile Responsive

3 In this project overview, I go over the process that covers the user experience process of the website and its web development. One of the first challenges I faced in this project was the complex navigation system, and since it is one of the vital aspects to user experience, it was one of the priorities in the user interface design. The solution was to create a homepage as a landing site, which users will then navigate to either the student edition or the teacher s edition. By having a subdomain for both websites, we can keep the databases of user accounts separate for students and teachers for easier management. I. Navigation System Thought process and rhetorical questions: What is the most efficient menu navigation system that allows quick navigation which follows Miller s Law of 7+-2 elements in the menu? How often do students navigate to different chapters and units in an e-textbook? What steps can we do to ensure server uptime given all students visit a specific unit page online (since specific units will be taught the same time)? What methods of QA (quality assurance) testing can be done to check if the menu navigation system is satisfactory? The lo-fi prototype of the menu navigation system is outlined in the image:

4 The finished product is shown in the following snapshots of the menu design: Landing page to filter user by student or teacher: Teacher s Login (Student s version is similar): Teacher s edition welcome page:

5 The menu system proved to be successful by making navigation simple and to the point, with little (if any) pain points, and ensuring the user knew where to go without getting lost. II. Template Unit Page Thought process and rhetorical questions: How can we provide the user a top quality experience using the e-textbook so they will prefer using the website instead of a physical book? What is the efficient method of delivering curriculum content so the user can jump into the unit material after logging in? How much hosting power does the client need to provide uninterrupted service for their clientele and users? Next phase is to set up a template page for an unit page, which was designed to be easy to set up and allow users to have quick access to content as seen in the finished product, image below:

6 The template focuses on the videos since sign language is a visual language. The client requested transcripts instead of subtitles so this design considered that into account. The videos are kept at 16:9 resolution to keep the integrity of the videos. Jump links are included for quick browsing to contents within an unit. It is critical that the user be able to arrive to their intended learning material with as few navigational steps as possible. With this design and with user bookmarking the login page, the least amount of clicks and page loads is reduced to two which is ideal number of clicks without compromising the integrity of the website security and private content. As for the video hosting, we decided to go with a start-up company that provides hosting for videos since they were looking for new clients and offering cheaper prices than the competition. Currently, the website is now being expanded with new pages. III. Shopping Cart Thought process and rhetorical questions: What is expected in the shopping cart experience? What UI/UX mistakes do we avoid? How can we ensure the shopping purchases are confirmed to the user? What can we do to prevent misunderstandings for the user during the shopping process? How can we improve the shopping cart experience in new ways that are not discovered yet? Next phase for the User Interface/User Experience process is adding a shopping cart for access to the content. Currently there are four courses which is for a semester each, and are locked until the student pays for access to one of them. The main question to ask ourselves is how do we guide the newly registered student to paying for the access without encountering any frustrations? Along with the call to action button after registering, we will be making the link to the shopping cart accessible from the menu (see image).

7 Subscription plans for sale: Payment Page: After the payment is processed, it leads into a page that will redirect back to the welcome page (for students) as shown:

8 The student user now has access to the ASL 1 course portion of the website in the second menu: One of the biggest challenges I faced in this project was implementing OAuth2 authorization protocol to set up a SSO (single-sign on) feature for the Classlink application. Classlink is used to allowing students to be able to log on to a myriad of apps without remembering each app s login information. For high school students, this is an ideal service to offer the clients, especially to compete with other curriculum providers. Since I hadn t learned this particular skill, I needed to research and find people with expertise in this field. A team from Classlink was helpful in making the authorization process successful.

9 The Classlink module showing the process to logging into True+Way ASL directly using SSO based on OAuth2 is shown:

10 Conclusion This covers most of the work involved in this project, and it was a great learning experience in which my skills developed rapidly during the development process. Not only did I expand new development methods and technical skills, but my soft skills grew as well, realizing the powerful effect of good communication among team members and clients. The best part of this project was being able to deliver the finished product that exceeded the client s expectations. The end result is an online e-book that provides American Sign Language in a visual format with videos under a simple and effective payment system that keeps the content private and accessible to members only, as designed according to the business model. Thank you for reading, and any follow-up questions regarding this project can be sent to my drc8599@rit.edu