Amy Goropoulos
Amy Goropoulos | Visual & Experience Designer
vinivalfront.jpg

Vin-ival Mobile App

Vinival - Mobile App

Vin-ival is a mobile app that serves as a companion to Wine Festivals, providing an enhanced experience for attendees, vendors and event coordinators. 
This project was  done in coordination with Springboard UX Design Workshop and pulled research done at Journal Multimedia Wine Events.

 
    

 

 

goals and problems to solve

Attending a wine festival can often times can be confusing (add in a few drinks and the effect is let's say, "heightened"). When being exposed to a wide range of new products, navigation and extracting and retaining pertinent information can be a troublesome, detracting from what should be an enjoyable experience. Through research conducted with attendees, vendors and organizers, several goals became apparent:

  • Offer an easily navigable interactive map of the festival
  • Allow for attendees to locate, save and make notes on wines they wish to taste/have tasted
  • Provide a forum for organizers to communicate information about the event
  • Set up an easy way to purchase wine using the app
  • Facilitate vendor communications with attendees

USER FLOWS

taskboard.jpg

Deciding on the tasks that each user would utilize on the site was best visualized through the use of sticky notes (who doesn't love these things?). Getting the information in front of me allowed for quick changes, page organization, continuing iteration and kept a check on any tendency to add in too many features.  


User flows

userflow4.jpg

SITE MAP

sitemap1.jpg

 

Another tool I used for organization and visualization was the site map. The maps went through several rounds of changes, as features were added or dropped and user research lead the way through and around different pain points. Feedback from users also altered the way the site was organized


userflow4.jpg

Tracing each step that a user would or could use to achieve their objective gave me a clear idea of what steps could be streamlined and help pick out places that could become trouble spots. Finding the easiest way to navigate the user around these issues became a focus and help to guide the user flows which would help structure the functionality of the experience.

 

WIREFRAMES

wireframes.jpg

 

Sketch first, always. I get an idea of sizing, placement and flow. I used Balsamiq for the more polished wireframes brought a nice presentation to this step. This style of wireframe production allows clients to focus on the functionality of the layout instead of focusing on specifics like font, color and art assets. 

Sketching is an important part of my design process.
I love the simple act of putting pencil on paper.

STYLE Guides


Mockups

Digital mockups were created using Adobe Illustrator.