Iternal — Make your life story
Responsive App | UX\UI Consultancy | Client Project | 3 Weeks Sprint | Group
Overview
I worked with 3 fellow UX designers, our client Iternal, and current and potential users on my final project as a UXDI student at General Assembly. After 7 weeks of intensive training and guidance on user research, interaction & interface design, prototyping & testing, we took on the project autonomously in a three-week sprint.
My role: This was a collaborative project. We each conducted our own usability interviews, user testing and synthesized our results.
I took the lead on the organization of the interviews/user testing with existing Iternal users, research on competitors and understanding of prospective users. I also led the digital prototyping process, by establishing the design system in Figma file for the team, and owning the development of the first digital iteration on Figma. With my background in Design, I was comfortable translating concepts into mock-ups and prototypes, and I developed visual illustrations that were reflected the core brand values.
Iternal is a digital product built to help people capture their most personal memories and share them privately and securely with those they love.
We were asked to create a mobile-first design for their responsive web app, as their users are currently skewing more to mobile and tablet.
We helped our client, Iternal to gain more users to sign up by improving but also to uploading a memory by improving the on-boarding process, maximizing the homepage conversion, and improving the general UX of the platform.
Our UX Process
We used the Double Diamond process as guidance: explore and research, analyse findings and re-define the problem to develop and deliver a user-led and impactful design.
However, the process was not linear, we found ourselves working on little double diamonds within different phases.
DISCOVER — Who are Iternal’s competitors and customers, and how does Iternal compare?
We started our research by analysing user analytics based on their Iternal’s KPI’s, identifying possible usability problems, Iternal’s competitors and talking to Iternal’s current users to get a general understanding of the industry.
User analytics — Nov 2020-Feb 2021
Iternal is a brand new company, as they started out in the end of 2020. They informed us that even though they have a lot of visits on their homepage, not many people decide to sign up and even less decides to create their first memory. They also pointed out that the majority of their current users are women aged 45 and 75 older.
This is a prognosis of what we hope to achieve:
- Increase the amount of users that sign up
- Incentivize people to upload more memories
Heuristic evaluation
Then, we did a heuristic evaluation on the current website based on usability principles, to reveal insights that can help enhance and deliver a product that fulfills the user’s needs.
The main findings were:
- overwhelming amount of sign-up buttons on the homepage
- misguided content (images and wrong language) causing the benefit offered to be left out.
- user doesn’t understand what they are doing is creating the memory on the Create your first memory page
- the whole process has 5 steps that could be simplified
Moreover, even though it was not in our brief’s scope, we decided to work on the dashboard. We noticed that the dashboard doesn’t have a clear prioritization and the main feature of the website (timeline) is hidden in the menu.
Competitor analysis
Next, we conducted a competitor analysis on USPs (Unique Selling Points) of the direct players on the market to help us understand Iternal’s position and we selected few indirect competitors to have a different perspective.
Our key findings were:
- Clear explanations of the offering of the product
- Step by step guide of how to use the product
Visual timelines are very popular because they show :
- relevant information without overwhelming the users
- an overview of the events and each information can be customise
User research
Our next step was to find out who our potential users are.
We surveyed 52 people and we asked them about the reason, importance and storage of memories.
To dig deeper into the true nature of our target users we interviewed 15 people, who are mostly between 47 and 70 years old.
We tested Iternal’s existing product with their existing users based as well as other users which help informed every decision we made throughout the project.
SYNTHESISING THE PROBLEM
Affinity Mapping
Across the team, we used different methods of synthesising and interpreting our interview data. But nothing was more effective and collaborative than using the affinity mapping method.
Using the interactive board, Miro, we wrote down each insight (such as observation) and user quotes, group them on the wall organically to identify trends and patterns. We also used a proto-persona template and empathy mapping to draw our main users to create user personas.
We learned that there are three patterns on why people care about memories and their habits and behaviors towards them.
DEFINE — What problem are we trying to solve?
The trends detected in our data from the user interview enable us to create a walkthrough of a typical journey as a user that tries to create a memory. We divided our user paint points into two key areas.
- The homepage
- The recording of your memory
In these two parts of the journey, the user felt confused about how the process works and frustrated because of the lack of information.
We focused on these two parts of the journey for our project.
Our Persona family
We believe that Iternal connects families and bring different generations together. On that note, we decided to create a persona family that would target all three main generations.
We made this choice after receiving the feedback and completing our user interview research. We concluded that the majority of users were elderly but to fully benefit from all the service has to offer, all generations were taken into consideration.
For the purpose of this project we focused on Sarah, who is in her 50s and is a married and working mum of two teens.
For the purpose of this project we will focus on Sarah. She is 50, she works as a PA and lives in North London. She is married and has 2 teenage kids.
Sarah loves spending time with her family, usually does cooks them Sunday Roasts, and takes lots of pictures on her phone. She used to visit elderly parents, but now she can get in touch with them through video or phone calls.
Her frustrations are that now that her parents can’t visit, she is finding it difficult to connect her children with their grandparents. Also, she has a lot of pictures in different formats which she finds hard to organize.
She stays connected with her family and friends using social media. She believes that telling stories brings families together. In-fact she says :
“I want to preserve my family’s tradition, memories and stories, because this is what makes us who we are”
Problem statement
Based on Sarah’s needs and frustrations she is facing we have created a problem statement — a way to clearly define our users problem.
Sarah needs a way to organise all her family stories and pictures securely in one place, in order for all her family to access easily.
Because her family is very important for her and she wants to preserve her family traditions, stories and pictures.
User flow
To visualize the steps needed to achieve Sarah goals and provide a solution when using the new Iternal website. We focused on the happy path, an optimal journey user where everything runs the way it’s intended to run.
DEVELOP — Ideation through Design Studio
After a week of immersive research and re-defining the problem, we entered the design and develop phase by conducting a design studio (co-creation workshop) with Iternal’s Team.
Design Studio
A design studio is where designers, researchers, developers and stakeholders come together, define the problem and ideate on the solution. The objective is to generate ideas and solutions to a specific design problem in a large quantity within a set amount of time.
Before we started, we explained the objectives and procedure of the Design Studio in a short introductory presentation, warmed up with a “draw as many apples as possible” sketching session.
Then, to make the design studio as useful as possible we give guidelines on which problems we were trying to work on in the session. By formulating question-based on How Might we’s” structure keeping the problem statement as reference. The goal is to unearth a wide range of ideas with unique, specific solutions.
This was a great experience, there was a great collaboration between the Iternal’s team and us and they shared many interesting feature ideas. The clients loved the Design Studio experience so much, that they will use this process again.
“We loved it, it was such a cool session…we will be doing it again in the future” — Paul, Iternal Co-Founder
After two hours of sketching and critiques, we conducted a feature analysis axis and divided the features into those which are essential to implement and easy enough to implement immediately. The key outcomes from the design studio were:
DELIVER — Designs based on user testing, iteration and user insights
Prototyping and Testing
For this project, we tested the prototypes with current Iternal users and potential users from our interviews. We tested Each iteration of the prototype was tested with the users and developed according to the testing results. We recorded each user’s actions and comments in Figma and the decision made to each version.
Design Iterations: From Paper to Digital
For this project, starting with paper prototyping, we iterated on over 5 versions of prototypes based on user feedback from testing. We selected the most impactful changes that we made.
We started with a paper prototype (low-fi) where the user would start their journey by creating the memory first and then signing up.
Overall this is what’s we find out :
- In low-fi, the five users tested felt frustrated, even manipulated into investing time inputting information and pictures and then being asked to sign up.
User responses during the testing.
“I feel a bit frustrated. But since I finished it I wanna save it.”
“I need to sign up or I can’t see it?”
- In mid-fi, we included a few onboarding screens between the homepage and the sign-up page, with the memory creation only done after sign-up. However, after testing on 7 users, it was clear that these pages were redundant, as all the messaging just needed to be clearer on the homepage, and not repeated.
“Why I need to get trough this area again? I already understood the benefits in the homepage.”
- In hi-fi, the extra onboarding screens were scrapped, and ‘how it works was added to the homepage by creating clear illustration to show how the product works. A new key feature of a timeline was added and shown upfront, so users knew what they were getting before they sign up.
Homepage — Clarity of Offering
The on-boarding turned into “How it works” on the homepage
- Step-by-step guide not only helps users understand the product, but also understand its value
- A visual explanation because users found there was not enough information
- Custom-made illustrations to create clear and easy. understanding
Create your memory page — Picture first
In our user interviews and testing, it became clear that there was a trend towards ‘photo-first’ memories. Meaning that users wanted to organise their memories through pictures, and add comments to compliment them.
We simplified and placed all the five steps into one, by creating a prompt page (that helps to guide the user towards what the theme of the story could be)
Moreover, the testing showed the user preferred receiving information with a picture first:
- Clear icons and imagery to prompt
- Tailor-made icons
Dashboard
We focused on the structure of the dashboard. We decided to focus on the informational architecture of the dashboard as well as the accessibility.(explained a bit lower in “Branding”).
Based on user feedback, we decided to:
- Timeline and message to the future are the main features on the dashboard where the user can interact with and connect with the other members too.
- Family tree — add a new feature (inspired by the design studio and extremely excited users who tested the mid-fi prototype)
- Combine the ‘’Invite friends’ and ‘Friends’ activity into one feature
Branding
Ensuring accessibility in our visual design
One of our main aims was to ensure that the designs would target a diverse customer range and make their experience as smooth as possible. Everyone should have the ability to understand, navigate and interact with Iternal’s website.
Statistics/ Research showed that there was a prevalence of a specific demographic range in user engagement between the ages of (eg 45–70 years old). The website did not meet the accessibility standards we strive for, so we focused on ways to make the user experience as simple as possible whilst offering all necessary options.
This included an Inclusive Design Principles approach by choosing larger fonts and a combination of high-contrast color combinations to make the experience easier for users with impaired vision, whilst not affecting the experience of users from other groups.
Design system
To keep all our decisions organized we have created a design system. We used the Iternal’s branding colors and we distributed them according to the accessibility testings.
Presentation
We delivered the design to our client in a 20 minutes presentation which included the story behind the research, the design, a hi-fidelity prototype demo walkthrough and our recommendation of the next steps.
Demo prototype
Conclusion
Next steps
Due to the constraints of time and resources of the sprint, there are ideas and problems we did not explore but thought would be beneficial to our client. The next steps we recommended to our client included:
- Develop further the timeline by adding filters that help the user to find what they’re looking for by categorizations
- Incrementing a gallery system that will organize media based on the user’s need and competitor analysis
- A collaborative experience by exploring the possibility to allow the user to connect through the family tree
Client feedbacks
The client was impressed with the amount of work produced in such a short amount of time and we receive great feedback!
“I am blown away…you guys have fully understood what we are doing, who we want to talk to and what we want to achieve…Your designs are approachable, professional and friendly…with clear rationale and a lot of attention to detail…Thank you, it’s incredible!”
Their lead developer said:
“This is great! I can’t wait to build it, you guys have done a fantastic job.”
Feedback from the class:
What I’ve learnt
This project was an interesting topic that not many have looked into. I really enjoyed the entire process of design, it made me re-discover the importance of memories and was surprendly interesting connecting in a particular way to the user because of the matter discussed.
I explored two areas that I considered vital to practice a user-centered design. By understanding how the user perceives, uses, and interacts with the product creating a design that evokes emotion in the user whilst providing a service that is positively perceived by as many people as possible. (emotional & inclusive design)
I’m proud, how my team and I managed to collaborate and not to lose focus on the main brief throughout the project. During this sprint we also had the opportunity to learn and practice other concepts like working with clients and stakeholders, facilitating workshops and solving real business problems.
It had been very enjoyable working with my team, from whom I learnt a ton. I’m proudly happy to conclude my last project at General Assembly with this challenging and interesting project.
Iternal implemented changes to the homepage within a week, and plan to make the additional changes in the future. This was a fantastic outcome!
Check out the website https://iternal.life/
