.png)
This case study is different from previous ones because instead of starting with a problem in mind, I started with an idea as it pertains to preserving one's legacy and family history. Because of this, I went through a discovery and ideation process where I spent time sketching and writing down all of my ideas. One of the inital concepts was a digital space where families could collaborate on their family tree (top left), connect more intimately with each other through curated profiles (bottom left) and stay up-to-date on current happenings (top right).
While getting these ideas out was a great place to start, I realized the scope of this concept was way too broad and not novel based on the competitive space. So I began seeking out people who are interested in digitally preserving and sharing the memories of themselves and their loved ones to learn more about them and what opportunities might be available.
In order to better understand the users and their pain points, I conducted user interviews. To help plan for them, I used a research planner created by Maddy Beard who is a Product Designer at Lunchbox as well as a YouTuber. The research plan is broken down into the four sections shown below: purpose, research goals, methodolgy and tasks, and participant criteria.
Research Goals
Methodology & Tasks
Participant Criteria
With all these things in mind, I utilized LinkedIn to find participants by posting a participant screeing survey. Then, I conducted user interviews and gathered key insights which were grouped into the following four categories: behaviors, interests, values, and pain points.
These insights were helpful in affirming the decision to abandon the inital project ideas as the ability to capture the stories and lives of one's relatives was sticking out as a greater priority.
With this main objective identified, I sought to design a product that would allow these potential users to continue to do what they've been doing while also providing more convenience, accessibility, and support when pursuing their goals.
I utilized Maddy Beard's and CareerFoundry's YouTube videos on information architecture (IA) to plan and create the sitemap. Maddy Beard's video in particular guides you through the process by using Eventbrite and Loom as examples and (A) defining how the user can access the content, (B) their users, (C) how the content is structured, and (D) the actions that a user can take as well as the content that can be accessed.
To do this for "What A Life," I had to understand who the users were, what their goals were, and what information and functionality they needed to succeed in those goals. Below is what I arrived to using the insights from the user interviews.
A. System: Web app
B. Users and Their Actions: Archivists (compiling) and viewers (viewing)
C. Content Structure: Categories, filters, and search
D. Actions & Content:
Actions:
Content:
After laying out all of the information and functionality, I translated this into the necessary pages and functions, categorized them, then created the sitemap shown below using FlowMapp and Figma.
The sitemap for the web app. The boxed sections correspond to the three navigation systems for the landing page, within the web app itself, and the sidebar respectively.
This sitemap led me to the navigation system of the web app. Ultimately, there were three navigation systems created: the navigation bar for the landing page, the navigation bar for the web app, and the sidebar.
Section 1 (orange) of the sitemap above is the the navigation bar for the landing page.
Section 2 (purple) of the sitemap above is the navigation bar for the web app which is visible once the user either logs in or creates an account.
Section 3 (green) of the sitemap above is the sidebar which allows users to navigate through the web app.
I referenced Maddy Beard's blog post on how to choose the right fonts for your design projects. The first thing she recommends you do in this process is to write down two or three things you want people to feel or understand about the brand when they interact with it.
Based on my intention for the web app and the insights gathered from the user interviews, I wanted it to convey these three attributes:
Since serif fonts are considered more traditional and well-established, I decided to choose a sans serif which feels more modern, new, and open.
Next, I utilized the following typeface characteristics to select a typeface:
By the end, I was left with Poppins, Inter, Public Sans, Outfit, Rubik, Heebo, and DM Sans. After testing out each font, I chose "Inter," a typeface which has all of these typeface characteristics and evokes the desired attributes we hope the user feels when using the web app.
Source: Google Fonts
Revisiting the same three attributes I wanted the product to evoke (warm, happy, safe), I sought to find colors that also reflected these feelings. To guide my search, I used the Empowered by Color website, DesignerUp's YouTube video on color theory, and Behance for inspiration.
After reading through the meanings of each color on the Empowered by Color website. Green and blue were the final choices for the reasons that are in bold.
According to the Empowered by Color website, green being a combination of yellow and blue is able to encompass the mental clarity and optimism of yellow with the emotional calm and insight of blue.
Blue exhibits trust, honesty, and responsibility. Reduces stress, creating a sense of calmness, relaxation, and order.
I wanted to round out the color pallette so I took to Behance to find some inspiration. The pallette that I found included not only greens and blues but also yellows and browns as well.
According to the Empowered by Color website, brown is described as being "down-to-earth" and "encourages a strong need for security and a sense of belonging, with family and friends being of utmost importance." And the color yellow "relates to acquired knowledge" which speaks to the web app's ability to allow users to record the stories and wisdom of their loved ones in a variety of ways.
I thought these two colors would provide a nice touch to the attributes that green and blue were already providing.
Artist: Andrew Juodawlkis. Source: Behance
Now that I knew the hues that I wanted to use, I used DesignerUp's YouTube video to select a color category and specify the saturation and brightness of the colors based off the HSB color model.
Out of the six color categories discussed in the video, I chose to use earth tones and shades. The muted and neutral nature of earth tones would reflect the calm and safe atmosphere that I was looking for. Shades would complement the earth tones well with some of the best user interface designs using a combination of one of the main color categories along with neutrals and shades.
Source: DesignerUp
.png)
.png)
I also spent time learning about accessible design by attending a panel discussion hosted by Joey Banks, a desiger at Twitter, where ways to incorporate accessiblity from the beginning, continue learning about accessiblity, and "design with instead of for" were discussed. This talk got my wheels turning and led me to WebAim's resource on web accessibility, Teach Access Tutorial, and a desktop color contrast analyzer.
I also participated in the 48in48 Super Service Virtual Event organized by the A11Y Atlanta Meetup where myself and others used a heuristic evaluation checklist to audit nonprofit websites for accessibility. This experience allowed me to see accessibility practices or shortcomings in action.
After auditing websites for two days, I revisited the design choices I had already made to make sure I considered:
The majority of these considerations will be showcased later in the prototype phase of this design process. However, below are the final color slections which meet the WCAG AA standard of the contrast ratio being at least 4.5:1 for regular sized text and at least 3:1 for large scale text.
.png)
When creating these wireframes, I incorporated the information and functionality uncovered during the information architecture exercise from before.
The sketch on the left shows where users can upload files, edit said files, create storybooks and stories, and record new interviews to incorporate into their stories.
On the right, I sketched screens for the users to be able to research interview topics based on historical events, chat with others within the web app, read blog posts about archiving best practices, and how to view the storybooks and stories.
To plan the content and structure of the landing page, I utilized two of Flux's YouTube videos: one on content strategy and IA and another one on landing page structure.
The sketches shown below were done prior to watching said videos but their framework, which is detailed below, was used to refine the structure and content for the final version.
From "The Perfect Landing Page Structure (With Examples)" by Flux:
The initial sketches of the landing page which were later refined using the framework provided in Flux's YouTube video.
I initially built the prototype using Sketch but imported the designs into Figma because that was the preferred tool of the development team.
Below is a carousel which begins with the "Create an Account" screen, then leads into the onboarding screens for creating a storybook. The latter screens show how a story can be added to the storybook and the two different ways to view the storybook itself.
How I arrived at this design solution: From the research findings, there was not only an interest in preserving stories but compiling them as well. This is where the design solution of "stories" and "storybooks" came from to allow users to perform both functions. You can think of a "story" as the individual pages of a book which can be comprised of text, audio or video files, and/or images and a "storybook" as the book itself.
The screen on the left shows where the users can upload files in bulk to have at the ready when creating storybooks and organize into folders in the meantime. The screen on the right shows an example of how the user can annotate and assign files.
How I arrived at this design solution: Based on the pain point of users not having a convenient way to organize and share files that they wanted to archive, I thought that having a page dedicated for uploading files in bulk would help alleviate this hassle as they could upload files and organize them into folders to be reassigned later. Concerning the screen on the right, the desire to be able to identify people in photographs, categorize entries, and accompany the file with a story or descriptionn came up during interviews so I made sure to include those functionalities.
This is where users can communicate with each other to provide updates, request files, etc.
How I arrived at this design solution: In reviewing the archiving process that most interviewees had, it usually involved messaging another person to request a file or to ask for more details. Being able to message others within the web app is a much more convenient option compared to email or text because upon receiving said file or information, the user can quickly add it wherever needed.
The screen on the left shows a tool that allows you to research historical events by searching for the event itself, the people involved, the date it occurred, or where it happened.
On the right is the blog where information and resources on a variety of topics that pertain to archiving are discussed.
How I arrived at this design solution: When reviewing the archiving process that most interviewees had, another pattern surfaced which was that most spent time researching historical events that the person they were going to interview had either lived through or were knowledgeable of. Therefore, I wanted to include a tool that allowed users to search for and filter through a wide range of historical events. Concerning the screen on the right, most of the interviewees spent considerable amounts of time researching archiving and interviewing best practices. Therefore, to provide additional resources on the topic, the blog would be used to offer tips and best practices.
Historical Event Search Tool
Blog
The individual sections of the landing page are shown below which includes the hero section, an explanation of how the web app works, who its for, testimonials, FAQs, and the footer.
To ensure an efficient and successful developer handoff, I followed the steps outlined in PhaseMag's article on the subject.
1. ✅ Created a style guide and design system so that the developer has clear parameters to follow.
Style Guide
Design System
2. ✅ Used a tool that allowed me to add notes to the designs which was Figma.
3. ✅ Provided design files and all necessary assets.
4. ✅ Provided an interactive prototype to illustrate the navigational structure intended for the web app, the primary user flow, animations, and the internal linking of the app using Figma and Autoflow.
5. Had a handoff meeting with the development team where I handed over the assets, asked and answered questions, and set clear expectations concerning the timeline and responsibilities. I also ensured or provided the following: