37-hifis.jpeg

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

Showcasing Meddle's bright tone, this photo was taken from an article: "Winter Weather Drinks to Warm You Up".

Showcasing Meddle's bright tone, this photo was taken from an article: "Winter Weather Drinks to Warm You Up".

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.

 

Brand Tones.jpg

Meet Sophie

The persona, originally created by Ian Keeber

The persona, originally created by Ian Keeber

Sophie 01.png
 
Sophie 02.png
Tools: Paper, Pen, Illustrator, Duration: 30 minutes

Tools: Paper, Pen, Illustrator, Duration: 30 minutes


landing page

Our research showed that the majority of users did not recognize the carousel of screens upon opening the app.

Original Flow.png
Ideas02.png
Ideas01.png

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/

icon_iOS.png

The most unpopular color for women is orange.

12-old-color.png
Colorpalette.png
Brown.jpg

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.

Original color palette

Original color palette

After changes made

After changes made


Profile - 02.1.png
 
The darker tone catches the eye while the lighter functions as a secondary element.

The darker tone catches the eye while the lighter functions as a secondary element.

 
The dark purple sections off the progress meter while the light purple allows the white dot indicator to come forward.

The dark purple sections off the progress meter while the light purple allows the white dot indicator to come forward.

Tutorial - 02.png
Profile - 03.png
 
Visibility of the user's progress is crucial during the onboarding process. Yellow allows Sophie to see her steps peripherally.

Visibility of the user's progress is crucial during the onboarding process. Yellow allows Sophie to see her steps peripherally.


background

Landing Screen

Iteration 1

Iteration 1

Iteration 2

Iteration 2

Profile Setup Screen

Iteration 1

Iteration 1

Iteration 2

Iteration 2


Tutorial Fixes

While approaching the tutorial, I first considered the most important pieces of information:

Focus.png
 
Sophie (primary persona)

Sophie (primary persona)

The colors here were taken from Meddle’s original color palette.

The colors here were taken from Meddle’s original color palette.

 
Frank (secondary persona)

Frank (secondary persona)


Iterations

SIngles.png
TC01.jpg
TC02.png
TC03.png

Changes

usability testing

Adding or modifying photos was unnecessary at this stage since one has already been uploaded.

X box.png
Sign Up - 03.jpg

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.

+ & =.png

NEW Flow

After iterations, the six screens (above) were reduced to four screens (below).

Changed Flow.001.jpeg

prototype

Uploaded by Gelo TV on 2018-01-06.


Next Steps

branding

Logoideas.png

visual competitive analysis

 

39-rigid.png

Vs.

40-organic.png

Logo Recommendations

LogoRecommendations.003.jpeg
 

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.   

LogoRecommendations.004.jpeg
LogoRecommendations.005.jpeg
 

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.

LogoRecommendations.007.jpeg

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.

Meddle Reflections.png
01-meddle-logo.png

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.