ROLE: UX & UI DESIGNER
TIMEFRAME: 10 DAYS UX IN A TEAM + 10 DAYS UI INDIVIDUALLY
TOOLS: PEN&PAPER, POST-ITS, IDEAS, NOTION, SKETCH, INVISION, FLINTO
BRIEF: IMPROVE A DIGITAL EXPERIENCE FOR NATURALIA AND ADD A DISTINGUISHING FEATURE
July, 2018
A PERSONAL SHOPPER FOR YOUR NATURALIA E-GROCERIES
ux challenge
Online market and business research concluded that Naturalia has a good brand awareness and a good offline shopping experience. However an opportunity in digital still exists. Our starting challenge was to focus on improving the user experience on their website by easing the usability of e-shopping.
However, the User Research showed us that people were not even aware the e-shop existed. The underlying problem was much different: People were open to shopping online but since they wanted to feel and see the products they buy (especially the fresh ones) e-grocery shopping was not even an option for them.
UX SOLUTION
The solution we came up with was simply to put a name on the person who was preparing the grocery bag at the store: A Personal Shopper. This way we would create a more trustworthy online shopping experience. Users would shop online and know exactly what’s going on until the grocery bag arrives at their door. If a product is not of good quality they would know who to warn. Or in a better scenario, if everything goes well they could simply put a good review on the website about that particular Personal Shopper. The other way around, Naturalia employees would know for whom they are preparing the bag for and would be more attentive.
THE PROCESS
Affinity Map: We used this tool to synthesize our User Research gatherings and it made one design opportunity so obvious: people wanted to see, touch, smell their fresh products before buying! 💡
STORYBOARDING
![[Naturalia] Storyboard.jpeg](https://images.squarespace-cdn.com/content/v1/5b75466c7e3c3a0b14b3c47e/1539541199167-GCO7HI1NYG50QFRGUIVQ/%5BNaturalia%5D+Storyboard.jpeg)
We used the storyboarding method to visualize exactly if our solution helps our persona to solve her pain point.
The storyboard shows that Personal Shopper increases her trust towards the e-groceries experience and also saves her time which is very important for a working mom.
She is satisfied with the quality of the products she ordered and also the timing of the delivery just before the meal preparation.
LOW FIDELITY WIREFRAME + user tests
This time to confirm the Personal Shopper idea with users we made a low fidelity paper prototype and tested it. Two sets of user tests and iterations were done. The first one concerned mostly cosmetic alterations such as making the search bar more visible, emphasizing the main feature on the homepage, etc.
The alterations were successful however on the second user testing phase the timing for the Personal Shopper selection was confusing for the user (selection was possible on the product page). Here we slightly changed the user flow and put the selection of Personal Shopper after basket confirmation.
mid fidelity wireframe
Mid Fidelity Wireframe for the ‘searching for and buying a kiwi’ user flow.
MOOD BOARD
style tile
My mood board contained mostly red and green to reflect the natural, fresh and organic feeling of the brand.
Whole Foods website was also a good digital inspiration for me as their welcoming page has a very fresh feeling with lots of whitespace.
I chose Avenir as the only typeface on the website because it was a sans serif hence it’s easy to read on digital, also because of its modern and optically corrected geometric look. I believed this typography would reflect better the natural and fresh feeling of the brand. I used rectangular buttons and other UI elements with slightly rounded corners to be in harmony with Naturalia’s logo.
atomic design
DESIRABILITY TESTS
i had two versions of high-fidelity wireframes. I had a user testing session in between where I let my users test the prototype on inVision and then asked them to tell me how they felt about the UI of the product. I basically gave them a list of 80 adjectives, wanted them to choose 5, and give one-sentence explanation for the one emotion they felt the strongest about.
first test results
I had most of these adjectives from my users, or similar ones but unfortunately “fresh” and “trustworthy” were missing.
I had a few more positive emotions such as inviting, intuitive, creative and helpful. And luckily only 2 negative ones; ordinary and slow.
new mood board
An iteration was necessary on my UI design to reflect these emotions. For this, I created a new mood board. I had a visual mood board of mainly digital products for “fresh”. For the emotion “trustworthiness” I decided to focus on wordings and customer testimonials.
the Outcome
LEARNINGS
I am happy to have taken the time to pretty up things for my 2nd version. Because throughout my UX studies I learned to focus on the problem, rather than the solution. Although I could think that I was done with my project after the first set of tests (because it was working and had already created enough positive emotions) I still looked for solutions to translate our research’s key values.
APPENDIX
Read about the full process of this project on my medium posts; here for the UX and here for the UI part.