Oro Freeport
This was a re-design project for a luxury watch and jewellery brand step into a new frontier and industry when it comes to being a UX & UI Designer. Up until this point I have mainly worked on static landing pages and branding websites, where the function is simply to convey information. E-Commerce was a huge leap forward, with new challenges, expanding the field of what I have to consider to optimise the user experience.
![Oro-MKUP #1@2x.png](https://static.wixstatic.com/media/d5483e_9472de1f6752497c9f086bef202aab34~mv2.png/v1/fill/w_205,h_401,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Oro-MKUP%20%231%402x.png)
The Client
A Europe based luxury watch and jewellery company, who sought to improve their e-commerce shopping experience to revitalise the brand. The company. Their brand has a long history being an independent family business, where the next generation is looking to modernise the brand image and how they deliver their products.
![1581611650991.png](https://static.wixstatic.com/media/d5483e_5f0289b8e36b42b19e9d3a2471e0e3c3~mv2.png/v1/fill/w_205,h_205,al_c,lg_1,q_85,enc_auto/1581611650991.png)
Research
In order to empathise and understand the target users, I conducted a Google Survey and to find out what the typical e-Commerce concerns are amongst a broader population. The key thing is to identify pain points, goals to work towards constructing a User Persona that will kickstart our ideating process.
![humphrey-muleba-_9nbhGj6WX4-unsplash.jpg](https://static.wixstatic.com/media/d5483e_365d75696f894b1bb113fbc04c0979fd~mv2.jpg/v1/crop/x_1004,y_251,w_1985,h_1941/fill/w_174,h_170,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/humphrey-muleba-_9nbhGj6WX4-unsplash.jpg)
Veronica Sam
Age 28
Web Developer
Bio
Veronica Sam is 28 year old a watch and jewellery enthusiast who works as a Web Developer in Vancouver, Canada. She often browses online for something to add to her collection as she has a busy work schedule and finds it inconvenient to shop in person. Therefore, she prefers her user experience to be frictionless, efficient and stress-free.
Pain points
Goals & Needs
Lost shipment in the pass led to mistrust in
e-commerce platforms.
Lack of variety of secured payment methods.
Uncertain of the sizes of products when shopping online.
Efficiently find products that meets her needs and fits her specifications
Ensured security of payment information
To receive orders on time and monitor shipment process
From the survey results, I can see that convenience was huge key reason for consumers to shop online, however it lacked the option for people to try on their products before purchasing. Shipping logistics and cost is one of the tedious aspects for shopping online, both keeping track of the total cost and giving the consumers transparency on the progress, are key concerns for the user.
![Affinity Diagram.png](https://static.wixstatic.com/media/d5483e_bd0768d63d484749a621c557e06d01f9~mv2.png/v1/fill/w_979,h_655,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Affinity%20Diagram.png)
Ideate
I was responsible for designing the customer profile section of the site, this is where users get to control, adjust their personal information and account security setting and most importantly, keep track of their purchases and shipments. To address one of the major pain points of our User Persona, I again prioritised clarity and simplicity.
1. Personal Information
![Account page Low fi (Mobile).png](https://static.wixstatic.com/media/d5483e_28fbd135ec3f46c7b31ca00f7dd7e07a~mv2.png/v1/crop/x_0,y_0,w_372,h_881/fill/w_209,h_495,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Account%20page%20Low%20fi%20(Mobile).png)
2. Order History
![Account Page Low fi 2 (Mobile).png](https://static.wixstatic.com/media/d5483e_c3a4bd7200bc4c29be94d875cd97f6b8~mv2.png/v1/crop/x_0,y_0,w_375,h_723/fill/w_205,h_395,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Account%20Page%20Low%20fi%202%20(Mobile).png)
3. Payment Information
![Account Page 3 (Mobile).png](https://static.wixstatic.com/media/d5483e_24b35ff6837f499b896658ab9dd8d6c8~mv2.png/v1/crop/x_0,y_0,w_373,h_623/fill/w_206,h_344,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Account%20Page%203%20(Mobile).png)
4. Account Security
![Account Page 4 (Mobile).png](https://static.wixstatic.com/media/d5483e_610651cbfaf542c08ea3ad8f14b813a0~mv2.png/v1/crop/x_0,y_2,w_375,h_638/fill/w_177,h_301,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Account%20Page%204%20(Mobile).png)
Above are the initial sketches of the Account Page wireframes, I referenced the layout and the rough information structure of the researched sites. My key design focus is always clarity and mindfulness of whitespacing, this originates from my personal experience as a user with sites that are overly clustered and lack in breathing room for the eyes. These sketches are essential for me to block out the information structure, as well as to forming the layout of key flows, before further iterating the designs of the individual pages.
Prototyping
Personal Information
This section concerns the delivery and billing address of the user. My task was to make adding, editing and removing information as easy as possible.
The Miller's law suggests that the average capacity for the human working memory is able to retain up to 7 (±2) items. This is known as our cognitive load, where in order to make it intuitive and ensuring the users remember how to adjust their persona information in the future, I made sure there are no more than 7 components that the users have to interact with to achieve their goal.
![Oro-MKUP-My-Ordersgif.gif](https://static.wixstatic.com/media/d5483e_218b8d7f353f4dc3b1a2529b1af8fe44~mv2.gif)
![ORO-MKUP - Blank (no shdw)@2x.png](https://static.wixstatic.com/media/d5483e_f946e418653445e88e52baebbd29f00b~mv2.png/v1/fill/w_206,h_426,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/ORO-MKUP%20-%20Blank%20(no%20shdw)%402x.png)
Payment Information
E-commerce has become a definitive example of shopping with convenience, one of the recent developments are the variety of available payment options. My client wanted to allow the users to have the choice and control over managing their preferred payment options.
The approach to this page is similar to the "My Orders" section, it is staying consistent to my preference for streamlined and simplistic solutions to problems that arises stress and concerns such as the handling of payment information.
![ORO-MKUP-Acc-Secu.gif](https://static.wixstatic.com/media/d5483e_cc247a47621e463eac852852dc341bee~mv2.gif)
![ORO-MKUP - Blank (no shdw)@2x.png](https://static.wixstatic.com/media/d5483e_f946e418653445e88e52baebbd29f00b~mv2.png/v1/fill/w_206,h_426,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/ORO-MKUP%20-%20Blank%20(no%20shdw)%402x.png)
![imageedit_1_7899941907.gif](https://static.wixstatic.com/media/d5483e_2c93408effcf4749812dc57ffc4af1d3~mv2.gif)
![ORO-MKUP - Blank (no shdw)@2x.png](https://static.wixstatic.com/media/d5483e_f946e418653445e88e52baebbd29f00b~mv2.png/v1/fill/w_206,h_426,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/ORO-MKUP%20-%20Blank%20(no%20shdw)%402x.png)
My Orders
One of the main pain points was the ability and ease of tracking shipments and orders. Losing track of your order can cause worry from consumers, often anxiety inducing, especially when we are dealing with high pricing items.
To make the process as frictionless as possible I kept the Hick's Law in mind, where it suggests that users makes decision quicker when there are few options. I interpreted this as making a task easier by minimising excessive choices that the user has to make in order to carry out a function.
This page consist of 2 main components, both clearly indicated by the "Active Orders" and "Order History" headings, making it easy to access and divide orders that have already arrived, recent orders and ones that are on their way.
![ORO-MKUP-Payment.gif](https://static.wixstatic.com/media/d5483e_3e6d27ceddd14256a61bfec0d6a14a49~mv2.gif)
![ORO-MKUP - Blank (no shdw)@2x.png](https://static.wixstatic.com/media/d5483e_f946e418653445e88e52baebbd29f00b~mv2.png/v1/fill/w_206,h_426,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/ORO-MKUP%20-%20Blank%20(no%20shdw)%402x.png)
Account
Security
Giving users and consumers the control and autonomy over their relationship with brands is an ethical best practice. While this section of the user flow was in the end not completed, it is included to illustrate what I consider a complete user flow to be to resolve my particular design problem.
I utilised contrast and juxtaposition to highlight "No, keep my account" to decrease the chance the users would accidentally remove their account, but also as a way to persuade users to reconsider.
Conclusion
Although my design experience was cut short, this served as a great starting point for how I approach the design process. I managed to envision a near-complete user flow despite the restriction, develop my design fundamental and technical skills to encourage myself to propel forward and seek out further opportunities.
This project gave me a sneak peek on how Psychology and UX design can work hand-in-hand together, combining my interest and academic background to help solve contemporary problems for businesses. I have also been introduced to the typical practices of e-commerce sites through understanding the expectations of the clients and research to empathise for the users in terms of what they look for in a good design solution.