Prototyping an eCommerce App — A Step by Step Process
I’ll say right off the bat, I’ve been lazy. instead of writing down a long honest to goodness blog about the prototype, I’ve simply copy-pasted a presentation I made about it. Let’s hope things don’t get too vague. Feel free to drop a comment and ask me about it.
The brief was to make an app for a store with the objective of driving foot traffic from online to in-store. A little bit of a reverse from what we’re usually used to but I’m game.
Below are some of the planning phases which include branding inspo, planning, strategy info, etc.
I also wanted to target a younger audience, one that would usually go to PLT (Pretty Little Thing) or ASOS (As Seen on Screen), Hence the name BFF (Best Fashion Finds).
Once the personas were in place (which I pulled out of a hat because I was working backwards for the purposes of this project), I then set to prototyping the app on paper and then mapping out user journeys.
With some foundational work in place, it was time to make it real and I headed to Adobe XD.
Since I was creating this hypothetical brand from scratch, I wanted to add some cursory details about the branding elements and the thought that went behind creating it.
Here’s how the final app looked. For a better look, you can view the interactive prototype at https://xd.adobe.com/view/62e22a6b-1555-4305-7b32-3d49655e8225-14d3/
Notes: I made this last year and now that I look back at it, I don’t particularly like the cover image for the app. It feels chunky and the background has a bit of a disconnect with the rest of the app. For me, however, that was a minor issue and one easily rectified.
Since the idea was to bring footfall to the brick and mortar store, the app gave you the ability to put items in cart for pickup. It didn't however have a delivery option. This was modelled after Primark’s website.
You could either locate items in the store down to the shelf number or collect it to a cart at your nearest store.
The images below show the process of making a purchase.
In these terribly pasted images below, you’re able to go through a store index. The idea is to set a store as your base, so all future transactions can occur there.
The app also allowed table bookings and advertised some leisure activities that the store had to offer.
This included a spa, a gaming room, a pet (and toddler) daycare, a general lounging space.
One feature I wanted to add next was that of a personal stylist. While this is a particularly common feature in larger stores, it lacks a personalisation element. Also, my target market is more involved in fashion trends. See above for Moschino and Supreme as inspo.
Users would have the ability to swipe through stylist profiles much like Tinder. They could see curations and match with the stylist that they like.
Once matched, they had the option of swiping through 20 images and shortlist 9 that best represent their style. Not only would this allow the stylist to prepare for their visit, but it would also make the user feel more involved in the decision and humanize the brand for them immediately.
The app would also have general rewards, vouchers, discounts and sneak peeks that only app users would be privy to.
Other than collaborations with celebrities, users would also be able to make coming to the store a social affair (I made this pre-covid) and much like Snapchat’s QR feature, they would be able to literally ‘Bring Their Bestie’, (Get it? BFF?) and enjoy a mutual 10% off. This could be availed either once a week or once a month. I haven’t decided yet. I’ll have to check their imaginary financials.
Hope you liked it and if you have any recommendations or comments, let me know.
