VENTE
Prototyping UX/UI Design Research Branding Wireframing
The local scene is experiencing an overload of shareable information. Today’s consumers are over saturated with local events, meet-ups, and group activities. Despite the endless sea of happenings, people continue their struggle to find activities that align with their personal interests.
1 Month
Designer
Background
VENTE is a social and event app targeted for gamers to find conventions, esports events, and social groups. I started with a vague brief and wireframes to work with as a starting point.
The Problem
![EVO-Evolution-Championship-Series (1).jp](https://static.wixstatic.com/media/ce99ac_3937eb9c6aff4bdcb4d690110b9e8085~mv2.jpg/v1/fill/w_519,h_260,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/EVO-Evolution-Championship-Series%20(1)_jp.jpg)
I was to make a fitting visual design for the niche I was designing for. I wanted to make a familiar and appealing aesthetic for the gaming community based on the trends I would find in the space
![Screen Shot 2020-12-04 at 4.17.12 PM.png](https://static.wixstatic.com/media/ce99ac_46ca5aaebc0d4e21bbd9dfb8fe006655~mv2.png/v1/crop/x_0,y_0,w_1580,h_288/fill/w_980,h_178,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Screen%20Shot%202020-12-04%20at%204_17_12%20PM.png)
The Process
Exploring Existing Products
To draw some inspiration and learn about what was out there already, I began doing a competitive analysis. I reviewed traditional event apps and some gamer-focused social apps, as my concept would be merging these two categories. From this, I took note of some interesting trends. The first major thing I noticed was that almost all the gaming apps were dark mode by default. I thought this was very fitting for the culture and was unique to this category. I also noticed these apps were incorporating some sort of badge and achievement system, and it resonated well with the gamer audience.
![unnamed_edited.png](https://static.wixstatic.com/media/ce99ac_711e30ef21f54ee997bdf72f02bd8703~mv2.png/v1/fill/w_510,h_171,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/unnamed_edited.png)
Next, I took a closer look at traditional event apps, focusing on usability. The first thing I recognized is cards were a prevalent pattern in this category, and it was a great way to display info at a glance. This is because events can best be shown by photographs that capture the excitement and environment of being at one. In addition, a lot of these apps followed the trend of having one signature brand color to draw the user to important buttons or tasks on each page. This worked well to keep the user moving quickly through simple screens and light functionality.
![unnamed (47).png](https://static.wixstatic.com/media/ce99ac_c9dd43940abe414aba33c1218ac1bb74~mv2.png/v1/fill/w_291,h_125,al_c,lg_1,q_85,enc_auto/unnamed%20(47).png)
![unnamed (48).png](https://static.wixstatic.com/media/ce99ac_8cff5235693549699c8dbf88d7c186fe~mv2.png/v1/fill/w_260,h_80,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/unnamed%20(48).png)
![unnamed (46).png](https://static.wixstatic.com/media/ce99ac_7f757c2e9bb142d69a9aa3c943c2a750~mv2.png/v1/fill/w_250,h_286,al_c,q_85,enc_auto/unnamed%20(46).png)
Drawing Inspiration & First Designs
To arrive at a design direction I explored a few different styles by creating mood boards and corresponding style tiles. I created one representative of fun and playfulness, one that was sleek and alluded to the competitive side of gaming, and one that was futuristic with a gaming feeling art style. I ended up choosing the futuristic tile as I felt it was aesthetically pleasing and fit the niche the most.
![unnamed (55)](https://static.wixstatic.com/media/ce99ac_1fdf4748ceaa4395b7cb9d46a5b0c41b~mv2.png/v1/fill/w_980,h_551,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/ce99ac_1fdf4748ceaa4395b7cb9d46a5b0c41b~mv2.png)
![unnamed (56)](https://static.wixstatic.com/media/ce99ac_6672bbd03a6a4531baaf75499f2766e4~mv2.png/v1/fill/w_980,h_551,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/ce99ac_6672bbd03a6a4531baaf75499f2766e4~mv2.png)
![unnamed (52)](https://static.wixstatic.com/media/ce99ac_27713388a4e64ddfadbdd5642040b1cf~mv2.png/v1/fill/w_980,h_551,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/ce99ac_27713388a4e64ddfadbdd5642040b1cf~mv2.png)
Professional, Clear, Athletic
Futuristic, Vibrant, Gaming
Inviting, Playful, Personal
![unnamed (53)](https://static.wixstatic.com/media/ce99ac_364831e4615f46fc9bf5b845a11faf31~mv2.png/v1/fill/w_980,h_658,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/ce99ac_364831e4615f46fc9bf5b845a11faf31~mv2.png)
![unnamed (54)](https://static.wixstatic.com/media/ce99ac_c899ac25acdc4044a563c37484ec5899~mv2.png/v1/fill/w_980,h_644,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/ce99ac_c899ac25acdc4044a563c37484ec5899~mv2.png)
![unnamed (51)](https://static.wixstatic.com/media/ce99ac_ecd541305c1e4be2b55853b2265e9038~mv2.png/v1/fill/w_980,h_787,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/ce99ac_ecd541305c1e4be2b55853b2265e9038~mv2.png)
Click to expand
Creating a logo
Following this, I created a logo for the app. I made a combination mark concept, that was aiming to fit in with the gaming aesthetic and capture the energy of events. I started with a person icon and the final version transformed into something more abstract to represent hands in the air and allude to the lighting and energy of an esports event.
![unnamed (57).png](https://static.wixstatic.com/media/ce99ac_1814c261aeb34364b009f24b2370b935~mv2.png/v1/fill/w_264,h_269,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/unnamed%20(57).png)
Starting Point
Once I had my design direction figured out, I took a closer look at the wireframes. While I was making an event app for gamers, these were for a more generic event app. I made lots of annotations of every part of the wireframes and significant changes to tailor this app to the gaming community and added targeted features to the experience. Some of these changes included rethinking the bottom navigation, adding new event categories such as tournaments, and redoing the onboarding to get more relevant information relating to the user’s gaming interests.
![unnamed (58).png](https://static.wixstatic.com/media/ce99ac_553a63b4bf434141820287a398d01373~mv2.png/v1/fill/w_600,h_397,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/unnamed%20(58).png)
High Fidelity Design Creation
Based on my revised wireframes I created high-fidelity screen designs. Throughout the project, I made minor usability and visual changes to arrive on these final screens.
![unnamed (64).png](https://static.wixstatic.com/media/ce99ac_fcfc8cb544bf4278b9b760c20a77b6e4~mv2.png/v1/fill/w_246,h_437,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/unnamed%20(64).png)
![unnamed (63).png](https://static.wixstatic.com/media/ce99ac_40afc850cd59430583954750f23d0393~mv2.png/v1/fill/w_246,h_437,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/unnamed%20(63).png)
![unnamed (62).png](https://static.wixstatic.com/media/ce99ac_f1c340d7af974c94a0cae2316296a6e2~mv2.png/v1/fill/w_245,h_436,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/unnamed%20(62).png)
![unnamed (66).png](https://static.wixstatic.com/media/ce99ac_84e138ed512941b6b73f7b77d71b058b~mv2.png/v1/fill/w_244,h_434,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/unnamed%20(66).png)
![unnamed (67).png](https://static.wixstatic.com/media/ce99ac_70fda88acd3d4245912f23724e367aa8~mv2.png/v1/fill/w_243,h_432,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/unnamed%20(67).png)
![unnamed (59).png](https://static.wixstatic.com/media/ce99ac_63448eb69c1e4e5bb32bb2714c6a08de~mv2.png/v1/fill/w_240,h_427,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/unnamed%20(59).png)
Prototype & Final Results
With my final screens, I created a lightweight prototype. I used this prototype in user tests and learned about the results of my design. Users enjoyed the style, they said it was familiar but also broke the mold in cool ways. Users also enjoyed gaming-specific features but had a few suggestions for expansion relating to social media connection. Overall the gamers I surveyed believed visually it was very nice and functionally it was a good start with some unique ideas.
Packaging VENTE Into a Style Guide
Now that I had lots of example screens and a prototype, I made a style guide for the future of the project. Outlined inside is the usage of many design elements such as buttons, iconography, logo, typography and color.
Marketing Site
![MacBook-Pro-16-Silver-Right-Mockup-Free.](https://static.wixstatic.com/media/ce99ac_0e5af90785934d22b072cfa0461935b8~mv2.png/v1/fill/w_732,h_451,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/MacBook-Pro-16-Silver-Right-Mockup-Free_.png)
Conclusions
This was my first full UI/UX design project and there were a few things that went right and there were moments to learn from.
What Went Right
I made solid and actionable design goals early on in the project that I created based on research, and at the end of the project, user testing indicated I delivered on them. Early on in the process I also feel the style tiles I made were very divergent and it gave me the freedom to go in a direction that was most fitting for the app.
What Went I Learned
While I think the designs I made for this project are clean, I think I could have done more to add to the uniqueness. There are ways even looking back now, that I feel I could have added more life and personality to the design direction I chose. I settled a bit too much for what was safe and could have thought outside of the box a bit more. Also, relating to this, my iterations during this project were minor and I think I could have been more self-critical to really push my designs forward and always use my early ideas as just a starting point.