LocalEyez: Designing Personalized Experiences

Designing the interface of a machine learning application to find events near you

Case Study By John Lattanzi

11/03/2020

Overview:

Project Summary:

The task was to design the UI of a mobile application that focuses on aggregating a list of activities specific to the user’s preferences. Our client, LocalEyez, uses web scraping and machine learning to accommodate the user’s preferences. The company is also considering going in a different direction to incorporate monthly memberships that provide the user with access to experiences, like ceramics classes, kid-friendly Shakespeare in the Park, or a free adoption event.

Client: LocalEyez

Product: Machine Learning application intended to help users find events and groups around them based on their personal interests and location

Dates: Oct 26, 2020 - Oct 30, 2020

Tools:

• Sketch - Creating wireframes and the original prototype design

• Figma - Building prototype interactions and updating the prototype after user feedback

• InVision - Templating out wireframes and gameplanning the overall design

My Role and responsibilities:

Visual Designer

• Create wireframes based on their existing website, color scheme, and logo

• Master and refine interactions

• Build a consistent component library

• Maintain a consistent typography

• Evaluate the information architecture, content, and visual design

Business Requirements:

• The business requirements were relatively broad, but what they wanted specifically was this: 

  • Onboarding: The team wants to see an onboarding flow similar to MeetUp or Flipboard's onboarding process.

  • Remixed layout of "The Feed" for mobile: Your team wants to see how “The Feed” will look on a mobile platform.

  • Redesigned User Profile: Your team wants you to completely redesign the user profile screen. You can use the website wireframes as inspiration but they want to see something completely new that enables the user to: easily update their bio, choose new interests, see an archive of their past events, fill out their payment information, and add a location.

Constraints:

• Solo Project, so less input from other designers

• One week to meet the client’s requirements

• Limited Resources for further development

• Had to maintain the existing color palette and logo

Research:

When starting this project, the research was already done for me, but I elaborated on it and did a full competitive analysis. Here’s all the information that was utilized for this project:

• Demographic

  • Age: 21 to 50 years old

  • Annual income: $30,000 to $120,0000

  • Location: Large Urban Areas, United States

  • Interests: Food Tours, Bar Crawls, Trivia Nights, Hiking, Festivals, Block Parties, Art Walks, Sports, Nightlife, Concerts, Board Games, Family Friendly, Bowling

  • Attitudes: Optimistic, Social, Seeks Spontaneity

  • Challenges: Social Isolation due to Urban Culture, Lack of Time and Organization for Family Outings, Friends are Picky

• Competitive Analysis

  • Airbnb Experiences

    • Strengths

      • Great because of their already large platform, a large variety of experience options, the price is laid out clearly, they have interesting hosts that lead experiences, and it’s very personalized as to what you can do on the platform.

    • Weaknesses

      • A negative is that because it’s so “host” focused, it’s more about the experience with that host if you’ll like the experience at all instead of building a community around a similar interest. Also, there is little about the actual hosts until you sign up other than a quick blurb about them; I think a video introduction from the hosts would do a better job at marketing for them.

  • ClassPass

    • Strengths

      • Great because it’s fitness focused so you know exactly what you’re signing up for, the price is easily laid out, there is no limit of activities you can do once you sign up, they offer a range of classes (both in person and at home), and the design is set up well.

    • Weaknesses

      • Negative is that it’s only fitness classes and the reason it’s a negative is because people may want to be active in other ways (sports, just going to the gym regularly, etc.). Also, while they have many cities and gyms involved, the access is limited to only the gyms who participate in this with them, so people may be less inclined if a specific gym they like isn’t listed on the website.

  • FourSquare

    • Strengths

      • Great because it’s location based and very data driven, so the platform really helps show you things around you that you’d be interested in. The color scheme is really specific and nice. The whole platform is laid out really well and it’s clear that a large user base could benefit from this, even businesses.

    • Weaknesses

      • It’s two separate apps (Foursquare and Swarm), so you have to jump back and forth a bit to use it and it’s a bit difficult to see on the outside what the pricing is and what activity options are actually going to be listed.

  • MeetUp

    • Strengths

      • Great because of the variety of options you have in terms of joining groups of things that interest you - this app is excellent for building communities for similar interests. Also, their user base is really large, it’s generally pretty easy to make a new group, and you can easily search for groups in your local area.

    • Weaknesses

      • The platform can feel really large at times and that it’s really easy to get lost in all the possibilities. Also, it does require a bit more legwork from the user to look up specific interests and apply to be in related groups instead of asking them about those interests and suggesting groups they might like.

• Personas: Created for me

Nick is looking for an app that will help him build a community of people interested in sports and fitness that he can meet up with to play with. So, he’ll be wanting an app that’s community-driven, focused on its users, and finding people around him that actually want to meet up and play sports/do activities together.

Heather is a working mom that’s main goal is to find events that she can take her kids to on the weekends, is really easy to read and understand, and is flexible to her busy schedule. Priorities of her’s would be clarity (which events are kid-friendly or not) and ease of finding an event.

The 3 on the right are only brief descriptions of people, but they’re still important in terms of our age demographics and the research they’ve done. It seems like the younger side of our audience is focused on movie premieres (or events similar to that), pop-up shops, and events in the park. The early-mid 20s side of our audience is interested in a bit more of an experience with what they do, like a wine tasting, new art exhibits, and club events - something they’ll really remember going to. Then, the middle-aged side of our demographic is mostly about meeting up and getting to know people around them - so, meetup groups focused on similar interests, happy hour events at local spots, and conferences about their work/similar interest is what they’re going to be looking for.

Existing Design Choices:

Due to how this app already had a web version, there were aspects that the client did not want changed. Here is their logo and color palette:

Evaluate Current Work

Part of the business requirements were for me to evaluate the existing information architecture, content, and visual design. These were my original thoughts: 

I think there are a lot of large positives that come from the work that was already done. The information architecture is clear in terms of what the priorities are, but I think it’s a bit lacking in terms of the detail that will eventually be added within each category; so, I think it’s a great frame, but I’ll be adding the picture within it. The content so far is really great, I think it’s clear about how this is so community focused, how its goal is to help people find others who share similar interests and desires to have experiences, and offers a good insight into what the tone of the app will be; I think I can certainly add to the tone, but it’s in a good place so far. The visual design I think could use a bit of work - I think the logo should stick out more and focus more on what the actual app is offering: experiences. I think the color palette is pretty good, but could use a bit more depth to it because I want it to represent the experiences more instead of just being a blue and gray palette. I do think the wireframes offer a lot of insight and will be greatly useful as I start this project. Overall, I think these are all great resources and I’m excited!

Interface Inventory

I took a step back and tried to think of what style the app already had and what would make it work most effectively. Some of this changed a bit later, specifically when they wanted to simplify the color scheme , but this is where I started:

Sketches

Then, I started to sketch to see if this was feasible and what I could add to make it work better.

Wireframes:

I went through several iterations of wireframes that are shown below. Each was based on adding more fidelity or responding to user feedback in ways to make it improve.

Prototype:

This is my finished prototype. Below are some of the specific flows they asked for:

Onboarding Flow:

Feed Flow:

The Profile Flow:

Conclusions and Takeaways:

This was an interesting process where I focused on creating the UI and making it as similar as possible to their existing wireframes. It was a great process that, because it was only one week long, really made me focus on creating the best solutions in the allotted time. I got to play a lot with the feeling of keeping the app fun and family friendly while also trying to make it as sleek and accessible as possible. I learned a lot about what I could do with color schemes and also how to use Sketch, it was the first time I really dug into it and I’m happy with the work I made.

If I were to continue this project, I had some ideas for some animations that I’d like to add in, especially for the Splash screen and for some of the clickable areas. It was slightly out of scope for the project, but I think it would be a nice touch. Also, adding in specific screens about adding payment options would be a nice touch, but was also out of scope for the project for now. For myself, I would also like to expand the color palette if given the option, but I was happy to work within their parameters!

Overall, I learned a lot during this project. Specifically, I learned what I really like as a designer and what sticks out to me. I also learned how much I value collaboration because I got a little stuck on some ideas for a while that only got better when I asked for outside eyes. Teamwork is really important to me and I think I created something that both solved the business requirements and gives users something they can enjoy using in their day to day lives.