{"id":226,"date":"2024-05-13T12:14:33","date_gmt":"2024-05-13T12:14:33","guid":{"rendered":"https:\/\/nua-ux.design\/hashry-andri\/blog\/?p=226"},"modified":"2024-05-13T16:02:42","modified_gmt":"2024-05-13T16:02:42","slug":"collaborative-project-virginwines-desktop-and-mobile-redesign","status":"publish","type":"post","link":"https:\/\/nua-ux.design\/hashry-andri\/blog\/uncategorized\/collaborative-project-virginwines-desktop-and-mobile-redesign\/","title":{"rendered":"Collaborative Project : VirginWines (Desktop and Mobile redesign)"},"content":{"rendered":"\n

Wine Events (Desktop)<\/h1>\n\n\n\n

My main role in this part of project is interactivity and dynamic motion of the page. However, I will still have to sketch an idea of the page so that we could combine our design into one. I have to sketch an “event landing” page but we decided to proceed with Dom’s design. Although, Maisy and i made some redesign like remove a few bits and reorganize the details on the page.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

In “What to expect” i decided to change the colour that suits with theme of the page (depending on the majority colour used on the page) and I’ve added subtle animation on the icons. I got this idea from NakedWines where they have slight animation of the bottles moving when hover over it.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

For the individual events page me and Dom made our own design and we combine our ideas together. I added a feature on the map where users are able to see the building of the event held by tapping the pin. (pin with “tap to see building”). And ive added a CTA that leads directly to google maps.I redesign the event details for other location to make it seem more organize, noticeable and doesn’t take lots of space.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

After tapping “tap to see building”<\/em><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

About us (Desktop)<\/h1>\n\n\n\n

As for about us page, Maisy did the design while I was focusing on adding motion on the big text. I tried to apply each words with different motion that can relate to the text. I also did some research and some of my animations were inspired from the site webflow. Link to the page – https:\/\/webflow.com\/made-in-webflow\/text-animation<\/a><\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Lastly, I add red highlight as well on the nav bar so user wont be confuse which page they’re on. Meanwhile, if we hover over the nav it will change into red with an underline red colour.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Wine Events (Mobile)<\/h1>\n\n\n\n

Similar to desktop, I redesign Dom’s initial just by minimizing each segment of the page to make it more shorter. I implement the map feature from the desktop as well for consistency. <\/p>\n\n\n\n

For individual events selection,although my idea was scrap off but my idea was to make it slightly bigger because there are some users have their left as as dominant. So instead of making the button on the left, i align it center, bigger, easier for users to tap. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

Side Navigation Bar (Mobile)<\/h1>\n\n\n\n

On desktop, a new sub navigation was added within the wine events page that lets users to read reviews, FAQs about the event and individual events. We just add it below the original nav bar and make it stick together with it<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

However, since mobile has small screen there is no possible spot to place our new nav, so we decided to add an assistive touch with a hamburger icon menu that functions similar like the VirginWines menu. Tapping the hamburger icon will make a special side menu bar appear sliding in from the left. The side bar only contains pages that are related with wine events so users know they’re only within the area of wine events page. I retain the design of the bar as well since it only appear in this specific page, I reckon not to have any unique design on the menu.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Dynamic Motion Text <\/h1>\n\n\n\n

As I said before, my main role was to apply motion on the text or any features that needed to be animate. It was actually quite easy as long as i understand how to play with the settings. Basically what i did was set “mouse enter” on each words that requires the animation and set all effects to smart animate. All components were done by me, words like “Grape” and “Passion” was quite hard since i have to animate each letter one by one and i need to make it into more than one variants.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Prototype (Desktop and Mobile)<\/h1>\n\n\n\n

Once the design are fixed and the components are done. I can move on to my final task which is prototyping the site to make it function and test the site on few people to see if any improvements needed.<\/p>\n\n\n\n

<\/figure>\n","protected":false},"excerpt":{"rendered":"

Wine Events (Desktop) My main role in this part of project is interactivity and dynamic motion of the page. However, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/nua-ux.design\/hashry-andri\/blog\/wp-json\/wp\/v2\/posts\/226"}],"collection":[{"href":"https:\/\/nua-ux.design\/hashry-andri\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nua-ux.design\/hashry-andri\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nua-ux.design\/hashry-andri\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nua-ux.design\/hashry-andri\/blog\/wp-json\/wp\/v2\/comments?post=226"}],"version-history":[{"count":5,"href":"https:\/\/nua-ux.design\/hashry-andri\/blog\/wp-json\/wp\/v2\/posts\/226\/revisions"}],"predecessor-version":[{"id":256,"href":"https:\/\/nua-ux.design\/hashry-andri\/blog\/wp-json\/wp\/v2\/posts\/226\/revisions\/256"}],"wp:attachment":[{"href":"https:\/\/nua-ux.design\/hashry-andri\/blog\/wp-json\/wp\/v2\/media?parent=226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nua-ux.design\/hashry-andri\/blog\/wp-json\/wp\/v2\/categories?post=226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nua-ux.design\/hashry-andri\/blog\/wp-json\/wp\/v2\/tags?post=226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}