.jpg)
E-Commerce App
About
This project is part of Figma UI/UX Design Essentials held by a design course provider, Bring Your Own Laptop.
​
Tools Used
Figma, Photoshop
​
Background
Based on the Design Brief Generator, I was tasked to design an app selling cameras to a specific target audience.
1. PROJECT BRIEF
"Your ideal customers is a 70 year old man named, Graham, who is married, but with no children. They have a doctoral degree and own a small business. Graham lives in Singapore, is somewhat familiar with your product and is constantly on the go, commuting/traveling."
PERSONA
TASK & USER FLOW
Based on the task flow given in the project brief, I established the user flow that the user will take as part of his task scenario to find and purchase a camera model, "Camera Four" on my app called, "Shashin Camera".
2. PROTOTYPING
LOW FIDELITY
HOME
PRODUCT
CHECKOUT
CONFIRMATION
HIGH FIDELITY
HOME
PRODUCT
CART
PAYMENT
CONFIRMATION
I chose this particular colour theme as I wanted something fun and vibrant.
The message to the user is that old age is no barrier to pursuing your hobby in photography.
​
Home
I chose a picture of an elderly gentleman holding the product to reflect the target audience of 70 year old business owners.​
​
Product
I chose pictures of small cameras as target users are always on the go and having such handy cameras are ideal.
​
Cart
Unlike in the lo-fi wireframe, the payment option is moved to its own "payment page".
This creates more space, gives less distraction and avoid confusion with too many info.
Payment
The different types of colours used for the payment page is to indicate the status of the fill up bar.
​
​​
​
​
​
​
​
​
​
​
​
Confirmation
There is an animation of a camera going into a box as it slides away out of the frame to tell user that their order is on the way!
​
ITERATIONS
Based on the feedbacks obtained from fellow course mates, several iterations were made.
HOME
PRODUCT
CART
PAYMENT
CONFIRMATION
All Pages
-
Top menu bar is brought down to the bottom for easier access
-
Standardised all CTA buttons by using the same size for all
-
CTA buttons will change colour when hovering over them
Product
-
Include heading title for product page for users to know where they are
-
Include clear CTA buttons,"Add to Cart"
-
If you notice, "Camera Three" is hidden to show that it's scrollable
Cart
-
Enlarge fonts for total amount payable
Payment
-
Add mode of payments on top
-
Include 'I' under CVC for user to know what it is
-
Include 'save card details' option for future purchases
-
Widen vertical spacing in-between fill up bars
Confirmation
-
Change colour of box to fit the colour style
-
Home menu will appear when box has move out of the frame
SHASHIN CAMERA APP
Your task is to search for "Camera Four" and buy it.
*You do not have to fill in the details in payment page.
3. STYLES
SELF-REFLECTION
The first thing I did was to focus on the functions and placements, like what options and information will be available, where the buttons and images will be placed, and the order of the pages to ensure a smooth flow and seamless transaction for the users.
Once the process is fixed, the next focus was on the visual aspects like choosing what theme, colors, shapes and sizes.
What images to use and how best to present them? So this is where I put my creativity to good use without being too creative.
As the goal is to make it a pleasant experience for users to understand clearly what they are supposed to do and where to get the information they require without any complications and confusion.
I have to make sure that the CTA buttons are clearly shown, the page titles clearly labelled, nice but readable fonts are used, enlarge them where necessary, nothing obstruct the wordings and images of the products.
An app can be very practical but plain and it can be very colorful but distracting.
So there is a delicate balance between functionality and creativity.
This is my first time using Figma, and it’s much better and useful than using Adobe Illustrator in designing an app or website.
I know that in reality, there will be more iterations and versions due to constant reviews with stakeholders.
Because design is a continuous improvement process in making things better.
