TUYA TECHNOLOGIES
WEB - SHIPPER
Client: TUYA Technologies
Role: UX/UI Designer
Tools:
OVERVIEW
SCOPE:
TUYA Technologies is a Houston-based tech company, that is developing and deploying a technology marketplace platform for shippers and drivers in the same-day business to business delivery industry. As a UX/UI Designer for TUYA, I inherited their existing applications and redesigned them to become applications that are easy to use, pleasant to use and meet the needs of our users. My role included conducting user research, wireframing, prototyping, conducting usability testing, high fidelity visual design for all our platforms which are Web, Android, and iOS.
As UX Designer for TUYA, I worked on all of their platforms:
Shipper: Web, Android, iOS
Driver: Android and iOS
CHALLENGES:
• I inherited a website and mobile applications that were designed and developed by an outsourced
team. The product was designed without the guidance of a UX Designer so part of the challenge was to
redesign the website and mobile applications with UX design best practices.
• Update existing TUYA branding and implement it across the applications. The previously outsourced
companies that were hired by TUYA did not have an established design system so part of the challenge
was to create one in order to create cohesiveness across the applications and the website because all
of TUYA’s products looked and worked like they belonged to different companies.
• When the product was first developed, the outsourced team did no research, competitive analysis or
had instruction or interaction with drivers, shippers, or a SME so it was not geared towards the actual
needs of the user. The product was not pleasant to use, had a lot of usability issues, visual design was all
over the place, had several bugs, workflows were not seamless, it had a lot of UI issues, etc. Therefore
I had to collaborate closely and extensively with our users and the SME among
other stakeholders to redesign the product to meet the needs of our users.
• When I had inherited this product, there was limited time to update the product before the stakeholders
and board of directors launched the product into production therefore one of the bigger challenges was
to update UI components and interactions without causing major disruptions to the customers
that started using the product at launch.
ORIGINAL WEBSITE
Here are some screenshots of the work done by the outsourced teams:
RESEARCH
Methodologies Used:
• Secondary Research
• Competitor Analysis
• Usability Testing of existing products
Usability Testing of Shipper Web
A general assessment of every single page in the shipper web was needed to pinpoint and have an understanding of where the users were having issues or had major pain points when using the existing application. This allowed me where we needed to focus a lot of attention in updating the application to create a better user experience.
Takeaways
Some of the takeaways I gathered from the usability testing I conducted were:
“Was fine but it was confusing because there was no prompt to show where to go next or what to do
next when I was creating a shipment.
“There was no indication visually that told me that I could proceed. I didn’t know what to do next”.
“Fairly simple 2 or 3 times when it will be easy to learn. Felt really frustrated when I had to search for a
driver to give an exclusive offer.”
“Entering the address was confusing because it kept adding the address twice to the field.”
“I was frustrated because the application wouldn’t let me complete my order.”
“The asterisks in the Pickup and Delivery Stop field were not obvious. They blended in”.
STRATEGY
With all the information and data that was collected from the usability testing, the secondary research, and competitive analysis, it helped me move in the right direction to start redesigning with the user’s needs in mind all the step of the way.
REDESIGN EXAMPLES
During the redesign process some pages were kept in the old design style but interaction patterns and new UI elements were gradually replaced the old ones. Always working closely with the product owner, BA, and the SME, I developed a well-received concept, which was modern, minimalist, and matched the corporate branding guide and addressed our users’ pain points to achieve an improved user experience for the web and our mobile applications (you can find these in the other page).
Original Landing Screen
As previously mentioned, we gradually implemented new parts to the landing page.
The original landing screen presented several pain points for our users that I discovered during usability testing and interviews:
- A good number of our users complained that there was no obvious way to know how to edit or cancel
the order.
- They also mentioned that there was no way to cancel several orders at the same time. Which also
meant that there was not way to select several orders at the same time.
New Redesign of the Landing Page - My Orders Screen
For the landing screen, taking into consideration the needs of our users, I changed the hierarchy in which the user sees the information presented, added the ability to easily edit or cancel an order (among other things) based on feedback received.
This image shows one of our newer functionalities, Duplicate Order.
This is what the current landing page with new functionality looks like in production.
Email Confirmation Redesign
Original Email Confirmations and Password Reset screens designed by outsourced team
New Email and Password Reset Screens
I worked closely with the marketing team to create new email templates and password reset screens so they match what the marketing team was trying to accomplish on their end with regards to branding.
Login Screen that was existing when we launched the product into production
This was the login page designed by the outsourced team.
Old Login Screen - gif
New Redesign of the Login Page with TUYA Branding
With the redesign of the login screen, I updated the design to show newer components of TUYA branding. For example, the logo no longer was “TUYA Now”, marketing updated the branding to be just “TUYA”.
Original Registration Page by the outsourced team
The original registration page presented some pain points for the users. For example, some of our users mentioned that when they started registering they didn’t realize which fields were required because the label kind of blended in with the asterisk that noted which fields were required. That was addressed in the redesign of this page. Another pain point that users had was that when they got to the password portion of the registration page, there was no indication of the format one had to use for the password (that was fixed in a hot fix) but I made sure to address that pain point in the redesign.
New Registration Page Redesign
NEW FEATURES
Initial Low Fidelity Wireframes using Sketch
One of the new screens/workflows I designed was this new feature. Prior to designing the low-fidelity wireframes on the computer, I did some brainstorming with the requirements in mind. Keeping the project scope in mind and all the research and feedback I had gathered, I grabbed my notebook and a pencil and I sketched out some ideas of what I visualized the new multi-stop might look like integrating all the requirements. A big challenge for this was that I had to integrate the feature into the current workflow and UI. After this, I translated these ideas to low fidelity wireframes to illustrate the overall layout of the product interface, define the rules for displaying information and define the behavior of its elements.
There were several rounds of iterations made to the feature before a finalized version was complete.
Low Fidelity Wireframes different iterations of the wireframes for the Multi-Stop:
For this portion of multi-stop, we focused on I went through several rounds of iterations working closely with the SME to get the workflow correct.
One of the major challenges for this portion of the project was that the new workflow had to be integrated into existing functionality/workflow on a screen that was already in production and being used by the customers. I was also tasked with updating the order entry form since during usability testing the users complained about several pain points they had when entering their information into the entry form.
Visual Design
High Fidelity Wireframes: After several iterations, high fidelity wireframes were designed for this new feature.
Driver Portal
Portal designed for quickly adding drivers to their system among other functionality.
