problems to address:
Meddle is looking for solutions that encourage users to complete onboarding for the app. Signing up may feel like a lengthy process. Current feedback also reveals that new users are confused with how the app works. Presently, the success rate for completed profiles is 41%.
Our plan:
We narrowed our scope to reducing the number of screens, exploring different ways to present the tutorial, and eliminating any confusion through concise phrasing at every step. We hope to see the success rate raise to at least 75%.
Discovery and Research
BLOG
The blog functions as the voice of the brand. Taking into account visual elements such as the white overlay and bright complementary colors, I started here.
Meet Sophie
landing page
Our research showed that the majority of users did not recognize the carousel of screens upon opening the app.
Color Palette
A recent study revealed that orange is the least favorite color among women and was regarded as "cheap" or "inexpressive".
https://blog.kissmetrics.com/gender-and-color/
The most unpopular color for women is orange.
The brown in this early hi-fi screen was replaced with the color used for the status bar. This decision also allows for more consistency.
I wanted deeply saturated colors that were limited to three basic hues: blue, purple, and yellow.
background
Landing Screen
Profile Setup Screen
Tutorial Fixes
While approaching the tutorial, I first considered the most important pieces of information:
Iterations
Changes
usability testing
Adding or modifying photos was unnecessary at this stage since one has already been uploaded.
We received a lot of feedback indicating confusion with the location screen. To simply the process, we combined the “Location” and “Looking For” screens by adding a slider under age range for distance, ultimately doing away with the map altogether.
NEW Flow
After iterations, the six screens (above) were reduced to four screens (below).
prototype
Next Steps
branding
visual competitive analysis
Vs.
Logo Recommendations
Alternatives to the original logo portray softer edges (top-right), the idea of randomness (top-left), or embellishing the idea of a ferris wheel (bottom-right).
I also considered changing the logo symbol completely. Here is an “M” that demonstrates a shape that may be interpreted as two friends walking hand in hand or a potential match that was founded on friendship. At the same time, the shape is not intended to be overly literal allowing Sophie room for imagination.
Influences for the new logo were based on the idea of overlapping colors and connecting points. Although I started with two colors, we felt that one was enough to convey the intended effect. The main theme is connection.
In order to keep the image neat and organized, we as a team discussed the idea of “containment”. The images above were influential in that the scenes and characters are “contained” within the circle. As a business, a neat and organized image would reflect stability. The bright tone of the company can be expressed through saturated color despite being contained in a circle.
Final Thoughts
Conclusions
Following these recommendations, the direction I would like to take would be to:
Perform usability testing on the new visual design and logo
Explore the onboarding flow for meddlers
Redesign the current visual elements on the swiping and messaging portions of the app
We hope with the redesign and recommendations we would be able to raise the success rate to at least 75%.
reflections
I enjoyed working with the client and team and was especially excited to contribute visual design elements such as character illustrations since it was my first project as a visual designer. Adding these allowed me to add personal creations to a professional work. Communicating with the client remained professional and at the same time, he allowed us to express our findings, opinions, and thoughts freely; ultimately, we all wanted to see the company grow successfully.
Since it was my first experience as a project manager, learning the different work styles of my teammates pushed me to adapt to their pace and continually communicate our progress with the client. We quickly learned a great deal about ourselves through our work and the experience was well worth our efforts.
Lessons learned were:
I discovered how to better use certain colors for specific purposes. Through feedback from other visual designers as well as my teammates, I learned how matching tint and shade values creates a sense of balance.
I needed specific reasons for approaching the tutorial with iconic cats; upon reflection, I asked myself why I chose those particular characters. I learned that every decision requires informed steps based on the potential user.
Updating and changing the schedule on a daily basis was a new experience as a project manager. The most challenging part was deciding whether some planned tasks were conducive to the process. It allowed me to focus on what was most important in the limited amount of time we had.
My Role: Visual Designer & Project Manager
Team: Kristin Henry: Interaction Designer
Ian Keeber: User Researcher
Platform: iOS
Duration: 3 Weeks
Tools: Sketch, Omnigraffle, InVision, Adobe CC
Artifacts: Branding guide, style guide, hi-fi wireframes, digital prototype
About Meddle:
Meddle is a dating app that allows family and friends to arrange matches for its users. By targeting daters who are overwhelmed with dating app options and allowing their friends to weigh the options, Meddle seeks to distinguish itself from traditional matchmaking companies.