Case Study : E-commerce App Mobile
E-commerce mobile app creation from a web e-commerce
This week we were challenged to retake a previously done exercise, E-commerce of La Villa Bakery, and adapt it to an app version.
For this project the team was formed by 2 veterans of La Villa e-commerce web, who had to explain the UX development and the whole project to the rest of colleagues, and 2 new colleagues from outside the e-commerce web project.
Limited time for the development of the project 5 days.
Briefing
This time we had already developed the tools and research about the business and its needs, so we updated the new colleagues and adapted the tools to the new proposal. It wasn’t easy, it’s very misleading to think that it’s just adapting!
UX tools
Looking at the modifications made to the UX tools, in my opinion the most interesting and the one that underwent the most significant changes was the User Flow.
Starting with the adapted tools, we began with the development of a Crazy8, which we then shared with the rest of the team, as in previous projects.
After finishing with the adaptation of the tools and the Crazy8, we started with the MID-FI prototyping. These are some of the screens:
And with that said, we start with the tools for UI development. Let’s get to work!
Step 1: Branding attributes, Colors, Typeface
In our first step in UI we aimed to focus on the product image, get the branding attributes and convey to the user the message of the app using the Moodboard tool. We tested the tool to check if it was correct with some tests to possible users and this was the result.
Depending on the development and testing of our Moodboard we chose different color ranges for our product.
In the first option we looked for what they themselves were looking for when they made their logo, jam and cream, two basic products in confectionery.
The second option came out as a result of an evolution and tests that we made of the first option, since the colors were too strong and were somewhat serious because of the contrast, besides being difficult to use the cream color because it gave a feeling of dirt.
And finally, the third option that came out as a result of the colors extracted from cakes and fruits, a very common mixture in confectionery as well.
Once we decided on the colors and brand attributes, we only had to think about the font, typography and text sizes.
Step 2: The Brand
Once we decided what we needed in step 1, we made a UI Kit where we represented the brand. As we already had the font and typography, the colors, and the brand attributes, we just had to put it into practice and develop the elements that we were going to use in our HI-FI prototyping and that give shape to the identity and brand of the product.
Step 3: Prototype
And finally we got to the HI-FI prototyping. The truth is, when we were working on it, we noticed several bugs or errors that we had to correct. It was not easy, but we got results to be proud of.
Prototyping instructions
The situation is as follows, you are an unregistered user who wishes to place an order with payment by credit card. When looking at the products you are interested in seeing the cheesecake and cream puffs file before adding them to the shopping cart or tray. Lastly, we would like to say that registering is not in your plans. The order consists of:
- One Santiago cake
- Two cheesecakes
- A small tray of cakes with 1 chocolate truffle, 2 mini flans and 2 cream puffs.
Happy prototyping experience!
Learning
Learning to explain ourselves is sometimes a challenge, and we don’t realize it until we are confronted with it, and this is something we realized the moment we had to communicate to our colleagues about the previous project for the same business. But with patience, time and dedication I believe we are all capable of expressing ourselves properly, and we did.
Not only did we learn in communication and teamwork, but we also learned a lot from each other in terms of design and composition, as we all did not have the same level of learning.
It was a hard road because of indecisions and not agreeing often, but incredible as a learning experience that we all took with us as a team, besides all the new tools we learned for UI.
