Project 4: Efecto Fruta (UI)
Week 4 — UI Project: Designing an E-commerce App (English version)
During the fourth week of the Bootcamp, the idea was to go back to the second project and design an app for Efecto Fruta, a small e-commerce of Madrid that has only a web for the moment. The challenge was big. During the second week, we worked on the UX part of the project and we had to redesign in mid-fi the web of Efecto Fruta. This time, we have to take this project, change it into an app and present a High-fi Prototype at the end of the week. Moreover, teams have changed. Two (including me) had already worked on the project during week 2 and two new colleagues had to join the team and discover the project.
The problem was still the same:
When buying fruits and vegetables online, people want it to be quick, to find the products easily; they want to buy quality so it is important for them to find information about the products; they want a large choice of payment method and they like to receive products at home.
For these reasons, we knew that the design of the cards was important. We wanted users to add easily all the products to the shopping cart and have the possibility to choose the peak of ripeness of the product or have all the information to choose properly.
To design the app, it was necessary to go through the UX process and see what had to be modified as the project was not anymore for a web, but for an App. We modified the Lean UX, the User Journey and we changed the User Flow. Also, we wrote User Stories. After that, the four of us drew a Crazy Eights, and thanks to that we drew together the Mid-fi version of the app.
Once we applied the changes to the UX part, we could focus on the UI. We only had three days to get familiar with the UI tools and to present an app on friday.
First, we did a moodboard and we defined the brand attributes. Thanks to the survey we made, users defined the brand as fresh, lively and energetic. After that, we chose the colors and the typography. Choosing colors was not easy at all. Indeed, as Efecto Fruta is an already existing brand, with 13 physical markets, a web page and a logo, we wanted to propose something new and fresh, but not totally different. Also, we took into account accessibility and chose our colors according to that.
Finally, to offer our users a consistent experience, we created a UI Kit, a Style tiles and a Style Guide. All the screens are drawn following the 8pt Grid System, because spacing is very important in UI.
As it was our first UI project, drawing the High-fidelity prototype has been difficult, and we had only two days to do it. We had a lot of screens to draw and our biggest stopper has been drawing the cards of the product. At the beginning, we drew it vertically. We had a lack of experience and we had the impression that all the information we wanted to put inside the cards (title,price, ripeness, quantity, shopping cart) will be better seen vertically, but it was not the case. Thanks to users’ feedback, we had to change it. Doing tests is the best way to see if something is working or not. Here you can see the two versions of the cards we made.
Finally, we can see in the prototype the purchase process that our user would have to follow. After signing in, the user makes his purchase by adding a product to the cart directly from the card. For the second product, the user decides to enter the card to see it in more detail. Finally, the user goes to the shopping cart and completes his purchase.
This week has been very tough. For the first time, we had to do the entire UI process. As we had a very short period of time and a lack of experience in UI, we have been very connected and we haven’t taken enough time off to see the errors. We could also have carried out more tests with users to improve our design. However, on a human level, it has been a great experience. The team has been very supportive from start to finish. I really want to thank the three of them: Carla Napolitano, Inma Berjón y Pablo Lógar. It is in difficult moments that the best learnings come out.
I hope you enjoyed the project and see you soon on Medium,
P.S. I’m waiting for your questions and I’m open to work. If you’re interested, drop me a line: firstname.lastname@example.org.
Puedes encontrar este artículo en español aquí: