UX/UI Sr. Designer
YEMA's IT team was integrated by 5 Full Stack Developers and 2 UX/UI Designers. Two developers focused with us (designers) to deliver the front end of e-commerce site.
From June 2019 to December 2020
Figma, Mail Chimp, a lot of post-its, paper and a big white board.
I joined YEMA right in the seed phase. There was no MVP yet, however the system architecture was already planned. Regarding visual design, there was nothing for e-commerce although there was already a solid branding proposal (the name, logo, typography, etc.) made by Anagrama.
During the first month of work at YEMA, my purpose was to design and propose the flow of the user experience that the product development employees would have (the merchandise that would be sold) and how they would handle additions / deletions / changes of these in the Product Lifecycle Manager (PLM). During this process, I interviewed several of the users (who were also employees) and collected the requirements and their needs about what they needed in a tool that would help them achieve their purposes.
After achieving the design of the flow with which the development of the PLM would start, it has been implemented and developed over months until having a usable version at the launch stage of YEMA (when products began to be added to a database of data). For this first release, the utility of PLM over aesthetic design was more important, so it did not include an elaborate or mobile-responsive UI, but we only relied on Material Design UI and its libraries to implement a version 0.
As a first action to define the design of the online store, I did UX Research. I started by benchmarking other e-commerce, to know what were good practices or bad experiences in online stores. In Mexico, there are few online grocery / pantry options (other than conventional ones like Walmart or Soriana).
Being a new store-brand model in Mexico, I based my comparisons and benchmarks with other similar stores in the United States. We concluded that minimalist stores with simple and clear products, with a detailed and summarized product page, using graphics to represent product attributes, were more suitable and competitive.
In this phase, although we did not have users yet, we did have the first market-target defined: opinion leaders, adults aged 30 and over who had the interest to propose new things, like to know, experiment and try new, simple products , honest and with high quality We created a User-person with these qualities to define what we had to design so that the target-consumer could have a good experience with the online store, especially when this is the only sales channel in the phase seed.
My first goal was to design the product page. The content of this page was in 4 sections:
My first goal was to design Product Page. Its content was divided in 4 sections: Product, Description, Related and Reviews.
We validated with stakeholders the data they needed to show about the product and with users what they wanted to see of a product on a page. A challenge in this design was to be able to create a clean, responsive and attractive design that did not imply a development time greater than we had available to go into production.
We use Figma to make wireframes and prototypes. We choose to do mobile-first and design the page view for mobile and once validated, do it on desktop.
We used Figma for wireframes and prototyping. We chose mobile-first design because it was the most common device our users would choose to explore the website at first.
After more interactions with users and obtaining more assets from the product development team, we created a prototype with images of real products that would be released, more detailed interactions from users (such as zooming to the product image) and happy- path to enter a catalog, see a product, add it to the cart and proceed to checkout.
The main problems that existed, in addition to the time and the haste to go to the market, is that we did not have a consolidated Design System, so it was difficult for us to create a web page adhering to company standards, so the team of design (creative director, offline design, online design, copy-writer and community manager) we joined together to define the Design System and the voice of the company, as well as in the UX / UI team we began to develop the YEMA UI Kit .
Other e-commerce modules in which I worked were "My Account", "Login", "Checkout", "Product Catalog" and in social communication, I defined various templates for newsletters using Mail Chimp.
