top of page
Aviato CS Header.png

AVIATO

E-COMMERCE

Role:

Design Lead

Contribution:

UX, visual design, project planning and management

Duration:

April - May 2023

Project summary:

I collaborated with a software engineer to develop an e-commerce website with the goal to integrate it into an online marketplace for users trying to grow their brand or sell their own products. She had an existing minimal viable product (MVP), but was seeking an enhanced user experience and polished look for the site. Through collaboration, we set up a scope to focus the redesign efforts on the shopping bag screen and the customer checkout experience and managed to convert the project into an aesthetically pleasing and intuitive solution.

DISCOVERY

Once the MVP was handed-off to me, I immediately evaluated any heuristic violations of the current website and found several areas that could be improved to enhance the overall user experience.

Overall, the website presented a generic design that lacked personal branding. In terms of usability, the site did not allow for much communication from the product to the user, such as visibility of system status and error prevention and management.

The developer was very specific in her needs that the site provides a familiar experience for online shoppers, but also requested help developing its visual brand. In doing so, I conducted a competitive analysis to research various layouts, elements, and features that could be implemented into the redesign while maintaining a minimalistic aesthetic to fit the brand.

To gain further insight into the users' experience throughout an online checkout process, I watched users as they navigated our website to discover any pain points users may encounter. I followed up with questions to better understand why customers might abandon their carts. I found that most of their frustrations was because of having to go through several pages in order to complete a transaction. Another discovery I made was seeing how significant it is for an e-commerce site to provide updates or information to the user as early and often as possible about their items, return policy, delivery, etc.

THE PROBLEM

Using the findings I gathered from the user research, I hypothesized that shoppers don't feel comfortable about their online purchasing decisions due to a long and/or complicated process to checkout their items.

HOW MIGHT WE...?

Speed
Speed.png

Create a quicker and seamless checkout experience

Trust
Trust.png

Cultivate trust between the users and the website

Transparency
Informed.png

Keep users more informed and updated on product details

For a quicker and seamless checkout, some potential solutions include a one-page checkout, limiting form fields, and allowing users to fix mistakes during the checkout process.
Speed
  • One-page checkout: Help users view all previous input forms and make edits while staying on the same web page

  • Limited form fields: Requiring only the most necessary information needed for customer contact and payment makes the process less tedious for users

  • Allow users to fix mistakes: Offering the option for users to edit the properties of their items from checkout, so that they don't have to go back and start again

Trust
  • Visuals to reassure users of site security: Including graphics of badges or trust seals help users feel comfortable providing their sensitive payment information on the site

  • Privacy and Terms of Sale links: Helps further create trust between the site and users through transparency

  • Access to customer service: Helps users feel comfortable knowing they can easily find and access customer support for any questions and concerns

To cultivate trust between the users and the website, some potential solutions include visuals of badges or seals to reassure users of site security, including privacy and terms of sale links, and lasty, visible access to customer service.
A few potential solutions to keeping users more informed and updated on product details includes being upfront with users about full costs early on, using error messages, and providing an estimated order delivery.
Transparency
  • Be upfront about the full costs early on: Providing the order total as well as any additional fees help prevent any surprise costs that could turn away shoppers

  • User error messages: Helps shoppers know what's required and provide instructions for unclear input fields

  • Estimated delivery: Providing an estimated delivery date helps shoppers plan their purchases and eases their anxiety about when they'll receive their orders

the new experience
The user flow of the new design prototype

STYLE GUIDE

Brand Voice

INNOVATIVE

modern

forward looking

experimental

AUTHENTIC

transparency

honest

original

EMPOWERING

self-expressive

individualistic

confident

REFINED

elegant

sophisticated

stylish

Product Style Guide and Component Library

Reflection

This project was pivotal to my professional growth, in which I had the opportunity to work closely with a developer to design her product. There were so many meetings where we would spend hours educating each other on our own processes, rather than discussing the actual product in hand. Coming into this project, I had hoped to gain experience communicating with a developer in ways that would help me understand their technical constraints and to begin strategizing ways to make that process more efficient for future projects. Although there were areas of confusion and disagreements, I can absolutely say that I've gained valuable insights into forming that creative relationship with developers.

A big challenge we encountered was our "trial-and-error" process when it came to designing with the developer's technical limitations in mind. Although we both agreed to challenge ourselves to learn on-the-go, there were areas of the new design where the developer was unable to achieve in the final product. No matter, this brings us to our next steps, where the developer will continue to improve her craft, and a future collaboration to complete the entire website may come sooner than we think.

bottom of page