Brief
Completely design an event app for busy customers, using some existing UX research and low fidelity wireframes. The UX team presented me with 2 personas to keep in mind whilst designing.
One wanted the complete scoop on the local goings on, and the other wanted to have fun while staying healthy.
Vente
Vente is an event app which considers the need to keep users in the know, without overloading them with too much information. They also wanted us to consider how to integrate healthy social activities without taking up too much time to find the right event.
Their current wireframes had a lot of flow and layout issues to fix, as well.
Role - UI Designer
As the UI designer, my tasks included competitive analysis, sketching, logo design, mood boards, style tiles, high fidelity mockups, prototypes, mobile web responsive marketing sites, style guide and usability testing.
Toolbox
I used a combination of Illustrator, Sketch and Invision for the design and prototyping of this project. I used Zoom to video conference with the clients and the users.
Problem
In its current state, the low fidelity wireframes are hard to follow and do not have a flow or enough pages built out to make sense. The new app needs to be built while using these as a guide, but also taking into account the user personas’ wants and pain points.
Additionally, there is very little visual hierarchy.
Project Timeline
The first week, I created a competitive analysis, affinity map, and I went through all of the UX materials I was provided with. I then begun logo sketching.
During the second week, I worked on mood boards and style tiles, digitized my best logos and analyzed what needed updating on the low fidelity wireframes provided.
During the third week, I worked on my first set of high fidelity wireframes for the onboarding process, and we selected a logo to move forward with.
During the fourth week, I iterated the screens for the onboarding process, added a few new screens, and began sketching the mobile marketing site.
During the fifth week, I iterated the screens, added the necessary additional screens, created mobile web and desktop marketing sites, and created a style guide.
Research
While keeping in mind the users’ main pain points and goals for the app, I began my research.
First, I put together a competitive analysis. This tool was helpful to focus on what the competition was doing. It was important to look at the competition to see what they did poorly, and the elements that were actually working that could be adopted.
Logo Design
First I sketched out a bunch of options for the logo with pen and paper. I decided that for the most part, I wanted to make the “V” of Vente stand out, so eventually it would be recognizable to the brand and usable as a standalone in icons, etc.
Next, I went onto Illustrator and turned my sketches into digitized logos. We then narrowed down which logos worked best, and then decided on one.
Mood Boards
I made 3 divergent moodboards to streamline where I wanted to go visually. My research showed that bright colors, and an overall fun feel, while not making it too overcrowded were what both the competition was doing, and what my goal was to appeal to busy young people. I came up with the following themes to go with the research I conducted. Whimsey, Nature, and Bold.
Style Tiles
After converting the 3 moodboards into style tiles, I then had a desirability meeting to see if these themes went over well with the target audience. I had a very good reception for the Whimsey style tile, and a middle of the road reaction to the Bold and Nature tiles.
After testing the style tiles, we decided to move forward with the Whimsey theme. It tested best and would lend itself best to not look over-designed.
Wireframe Evaluations
We received wireframes from the UX team, and I thought there were a lot of areas that needed fine tuning, some elements that needed editing, and many things that were a great start.
I began with onboarding, and thought that I could change the wording, order, combine similar processes, and rework the process to make it more sensible for our users.
Next, I thought the bottom navigation icons needed an overhaul. Some of the icons were not easily recognizable for what they were meant to represent to the layman user.
Finally, I thought reworking, combining, and rethinking further pages was important to make the flows and hierarchies more sensible.
High Fidelity Screens V1
I built the onboarding process high fidelity screens for the mobile app. I made sure that social media was included, since this was not included in the initial wireframes. I also made sure the flow made more sense, by making sure that the first screen to get to after entering information was choosing location. I removed the “meetups” screen, because it used another brand’s word, and was too similar to “Interests” and “categories. Additionally, I made the layout a lot more sensible so users would know exactly what to do to continue, or skip forward. Finally, I added progress dots so they can see how far in the process they are.
High Fidelity Screens V2
I got pretty consistent feedback that the font was a little hard to read over the gradient, and the users needed to be able to read it more easily. I also got feedback that the half overlay wasn’t great, and that the text above form fields is not the best placement.
I built the 3 more key high fidelity screens. I made sure the bottom navigation flow made more sense, by updating the icons, combining similar pages, and having more pertinent information on each screen.
Prototype
After receiving more feedback, I iterated my designs again, added more screens to create a full user flow, and put them into a basic InVision prototype.I got a lot more positive feedback after these further iterations. For the most part, the users knew where to click, and didn’t seem to be distracted by any of the other elements.
Mobile Responsive Marketing Site
After completing my prototype, I built a marketing site (mobile first). First I sketched out the layout for the mobile site. I decided that a long scroll with everything on one page would be better for this app. It would be laid out better, and give the user many opportunities to get to our app. I then sketched the desktop sized site.
Next, I created high fidelity mockups for both sizes, using the same elements as the app design. I began with the mobile size and built desktop later.
Style Guide
I created a stye guide, so future designers could get an idea of the brand attributes, the elements used, the treatments, photo styles chosen, logo dos and don’ts, etc.
