Trytale
Fall 21 Industry Project
Introduction
The Team
Grisha Bandodkar — Project Manager
Glenn Chen — Developer
Yuvraj Virk — Developer
Eric Huang — Developer
Timeframe
Oct – Nov 2021 | 6 weeks
Tools
Angular
Typescript
JavaScript
CSS
HTML
Firebase
Figma
The Project
Trytale blends the convenience of the digital world with the physical experience of the retail stores. Inside their mobile pop-up shop, there is a smart fitting room with a unique technology, a combination of interactive user experience and automated delivery. Trytale strives to be a sustainable shopping experience that gets online brands closer with their shoppers, enhancing an immersive customer experience: feeling, touching, and trying on the latest footwear styles can be done for real.
Our project with Trytale consisted of implementing features for their new web application. These consisted of designing and developing an account page, a wishlist page, welcome tutorial, try and return mechanism, and notifications.
Design
Your Orders
First iteration
Profile image is editable. Account data is displayed as editable text fields.
Final iteration
To change account data, the change button must be pressed to activate a collapse. By doing so, information in the editing state is hidden to prevent information overload. Instead of taking the user to a separate page to change a field, using collapses has the benefit of making each field editable on the same page, making editing multiple fields more convenient for the user. There is save and cancel functionality. To minimize user mistakes, verification codes are used for phone numbers and emails. Only numbers and dashes can be inputted into the phone number fields. Syntactical checks are used for phone numbers and emails. The shipping address is broken down into fields such as street and country to ensure the user enters each essential part of an address. Password security conditions are shown to remind the user of them and are updated as the user types in their password. The page’s visual design promotes a sense of airiness and ease.
Read and Validation States:
Edit States:
Sample Editing:
Your Wishlist
First iteration
Interface is completely different from Browse page. Each item is in a container with its own add to cart and try button
Final iteration
Add to Wishlist interaction:
The add to wishlist button in the Browse page adds a heart to the corner of the corresponding item in order to signal that the item is in the wishlist.
Wishlist Page:
The wish list interface is the same as the interface in the Browse page. Each item has a heart at the top right hand corner to signal to the user they’re on the wishlist page. By using a standard interface, the user doesn’t have to learn a new interface and can more easily interact with the wishlist page.
Development
The web app uses Angular and TypeScript for the frontend, and Firebase as the backend.
Notifications were built using the ngx-toastr package and appear in the bottom right corner when a product is added to the cart.
Frontend view Components such as how it works, menu sidebar, your account, and ship-and-pay mostly used Angular and TypeScript with functions for data validation and routing.
Backend Components such as ship-and-pay control, order emails, and try control all listen to events sent in from the frontend. Firebase was convenient since it was a serverless solution but our code was deprecated, so it was a bit tedious to work around that issue.
The “Your Account” implementation uses angular custom form validation to validate user input. Customer validator functions are made to check password security conditions and the syntactic validity of emails and phone numbers. Other Angular features like structural directives are used to accomplish the rest of the page’s functionality.
A confirmation email is sent at ship and pay step 3. The backend automatically sends an email to the address specified in the new order. The email is composed using the data in the new order entry.
Takeaways & Challenges
Challenges
Before starting our project, our team primarily consisted of developers with React experience. However, since the TryTale web app was built off of Angular, our team had the opportunity to gain experience in working with a new framework. Learning a new web development framework was a fun and challenging experience which brought along many challenges and setbacks. In particular, we all felt that Angular was more obtuse and complex than React. By the end of the six-week period, however, we all were adequately versed in Angular and could use it to create impressive applications.
Takeaways
We didn’t have much communication in the Slack channel for the first week, so we decided to use Calendly to quickly and conveniently schedule online meetings with our client to discuss the direction of the project or ask for help on solving problems. This ensured that we moved along in the right direction and cleared up misunderstandings quickly, improving the efficiency at which we worked. We learned that having an organized way to set up verbal communication was much better than exchanging messages.
After six weeks of development, our team, and especially less experienced members, gained a deeper understanding of the software development process. Working on a task and immediately putting it through review was initially quite fast-paced, but we eventually developed a rhythm which got work done.
Conclusion
Finally, we would like to thank our mentors from Trytale, especially Frens and Francesca for giving us the opportunity to work on this project. We learned a lot of new programming languages and tools from their codebase and we are glad to have produced great new features that will work towards Trytale’s web app.
