UX Designer (Research, Visual Design, Interaction Design, User Testing)

4 weeks

Figma, Pencil & Paper

iOS design, interaction design logo design, visual design, branding

Designing a prototype of Beluvd, an app that allows users to add content, share it, discuss it, and revisit it. Effectually, a social network for baby media.

This speculative project was designing the key screens of an app that solves a problem for users. I chose to address the dearth of dedicated digital products for sharing baby photos and videos.

SECONDARY RESEARCH

Conducting secondary research for this project was absolutely imperative: the idea came to be due to a perceived gap in the market, but just how wide was it?

I started with a quick industry overview to grasp who I'm designing for, what the landscape looks like, and where my project fits into it. I found some really interesting stuff re: parenthood and photo-sharing habits.

Baby albums have entered the 21st century and the baby industry isn't slowing down at all. Some key facts:

1. 92% of 2-year-olds have some level of online presence (The Atlantic)
2. Sharing media of one's own baby has it's own portmanteau moniker: 'sharenting' ( BBC)
3. The online presence of children through their parents' accounts will be a huge contributor to identity fraud by 2030 (The New Yorker)
4. Investors have injected $500 million in funding into Babytech companies since 2013 ( Forbes)
5. About 72% of parents want their own parents to think they are doing a good job raising their children, 52% care a lot that their friends (52%) do ( PEW)

I also found some vital demographic info on prospective users:

1. The average age of first-time mothers in America is now up from 21 to 26, while for fathers, it's increased from 27 to 31." (NY Times)
2. Married couples make up 68 percent of all families with children under age 18 ( USCB)
3. One-in-seven U.S. infants (14%) were multiracial or multiethnic in 2015, nearly triple the share in 1980 ( PEW)

COMPETITIVE ANALYSIS

Knowing about what options are available to users is just as important as figuring out who they are. A competitive analysis is perfect for this. I found a few apps that certainly cater to parents and their media storage needs, though often with the endgame of printing of physical keepsakes. I also compared their strengths and weaknesses to assess what features are must-haves and what I can improve on.

PROVISIONAL PERSONAS

Through demographic research and working backwards from the competitive analysis to ascertain user needs, I developed these provisional personas (precursors to the real persona in stage 2) to get an idea of who to interview during empathy research.

USER INTERVIEWS / EMPATHY MAP

To get down to the nitty gritty of what users actually need, I interviewed 5 people, all parents, and grandparents. Focusing on their general experiences with the babies in their life and their media sharing habits, here are a couple of quotes I pulled that encompass the interview process:

"A negative experience would be I can't find the video that I'm looking for, or picture that I'm looking for if the picture is more than a month old...so searching is a little bit difficult."

"It's much more easier to have every picture connected in one place. So everybody can have an access. Instead of just sending it back and forth."

I made an empathy map to dissect the interview responses and group them together into common clusters.

CREATING A PERSONA

Knowing our users' needs and other insights from empathy research allows for the creation of a primary persona.

Priyanka is a new mom who documents her child's growth and all the other cute stuff she does- and, of course, shares with family! The brand affiliations reflect three aspects of parenting the interviewees frequently mentioned, and the goals/needs and frustrations/ motivations reflect the empathy research in stage 1.

Designing for the primary persona should account for the needs (if not all) of the secondary and tertiary users too- especially in this scenario where the motivations and frustrations were largely the same across interviewees of different use cases.

POV STATEMENTS / HMW QUESTIONS

POV statements encapsulate users' needs, and HMW questions transfer them to the designer's remit. By literally asking 'how might we do so-and-so?", I can start generating potential solutions to the needs uncovered in empathy research.

The insights and needs from empathy mappng comprise the first two columns in this diagram, and the last two is where they are formatted into actionable statements.

VALUE PROPOSITION DIAGRAM

Using the HMW statements to brainstorm and generate potential solutions, the product started to come into focus.

This value proposition diagram is a way to reiterate Priyanka's needs while directly defining the product in the context of the user experiencing it.

As this was a new brand/project this diagram was really helpful in solidifying its purpose.

FEATURE ROADMAP

The features in the above diagram, while fitting, are apirational. By assigning criteria (effort, confidence in implementation, and the user need being addressed), I could sort those features and all others I considered into different priority levels.

These define the strategy and order of attack in designing the app, and the Priority 1/2 groups define the MVP and relative goals for the end of the 4 weeks.

I determined that the features I would focus on delivering were the timeline of photos, the creation of albums, and categorizing content for easy location.

APP MAP

At this stage of the design process, I knew the features likely to end up in final prototype. The organization of these features and the content within them- the information architecture- needed to be defined.

This app map accomplishes this by illustrating the structure of the screens that users will navigate through.

TASK FLOW

The aforementioned navigation within the app map's structure can vary in myriad ways- but this task flow grounds the proposed flows to the user's needs.

The below tasks address the three needs uncovered in earlier stages: storing, discussing, and locating content.

USERFLOW

The above task flows were enmeshed and expanded upon to develop this userflow, which encompasses lots of different user journeys and all the forks in the road, so to speak. This userflow was a great learning experience for me as it was my first foray into content-driven navigation, where users "move freely through content, or the content itself defines the navigation," as defined by iOS's Human-Interface Guidelines. Instead of the flows culminating in an end task (i.e. a checkout), the user's experience isn't quite so linear.

LOW-FIDELITY WIREFRAMES

I knew the journey users would take, but what would they see? These low-fidelity wireframes were a way to visualize how to include the differencefeatures I was proposing within the limited real estate of a mobile screen. Keep scrolling to see the dramatic in final product!

MEDIUM-FIDELITY WIREFRAMES

The groundwork of the low-fidelity wireframes gave way to these mid-fidelity wireframes, which leave out the visual design aspects to focus on layout. These wireframes are labelled with key features and gestures required to access them.

MID-FIDELITY PROTOTYPE

I expanded on the above mid-fidelity wireframes by designing additional screens that comprise different user journeys. This allowed me to link them together to create a testable prototype to ascertain if the proposed features are navigable and intuitive.

Please see the final prototype under 'Testing and Beyond'!

USER TESTING

Once the prototype was complete, it was time to put it to the test, literally- a moderated remote think-aloud test with task assessment. Five participants who are parents, grandparents, or other parts of the sharing network in their family were asked to complete 6 tasks to assess the usability of the prototype:

1. You're Priya. This app is where your photos/videos of your baby are stored and shared amongst your family members. Sign in.
2. Check your notifications and select the first.
3. Leave a reply to Pop Pop's comment on the photo.
4. Find and open the photo of Kaya (your baby) standing through filtering by 'Milestones' and 'Best Smiles'.
5. Open the 6-Monthday! Album.
6. Add a photo of Kaya, and tag it as “Sleeping Angel".

TEST FINDINGS / AFFINITY MAP

The testing validated a lot of the ideas behind the navigation and information architecture of the app, but testers had several issues with the filtration/tagging aspects in tasks 4 and 6.

Task Completion Rate: 86% across all tasks. This was mainly due to difficulty with the gesture for task 4, and an issue understanding the task wording of Task 6.

Error Free Rate: 90%.

I organized an affinity map to determine common comments amongst testers. Like empathy mapping, this technique involves transcribing observations and then organizing them into similar groups.

This clarified areas of improvement (i.e. comment hierarchy, gesture discoverability,etc.). I then determined recommendations for improvement- see below.

RECOMMENDATIONS IN ACTION

A major issue that arose during testing resulted from a risk I took where the filter icon opens a card with chip tags if the user swipes, but this gesture wasn't intuitive in the mid-fideltiy prototype. Taking on the feedback that an indication of the gesture required would help clarify the action, I added a chevron to the left of the filter icon- you can see this on the left.

On the right is the 3rd recommendation in action, removing the 'reply' label and replacing it with an icon to the right of each comment. This is aimed at mitigating the confusion caused by a single 'reply' label under each thread, which caused some testers to think they were replying to a reply as opposed to the parent comment.

VISUAL DESIGN (LOGO & UI KIT)

Once the prototype included the recommendations from user testing, it was time to establish the aesthetic direction to move toward a high-fidelity prototype. I determined brand attributes to ground this process in the bigger picture of what the app needs to communicate to users:

While several of these reflect the focus of the app (adorable, gentle, joyous babies!) the others are related to function. Beluvd is about sharing amongst our familiars, the enduring nature of keepsakes and baby albums, and the opportunity to reflect on a youngster's growth. I used these attributes to compile a moodboard of logo, type, and color inspiration. Many of the images I collated used brights and pastels, as well as chunky or rounded sans-serifs. After finding 'Opificio', a typeface which had joyous and familiar rounding, I developed variations on a type-based logo. I settled on one of the simplest for readability's sake, but employed a bezier curve to emphasize the interconnectedness of the app.

I fleshed out the rest of the visual design by manipulating colors from my moodboard and settling on the Raleway typeface. It has design elements reminiscient of vintage toys, which communicate something familiar and enduring. Once I applied these elements to the prototype, I imported various components to create this UI kit for future reference and handoff.

HIGH-FIDELITY WIREFRAME & PROTOTYPE

TIme for the finished product. Below you can see the application of the UI Kit on several of the original mid-fi wireframes. Below that you can see the prototype in action, but feel free to click through it here.

This was a really fun foray into current trends, like glassmorphism and gradients.

MEASURING SUCCESS

User testing indicated that most features of Beluvd were navigable, but I would look forward to testing the high-fidelity prototype were this project to continue. Measurable KPIs upon launch would include number of downloads, number of active users, user retention, and session length.

REFLECTIONS

The main challenges were:

- this was my first foray into iOS design
- sometimes our ambition can impede functionality

The former provided an opportunity to envelop myself in Apple's human-interface guidelines, and I now feel confident in my knowledge and ability to dissect guidelines and design systems.

The second challenge was a hard pill to swallow but a valuable lesson. Let me explain: I set out to stretch myself with regards to my prototyping abilities and UI design skills. This, however, also impeded the function of my product. I learned how to create more realistic gestures in Figma, but found that this caused a lot of confusion in user testing. I'm hopeful that further additions will make the filtration feature function better- only more testing will tell.

With regards to the UI design, I made a lot of strides in this project. I was excited to introduce lots of color and cool trends- but quickly found upon application that these elements can in fact be distractions from what users actually want to see (which is, of course, their babies). Much like the ideation stage being my first foray into the structure of content-driven design, this stage illuminated that user-generated content is a huge part of the UI itself, with all its color, style, and dimension.