Vente

Client: Vente (mock client)

Role: UI/UX designer

 

About the project 

Todays consumers have endless options of events, classes, group activities, etc. to choose from and yet it is still a challenge to discover things that align with their hobbies and interests.

 

Group 17@2x

The Challenge

Design the branding and visual layout of a mobile app that encourages users to search for events and activities based on their interests.

 Who's this for?

Millenials who want to have fun, stay active and keep up with current events.

Screen Shot 2019-08-30 at 12.15.34 PM
Screen Shot 2019-08-30 at 12.40.16 PM

A closer look at the process

This was my second project at the Flatiron school and I continued to gain more knowledge and insights into the methodologies of user centered design. I was constantly asking myself why. Why was this typeface suitable for this app? Why would I use this layout? Why was the aesthetic so important for this part of the page? By considering all of these functions I began to piece together how I might achieve the goals for my design. 

Through research and some rational thinking I laid the groundwork for the users experience and integrated function and visual aesthetics and tested my product with a few users. Below is a summary of my process.

Through research and some rational thinking I laid the groundwork for the users experience and integrated function and visual aesthetics and tested my product with a few users. Below is a summary of my process.

Research

Understanding how other companies in the events space are presenting their brand identity and UI characteristics was the first step to laying the groundwork for my inspiration. I wanted to know what was out there, what was working, what was not really working and if people were responding to certain patterns or visual characteristics.

 After I got an overview understanding of what competitors were doing. the important part was to pivot and to try to understand how I might differentiate my design to give it an advantage and carve out an identity as a brand.

Competition@2x

Opportunities

Tone UI
Color Convienece

Ideation

Style Exploration

The style direction that I moved forward with had youthfulness to it because the two personas that I was designing for were young people who would appreciate connecting with a hip up to date resource.

I took the personas frustrations of feeling overwhelmed as an opportunity to make sure that all of the information that I was using was simple and easy to digest. Finally the personas were both very active people and went out a lot so I made the style inviting, to encourage interaction with the app. 

Moodboard

Mood3_d2

Sketching style tiles

style 1

Style tile

Style Tile 3 _D3

Brand Exploration

The final logo that I iterated upon included a simple arc or sickle moon shape which represents an event tent or hall where people go to attend events. I ensured that it would scale down to a small icon and scale up to a large logo without becoming distorted. 

Towards the end I added a heavy gradient but after receiving feedback, I toned down the shades to keep it simple, clean and timeless. Forging the middle ground for many of these parameters and then injecting just a little pizzazz seems to be a good strategy for logo design. 

C11
Asset 16@2x
Asset 27@3x

Wireframe Evaluation 

The main changes I suggested were to improve the events page and add more details including descriptions, social media/web links, a map of the location and some related events to encourage the user to explore.

Designing empty states and popups would help users feel better about using the app, so that was also considered at this time. There were some buttons that I suggested we revise the text to give them more actionable words to get users excited and to create a tone of voice for the app.

IMG_6725 2

Micro Interactions

Developing and designing micro-interactions around the personas needs as well as the project objectives is a lot of small functions to keep in balance.

I struggled with going over the top and creating entirely new features. While keeping in mind the user experience goals of the app, I refined the designs and came up with two ideas that would enhance the app and provide the look and feel that I was going for.

Developing and designing micro-interactions around the personas needs as well as the project objectives is a lot of small functions to keep in balance.

I struggled with going over the top and creating entirely new features. While keeping in mind the user experience goals of the app, I refined the designs and came up with two ideas that would enhance the app and provide the look and feel that I was going for.

Group 4@2x
Group 5@2x

By designing the share buttons to drop down from the top navigation in a circular manner, I was able to highlight the users ability to share events. I designed this to meet our personas goals. Our personas wanted to create a community around the events they attended and of course that would include inviting friends to join them.

 

Creating a tone for the app that engages the user offline through notifications of information leading up to events helps build trust and provides a comfort for an experience. I developed this microinteraction from the personas motivations and goals to keep up to date with events.

High Fidelity Mockups 

High Fidelity Mockups 

Onboarding Flow

Many event apps included an extensive onboarding flow, so I wanted to make this process easy and fun for Vente. I utilized large round buttons that were easy to select options and modals that primed the user for what options were to come.

Onboarding Flow

Many event apps included an extensive onboarding flow, so I wanted to make this process easy and fun for Vente. I utilized large round buttons that were easy to select options and modals that primed the user for what options were to come.

vente_onboarding

Bottom Navigation

A soft warm gradient was used to appeal to the millennial user demographic and I used two shades of blue for the text to compliment it. I wanted the app to feel smooth and fun to navigate so I utilized horizontal swimlanes to give users the ability to scroll through options quickly and tabs to separate times and show what events were happening.

vente bottom nav@2x

Event Page Flow

I made the primary CTA’s the soft gradient to remain cohesive with the other parts of the app, and I made the secondary CTA’s blue to signal that their function was differentiated. Providing a map helps users visualize the exact location of an event, and profile photos indicate which of their friends are attending.

vente event page@2x (1)

Prototype 

User Testing

2 participants, ages 23 and 28

Key findings: 

According to the first round of user testing there was a brand disconnect between the logo and the rest of the aesthetic of the app. It was especially prominent on the splash screen. This would be easily fixed with further iterations and re examining the brand identity. 

 

 

Clay White@2x

Improving the hierarchy on the search page to draw more attention to the search bar as opposed to highlighted events or groups came up in the user testing. One user noted that this was a search page but felt like a home page. Prioritizing the search aspect would be important to change. 



Users wanted a better way to find events based on the date of the event, so integrating a calendar or encouraging search by day function is a strong recommendation.

Marketing Site

I designed an accompanying responsive marketing site that drives users to download the app. I focussed on creating buy in from the user by telling a convincing story of the brand and the advantages it offers. 

Marketing Site

I designed an accompanying responsive marketing site that drives users to download the app. I focussed on creating buy in from the user by telling a convincing story of the brand and the advantages it offers. 

I leveraged typography, composition, exciting copy and an aesthetic that reflects the app to create a value proposition to drive the user to download the app. 

I leveraged typography, composition, exciting copy and an aesthetic that reflects the app to create a value proposition to drive the user to download the app. 

Desktop Draft 2 1x

Next Steps 

Obviously the app needed to be tested a lot more so I would certainly generate real events and have users buy tickets to these events and observe what areas of the process could be improved. There were large portions of the app that had not been thought out fully including adding events from a coordinators perspective and what the payment flow would look like, and therefore further UX development would fully shape the app. 


Aesthetic components could be improved upon including tightening up the cohesiveness of different elements, aligning text and prioritizing whitespace throughout the app for a cleaner look.

JULIAN POPLAWSKI

JULIAN POPLAWSKI

JULIAN POPLAWSKI

JULIAN POPLAWSKI