The Riley App is a start-up social platform that my team at the Darden School of Business’s iLab designed.
The Goal: To build an app connecting those with similar disabilities to one another to promote community.
I worked with another UX Intern to design the app from the ground up, keeping accessibility as our central focus.
Role
UX Design and Strategy Intern
Type
iOS Design, Web Redesign, Visual Design, Branding, Accessibility, Strategy
Tools
Figma, inVision, Principle, Canva
Duration
June 2019 — August 2019
Process
Recognition
I was featured on CBS 19 News in August 2019 for my contributions to the Riley App.
Overview
The team was comprised of 6 people: The founder, communications manager, two developers (working remotely from Armenia), and two UX interns. As with working at any start-up, I was able to take on a plethora of roles and gain experience beyond just UX.
My deliverables by the end of the summer included:
40+ high fidelity iOS mockups with an interactive prototype
A full website redesign
Branding guidelines
Press kit
Sponsorship kit
App store materials
Marketing brochures and fliers (print)
Animated digital marketing content
Professional pitch deck
I also focused on creative strategy and identifying opportunities for growth, as well as building a financial model for the company.
Defining the Challenge and Objective
The founder of Riley had a vision to create an app that combats the global epidemic of loneliness and disconnection within the disability community. She intended the core functionality of Riley to be based on profile card swiping, where users are presented profiles with health conditions similar to their own and can swipe to initiate a conversation.
Research
User research was crucial to discover what our target user group was seeking in The Riley App.
I utilized Riley’s Brand Ambassadors (a social media initiative) and potential users that I connected with on online support groups to carryout my research.
I also conducted market research to analyze Riley’s competitors in order to develop competitive business and design strategies.
Methods:
20 User Surveys: I created a survey to identify user’s values and pain points of their current support networks. I focused heavily on what users wanted to gain from their network, who they wanted to connect with, and what they wanted to talk about.
5 Informal Interviews: We conducted informal video call interviews with 5 potential users of The Riley App, regarding what conditions they have and how they would benefit most from a support network.
82 Interest Forms: We also created a form on our website that allowed potential users to tell us about their health condition or disability and be added to our email list.
Findings:
User Pain Points: My survey found that over 50% of support group members reported a lack of personal connection with other members within their support group. It was difficult for users to attend in person support groups, due to both physical disabilities and availability conflicts. The Riley App aims to tackle these pain points directly and create a way for patients to connect remotely and on a more personal level.
What users’ seek most in a support network, according to my 20 online survey respondents.
Hierarchy of User Values: 75% of survey respondents ranked “building one-to-one connections and making friends” as their most valued aspect of a support group. When considering their potential matches, I found that users care most about:
Their similarity in disability
Their outlook on life
The tips and motivational advice that their potential match has to offer
These values served as the foundation for the user profile card, guiding what information we would collect from users and showcase to others in the app. Things like age, location proximity, gender, and appearance were not found to be significant in the survey, so we placed less emphasis on these aspects in the profile matching algorithm.
The graph shows the most prevalent health conditions in our potential user group, according to our 82 interest form respondents. We chose to focus the first iteration of the app on these conditions.
Health Conditions and Disabilities: Our interest form helped us gain insight to which health conditions were most popular among our potential users. For the first launch of the app we decided to strategically focus on:
Anxiety
Depression
Endometriosis
Lyme Disease
PCOS
To avoid the exclusion of users, I also proposed that we provide the general categories of: Physical Disabilities, Cognitive Disabilities, Misdiagnoses, Chronic Illnesses, and Temporary Illnesses.
Conversation Topics: I also gathered data on desired topics of conversation within Riley. I found that users are seeking a place to talk about:
Social lives, humor, and motivation
Hardships and coping strategies
Abnormal symptoms and misdiagnoses
These conversation topics were later implemented into the profile building process where users select topics from medical, personal, and social categories that become visible on their profile to other users. We also used these conversation starters to generate preset messages on the initial messaging screens with matches.
User Persona:
This user persona encompasses the common users’ goals and frustrations that the research phase uncovered. User personas are a great way to summarize findings by focusing on a user’s more extreme and unique traits. Doing this ensures an inclusive design foundation.
Ideate
Having a defined user group and a thorough understanding of their needs provided us a clear direction to move forward in with our designs.
The ideation stage is where we began crafting solutions for our users unique needs and was the most iterative step in our process.
Designing for Accessibility:
We wanted user accessibility to be at the core of the app, so our brainstorming sessions revolved around it.
We used Web Content Accessibility Guidelines (WCAG) 2.0 as our framework to creating an accessible mobile app and website.
We focused most on accessibility for those with visual, physical, and speech disabilities. This meant being mindful of colors, text sizes, and contrast ratios in our designs.
Though we were limited by our budget and timeline for the first iteration of The Riley App, we have plans to become fully accessible in later versions, including integrating image captions and VoiceOver capability within the app.
Branding:
There were no clear guidelines of the Riley brand when I joined the team, so I sought out to create Riley’s Branding Guidelines (pictured below). This process involved:
Establishing a clear mission statement and the core values of the company
Standardizing the font. We chose Poppins because it is not only friendly and encourages interaction, but is very legible.
Modifying the company’s color palette. We integrated accent colors of Riley Orange (#F9763E) and Riley Yellow (#FFB100) into the brand, to create a lively and interactive interface.
Setting the tone of the language that the company would use within the app, website, and in marketing materials. The copy needed to be clear, concise, and consistent.
Once the brand was clearly defined, my fellow UX/UI intern and I redesigned the company’s website and other marketing materials to reflect the new branding. More than just visual aspects, UX writing was central to our work.
User Flows:
Before beginning our screen designs, we created a user flow chart on a whiteboard, breaking down each step that users would take in the app to accomplish their goals.
This flow chart helped us determine how many screens we would need to design and guided us to a clear starting point.
Wireframes:
We drafted low-fidelity wire sketches in a workshop with Riley’s founder, Elizabeth.
Using paper allowed us to have crucial conversations about the direction of the designs before wasting time on high fidelity mockups.
We then moved to Figma, where we created medium fidelity wireframes, encompassing the on-boarding process, profile set-up, core swiping features, messaging feature, settings panel, and more.
Design
Visual Design Mockups:
In the visual design phase, we applied our new branding guidelines to our wireframes to create 40+ high fidelity iOS screens.
In this step we also created basic animations with Figma and Principle.
Prototype:
Next we took the high fidelity mockups and put them into inVision to create a clickable prototype.
We also used Figma’s built in prototyping feature to prototype designs that the developers would be able to access more easily.
Test
Usability Testing:
To test our interface’s functionality and usability, we drafted some usability tasks and shared a clickable inVision prototype with 10 of our Riley Ambassadors.
We set up 30 minute interviews where we asked users to complete the series of tasks, thinking aloud as they went through the processes and inform us of any pain points they encountered.
We found that:
Profile building options were not fully inclusive
Selection buttons were too small for some to use
Not everyone was comfortable uploading a profile photo
Reiteration:
We took the feedback we gathered and went back to the drawing board, working to create a more inclusive and usable platform.
As pictured above, this reiteration involved adding an option to input a disability that was not already covered. It also encompassed more options for a user's stage of life.
Implement
Development:
Throughout our design process, we were in constant communication with our developers, making sure that our designs were within the scope of the technical limitations (budget, time, and experience).
Once finalized, the designs and specifications were handed over to the developer team, who coded the app with Swift.
We held weekly video call meetings to check in on their progress and provide any clarification that was needed.
Marketing:
We began to generate marketing content promoting the app in the weeks prior to its launch.
We used Principle to create an animated prototype, showcasing the swiping feature of the app.
We posted this on The Riley App’s Instagram and promoted it, encouraging users to follow Riley and fill out our interest form before our official launch.
Product Launch:
The Riley App was released to the iOS App Store in early 2020. My fellow UX/UI intern and I created content for the App Store listing. We prioritized the App Store Optimization (ASO) of the app when drafting the tagline and description.
Looking Forward:
The Riley App has since been rebranded as Healp.co, but still features many of my core UI designs. Check it out online or in the app store!
Takeaways:
How to work well on a creative team: Disagreements are inevitable, especially when trying to collaborate on creative ideas. The biggest take away for me was how to effectively address them and advocate for the user, rather than my own opinions.
Designing for accessibility: I learned that designing for accessibility creates ease for all users, not just those with disabilities. This was the first project I closely followed WCAG.
The importance of user feedback during the process, not just at the beginning and at the end: Looking back, we should have scheduled more routine user testing on our designs, rather than waiting until it was near finalized to receive feedback. It would have saved us a lot of time and resources in the long run.
Establish file naming conventions and keep separate Figma files for different design tasks.