Overview
Social Meetup Mobile App
Project Brief
Design and brand a mobile-first website or mobile app to help people find places to meet halfway between their respective starting points and allow them to share their destination choices with the person they are meeting.
Notes on methodologies used
We used a design thinking framework for this project, Lean UX methodology, and an Agile development process with stand-ups and planned touchpoints with our development team.
The Outcome
A functional, visually attractive mobile app
Timeframe
Three weeks
Team and Roles
UX/UI Design and Branding:
Meade Peers McCoy and Thais Quintana
Web Development:
Sophia Marie Banda, Christopher Menendez, Tushar Poojara and Mixolidia Gautreaux
Tools Used
Sketch, Adobe XD, Photoshop, Overflow, Whimsical, Keynote, Google Forms, Quicktime and Scan Genus.
Case Study Navigation
Blueprint
Goals / Metrics / Minimum Viable Product
The idea for the project came from a member of the full-stack web development cohort.
With a team of two UX/UI Designers and three Developers, we had three weeks for the project's design phase before handing it off to the developers on our team, who had two weeks to code.
The nature of the project required clear goals and metrics to be agreed upon during the first phase. Given the time limitations, we needed to determine the minimum viable product and the stretch goals to prioritize work to ensure a viable product for handoff to development.
Our first step was to decide on the framework we would use to structure the project.
This framework guides the process of conceiving, designing, branding, and testing a new product, keeping things on track with built-in periods of reflection and reevaluation.
Explore
Data Gathering / Survey / Social Listening / Competitive Audit
Competitive Audit
We started the exploration phase of the project by researching existing competitors; we found three websites that performed the same basic function we were working on. These sites gave us a clear idea of what was missing from the existing marketplace and the need for a more robust solution.
Dated visual design, non-responsive, nonfunctional on mobile, full of ads, and so much more, but in spite of the obvious issues with these websites, we found numerous blog posts announcing these excellent new additions to the market of location-finding services, websites that will provide a service like Google, Yelp, Eater, Thrillist, and others.
This is an opportunity; people were looking for a website or app that would help them find a place to meet friends and family that was convenient for both people, and they wanted help picking a meeting place in an area they may not be familiar with. The potential audience was there, but the products offered were insufficient.
A Place Between Us
- Not responsive
- Does not function on mobile
- Dated design
- Results provide very little detail and do not have links to more information
- No way of sharing choices
- Since the beginning of this project, this website has been shutdown
What’s HalfWay
- Address auto-complete doesn’t work, especially if a zip code is used
- Results aren’t displayed natively; the user is redirected to google to see the results
- The visual design is reminiscent of a children’s book about Old McDonald or Farmer in The Dell
Meet Ways
- On mobile, the site is so overpopulated by ads that it’s difficult to enter addresses and find the results
- Moving and adjusting the map is almost impossible on mobile
- The design feels business-like, almost clinical, and the overpopulation of ads dilutes the branding
Survey
After reviewing the existing competition, we put together a survey to gather more data about potential users and gauge their level of interest in our product.
We had 48 responses to the survey, which provided us with valuable data to build our user personas and inform decisions about application design and features.
The current start professional earnings for millennials and their approach to life and work can mean less time and money to travel to hang out with friends or meet up with family.
“Nearly one-third of Millennials say that managing their work, family, and personal responsibilities have become more difficult in the past five years.” – INC Magazine
In a blog post titled “Did Millennials Kill The Hangout Sitcom?” author Lauren Le Vine writes that hangout-style sitcoms have become more and more impossible because of millennials’ continuous use of mobile technology and the ever-decreasing amount of free time those same millennials have.
“And, don’t even get me started on how hard it is to coordinate said hangout or brunch. Everyone is so busy . Getting all of your friends in one place is a Herculean effort that’s a sitcom plot in and of itself.” – Lauren Le Vine, Refinery29
Empathize
Persona / User Journey / MVP Session / High Fidelity Flows
User Persona
Using the survey results, we developed a user persona to represent our future users and help guide our design decisions, developing features and determining our MVP (minimum viable product).
User Journey
Together with the developers on our team, we undertook a User Journey and MVP Session to help us make an informed decision on the goals and parameters of the project and determine what metrics we would use to evaluate the long-term success of the application.
Key Performance Indicators
Searches performed – Results shared – Accounts created
Must Have Features
Home page
Search page
Results page
Links to website
Search by address
Phone Link
User current location
Should Have Features
Sign-in with Google or Facebook
User accounts
Search by zip code
Share results with a friend
Reviews from Google or Yelp
Could Have Features
About us page
Contact us page
Adjustable search radius
Draggable pin
Search by neighborhood
Native contact list
Saved locations
Search for recently opened
Create
Site Map / Sketches / Wires / IXD Model / Design Mockup / Feature Ideation / Workflows
Site Map
Starting with a LoFi post-it note based site map and eventually progressing to a high-fidelity digitized site map.
Inspiration for some of the interaction design came from Apple Wallet and Google Maps App.
Exploratory Sketches
One of my favorite parts of the design process is the low-fidelity sketches; pencil and paper are the best way for me to work out all of my ideas to get a feel for the personality of the project.
One of our touch points with the developers on our team was a group sketching session, giving every member of the team the opportunity to imagine how the app would look and function and providing the UX Designers with ideas and inspiration.
Early in the design process, the developers needed basic wireframes and user flow, so we created very basic wires and user flow to help guild the development team in figuring out what was needed.
After working through ideas with paper and pencil, we moved the design process to the digital realm, building wireframes in Sketch.
The search page is designed to have a personal and familiar feel. The text conversation format is intended to give the user a feeling of trust and mitigate any frustration the user may feel answering multiple questions.
The results page shows the user a map of the halfway point with result locations pinpointed. The results are displayed in a scrollable Rolodex style.
The business details card displays the rating, hours, phone number, address, description, and photos.
One of the ideas that came out of our sketching session with our development team members was to use Miami Art Deco as the design inspiration; one of the developers felt that since they would be building a site that focused on places to meet in Miami, FL, we should give the site a Miami feel.
Being a fan of all things Art Deco, I was more than happy to run with this idea.
Mockups
Following user testing, we moved on to high-fidelity mockups and user interactions
Prototype Gifs
Experiment
1:1 Interview / Test Plan / Testing
What’s in a name?
Brand and identity, how people will remember and think of your product
Between the wireframe and mockup phases of development, we tested a few different possible names for the app. We wrote the names on post-its (always finding more ways to use post-its) and asked people to select their favorite, with no explanation of what the names meant. The vote was overwhelmingly in favor of Locus, with 10 of 15 votes cast for this option; many people commented that they believed that Locus meant “locate us,” which they felt was delightful.
Locus
noun, plural
- A place; locality.
- A center or source, as of activities or power: Locus of control.
- Mathematics. the set of all points, lines, or surfaces that satisfy a given requirement.
A surprising discovery we made during testing was how the user intuitively interacted with the app; we decided to change the design of the “cards” or “buttons” during the transition from lo-fi wireframes to hi-fi mockups, changing from overlapping to isolated.
Click Through of Prototype
Delivery / Hand-Off
When it came time to hand off the project to the development members of our team, we provided them with a Google Drive folder containing all the necessary assets and resources, including Sketch wireframes and mockups, InVision prototypes, video click thoughts, InVision DSM and a video to demonstrate how to use the InVision Inspect function. All resources were provided in as many formats as possible, for example, PNGs, PDFs, Sketch files, and video for the mockups.
The front end developers we were working on the project with didn’t have any experience working with Sketch or InVision, so I recorded this video walk through of InVisions Inspect feature.
I also recorded a video walk through of the layers panel in Sketch.
Meade Peers McCoy
508-309-5603
Meade.McCoy@Gmail.com
UX Designer and Educator specializing in Accessible Interaction Design for Enterprise Applications.