https://www.sofianeto.com/work daily 1.0 2019-11-19 https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/5beab8c240ec9a5c157b8467/1542109548291/Sofia-Neto_DBMS_news-page.gif Work To create curiosity, the photos on the news feed are shown only partially, and thus making the transition to the Article page a moment of discovery. https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/5beaba3f032be41f4813215b/1542109840615/Sofia-Neto_DBMS_designers-page.gif Work On the Designers page, I leveraged the animations into making it more engaging and interactive than just reading their names. This way, motivating the user to explore it more while at the same time learning about the different designers. https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/5beabd72352f537a54cb6027/1542110592339/DBMS+perspective+screens+mockup+V3.jpg Work https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/5be4c22040ec9acdccce638e/1541718676586/DBMS_Article-page_Dribbble-V6.gif Work On the Article page, a shop icon is always placed on the lower right corner of any photo that has a design piece the user can buy on the site. Once the user clicks on it, it directs to the product page. https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/5beb0e640ebbe854916ac035/1542131315001/DBMS+Site+map+%26+user+flow+v6.jpg Work On the left: sitemap. On the right: shop & check out user-flow exploration. https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/5be4a6304d7a9cd7d3a712fd/1541711451839/DBMS+moodboard-01.png Work Mood board for the website. https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/5bed92cf1ae6cfd3032f6087/1543438525721/Sofia+Neto+-+Gulf+Gas+%2B+Power+site+map+%26+user+flow.jpg Work On the notebook: sitemap exploration. On Top: user flow for a user (SME owner) arriving through direct traffic and with the goal to get a quote. On the post-it to the right: the first low fidelity sketch of the same user flow. https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/5bc89f47ec212d77f23720b2/1543438552820/Sofia+Neto+-+Gulf+Gas+%2B+Power+moodboard.jpg Work Mood-board for the website and platform. We focussed on a minimal and clean design, using heavy contrast between fonts, play with whitespace, line illustrations and graphic ways to visualise energy. https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/5bed95124d7a9cb49892f9ef/1543438540081/Sofia+Neto+-+Gulf+Gas+%2B+Power+wireframes.png Work Top row, left to right - Home page, History pave with vertical image, History pave with horizontal image. Middle row, left to right: Get Quote flow step 2, Get Quote flow step 3, Gulf Core platform Client Card, Gulf Core platform Client List. https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/5bd6f73c652dea6b530c52f4/1543438507563/Sofia+Neto+-+Gulf+Gas+%2B+Power+insights.png Work Some of the insights from our research, clustered into an affinity map. After clustering all the research and analysing it, we came up with our problem statements. https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/5bf427e1032be48ae7ae3b14/1543438677863/sofia-neto_gulf_home-page.gif Work The Home page is very minimal with a clear call to action, breaking away from the competitors cluttered sites. The gamification of the user experience promotes emotional engagement and creates a lasting impression on the user, making the interaction unique, more personalised and pleasurable. I truly believe that we should design with emotion in mind, because that is the strongest memory a user will have of their experience on the site: how they felt. https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/5bfdbe366d2a736600feea44/1543438659173/sofia-neto_gulf_history-page.gif Work For the History page, the concept was to use the transitions to emphasize moving through time - the years vertically and their moments horizontally. https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/5becbf8a88251bb3c9244110/1543438480126/Sofia+Neto+-+Gulf+Gas+%2B+Power+pages.jpg Work https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/5bfdbc37562fa730f5602765/1543438636956/sofia-neto_gulf_client-list.gif Work We first launched an MVP of the platform and afterwards kept on improving its user experience and interface - focussing on data visualisation and user friendliness, always making sure that the brand’s tone of voice translates even into the elements’ micro-animations. This is the improved Client List page, used by a broker to have an overview of their clients and corresponding contracts. The main goal of the design was to have specific things easy to identify with just a glance - like a contract coming to an end, payments overdue, or clients that only had gas or power to their contract. https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/5bf248cf1ae6cf7a695f7392/5bf5818321c67cd97033323b/1542816134585/Page+10+-+Icon+Buttons.jpg Work https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/5bf248cf1ae6cf7a695f7392/5bf58182575d1f4d0be8bf18/1542816133425/Page+9+-+Header.jpg Work https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/5bf248cf1ae6cf7a695f7392/5bf58182c2241b56be15658e/1542816133271/Page+8+-+Buttons.jpg Work https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/5bf248cf1ae6cf7a695f7392/5bf5818070a6ad3784656719/1542816132643/Page+7+-+Check+Box.jpg Work https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/5bf248cf1ae6cf7a695f7392/5bf5818088251b45476b47ce/1542816131971/Page+6+-+Select+Box.jpg Work https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/5bf248cf1ae6cf7a695f7392/5bf5817e4d7a9c127e76ee9b/1542816129854/Page+5+-+Input+Field+with+Icon.jpg Work https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/5bf248cf1ae6cf7a695f7392/5bf5817eb8a04541919b8af9/1542816129610/Page+4+-+Input+Field.jpg Work https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/5bf248cf1ae6cf7a695f7392/5bf5817dcd83662dc6c164b4/1542816128620/Page+3+-+Typography.jpg Work https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/5bf248cf1ae6cf7a695f7392/5bf5817b6d2a7333a510dac4/1542816127797/Page+2+-+Typography.jpg Work https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/5bf248cf1ae6cf7a695f7392/5bf5817b1ae6cf01e184a44e/1542816126468/Page+1+-+Colors.jpg Work https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/57d8069559cc681814c02008/1473775260406/ffa14-4.jpg Work https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/57d8e70fe6f2e1210955fa60/1473832733161/skate.jpg Work https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/57d8e75059cc68d0c2df7962/1473832788403/peak-7.jpg Work https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/57d8e949e3df2827d17ae4b0/1473833303450/icon-6.jpg Work https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/58c00ec0d2b8578f53088fad/1488981703893/despir-4.jpg Work https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/5bfeea60cd8366b89fdfd632/1543432808840/dbms.jpg Work https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/5bfef37c758d46816b49e16a/1543435141767/gulf+v2.jpg Work https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/5bfef441758d46816b49ee80/1543435336731/nike-4.jpg Work https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/5bfef623758d46816b4a163b/1543435811382/ Work https://www.sofianeto.com/font daily 0.75 2017-03-01 https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/57d6bc64b3db2b581c5bc0ad/1473690727986/buarcos.jpg Buarcos https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/57cbde6f9f7456813a22c3b0/57d6bc3ab3db2b581c5bbf02/1473690687864/buarcos.jpg Buarcos https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/57cbde6f9f7456813a22c3b0/57d51080e6f2e1b237bd007d/1473835387808/buarcos-font-2.jpg Buarcos Buarcos is my home town, it's a beautiful old fishing village in Portugal, located between the mountain and the sea. On the sides of the roads, you can sometimes see small shapes sprayed on rocks or walls... I never knew what they meant but always found them intriguing, like a hidden message. This font was designed inspired by those shapes. https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/57cbde6f9f7456813a22c3b0/57d782416b8f5b4daf5eea9d/1488373302416/buarcos-font-3.jpg Buarcos All credits to Sofia Neto https://www.sofianeto.com/der-berliner-mode-salon daily 0.75 2017-03-08 https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/58dbd21217bffcc0935f140f/1490801175763/icon-DBMS+3.jpg Der Berliner Mode Salon https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/58b43028bf629ae26db2a4e0/58b43050b3db2b9cf9b2d6d1/1488203870967/01+news+3.png Der Berliner Mode Salon https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/58b43028bf629ae26db2a4e0/58b4344a86e6c04706de9272/1488371412256/01+news+full.png Der Berliner Mode Salon https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/58b43028bf629ae26db2a4e0/58b4305029687f881c84d855/1488371412252/01+news+top+1.png Der Berliner Mode Salon https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/58b43028bf629ae26db2a4e0/58b4305a6b8f5b2e7cced88d/1488371412253/01+news+top+2.png Der Berliner Mode Salon To merge the newsfeed smoothly with the E-commerce, a "shop" icon overlays in the bottom right corner or every photo that has a product which the user could directly buy on the webshop. https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/58b43028bf629ae26db2a4e0/58b434579de4bb80d4879ced/1488371412388/02+article+full.png Der Berliner Mode Salon https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/58b43028bf629ae26db2a4e0/58b4306dff7c508925e91b0c/1488371412400/02+article+top+1.png Der Berliner Mode Salon https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/58b43028bf629ae26db2a4e0/58b439a3725e252ebd7d457c/1488371412400/02+article+top+2.png Der Berliner Mode Salon https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/58b43028bf629ae26db2a4e0/58b43073be65940cc4899803/1488371412401/02+article+top+3.png Der Berliner Mode Salon https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/58b43028bf629ae26db2a4e0/58b43078d2b8571f0fd5d47a/1488984087289/03+about+top.png Der Berliner Mode Salon - Credits UI, UX and art direction - Sofia Neto lllustration placeholder - Ayumi Takahashi Photography - taken from the brand's websites Client - Socialrise for Der Berliner Mode Salon https://www.sofianeto.com/about daily 0.75 2020-01-17 https://static1.squarespace.com/static/53c26b76e4b0b8673328aed6/t/57d79fc33e00be04a7778fb0/1473748961787/SofiaNeto About https://www.sofianeto.com/contact daily 0.75 2019-11-19 https://www.sofianeto.com/press daily 0.75 2019-11-19