letr – UI | UX case study
an iOS app designed to keep you connected
Timeline: 10 weeks
Methodology: IDEO’s 5 stages of Design Thinking
Tools: Pen & Paper, Marvel POP, Adobe XD, Adobe Illustrator, Canva, InVision, Figma
Project Type: Academic
1 – EMPATHY
Introduction to the Problem Space
Initially, I was examining a few potential problem areas, all of which focused on isolation brought on by the pandemic. The main concerns focused on the following points:
Social media offers a very superficial connection to most people, often decontextualized by the “scroll.” This period in time has really highlighted the importance of real human connection, and it is something that is not being met currently without causing individuals a feeling of anxiety.
The ultimate impact I am trying to achieve is to offer a solution for people that want to keep track of their friends and family in a more meaningful way that isn’t just the superficial scroll of social media.
Ways to alleviate pain-points the problem-space causes is by offering them ways to connect with people in a way that feels more meaningful than just a social media contact.
Stanford sociologist Mark Granovetter coined the concept of these levels of friendships as one of “weak ties.” He also decreed that this level of friendship, one’s “outer circle,” to be vital to our social health.
Motivations, Pain Points and Behaviours from user interviews
2 – DEFINE
3 – IDEATE
ITERATIONS & USER TESTING
The User Testing Scenario: the user wants to send their BFF a gift for a special occasion to let them know they are thinking of them.
PEN & PAPER SKETCHES | LO-FI WIREFRAMES
MAIN CONSIDERATIONS AFTER USER TESTINGS
- The general consensus was that the user flow was easy to follow, although the greyscale profile pictures were too busy.
- The filter options weren’t intuitive and need rethinking.
- Each user wanted to filter by different options, which showed a disconnect in both the user task flow as well as my introduction background story to the app before testing began.
- My introductory user task description didn’t set some users up for success and definitely needed refining.
- In general, the task flow was more fluid, but there were opportunities for further clarity.
- Adjustments to the logged-in user’s profile picture need to happen on some screens for more information clarity.
- Further refinements of the filter options will be beneficial.
BIGGEST CONSIDERATIONS AFTER 2 ROUNDS OF USER TESTING:
- Changed Filters Options for more clarity.
- Changed the User Icon and added a Settings symbol for improved distinctions.
- Changed the layout on the Individual Contact Page for more clarity. There was a second Confirmation modal added at the end of the flow to strongly signify the user was about to leave the site.
4 – PROTOTYPE
Before designing the UI, I brainstormed a cohesive visual identity that reflected the CORE VALUES of the brand. Here is a quick look!
Using the 60/30/10 Rule, I selected the 3 Main Brand Colours.
Wordmark Ideation & Sketches
TYPOGRAPHY & ICONOGRAPHY
BUTTONS, BOXES, FORMS, NAVIGATION & SEGMENTED CONTROLS
GRIDS, MODALS & CARDS
Iconography is sourced from the iOS Human Interface with the exception of the “List” Icon. I created it to pair with the “Image Card” Icon for different view options.
THE FINAL PROTOTYPE
The High-Fidelity Prototype can be found HERE
Marketing Site Ideas
I put together a mockup for both website marketing and mobile marketing. I took into account the Brand Identity, feeling and Flat Design aesthetic to come up with an integrative concept.
I have also created device mockups for advertising opportunities. Here are some examples of the Landing Page and Web App across platforms – iOS, Android and Web. Although the app was originally designed for iOS, ideally it would be platform-agnostic.
LINK TO DESKTOP MARKETING SITE PROTOTYPE
LINK TO WEB APP MARKETING SITE PROTOTYPE
DESIGN IMPACT & FUTURE CONSIDERATIONS
We are in an unprecedented moment in our modern history, and it will take us, as social humans, to adjust to the world again. It is forever changed, and so are we.
We need to seek out ways to remain connected, and letr provides a way to do that.
letr’s main competitive advantage is that it allows the user to control what information they want, or don’t want, to share. It also allows for quick sharing updates, something to consider in this time of relocation and exploration in the lives of many young people.
There are several Contacts Management Apps on the market, but they are geared for more of a business use, to keep track of work associates, scheduling meetings etc. letr appeals to the everyday user in the way that social media does. It lets the user keep track of their close connections, and interact with them in more meaningful ways.
During all the phases of my research, I witnessed and learned that people have many different preferences when it comes to utilizing more digital tools. One of the main marketing objectives would be to showcase the ease of letr. It is cloud-based for easy cross-platform syncing. The ability to quickly send a friend a gift via their public wishlist or quick cash via PayPal or Venmo are high selling features, so an emphasis on these capabilities in marketing campaigns would be an asset.
A/B testing would be implemented to gain further insights into usability and interaction details, helping to define the design even further.