Iternal | A UX Design Case Study
For the memories that matter most A UX & UI project | Redesigning a social online platform
Redesigning a social online platform built to capture your most personal moments.
Iternal is an online platform built to help people capture their most personal memories and share them privately and securely with those they love. We were asked to focus on encouraging users to both record and share memories.
The primary goals:
- Improve the onboarding process.
- Maximise homepage conversion.
- Improve the general UX of the platform.
The secondary goals:
- Refresh elements of the UI.
- Renewing the homepage, dashboard and menu.
What’s important to know is that we are designing a responsive website with a mobile-first approach because users access the website more on mobile and tablet than on a desktop.
The core demographic are females between 45 to 65 years old, the majority of this group have a good connection with their children and parents. We want the user to be able to pick up and understand the product from the home page to login and both create and share memories without assistance.
This was a 3-week collaborative project with three other designers during the 12-week UX Immersive Design Bootcamp from General Assembly. By taking a lead role during the start of the project, I established the initial structure of the work process — setting up the presentation and work boards with guidelines on how to initiate and organise research.
- I conducted user interviews and user testing to collect relevant data.
- I played a key role in synthesizing our user interview results into an affinity map to highlight the key findings.
- Taking responsibility for deciphering the pain points from the existing data analytics to create a view of where we want the business to be in the near future.
- Additionally, I led the design studio with the clients, acting as the group facilitator.
Several deliverables were required for the project, including:
Competitive Analysis | Personas and Scenarios | Experience map | Information Architecture | Design & Usability Testing | User Flows and Screen Flows | Wireframes | High Fidelity Prototype | Presentation to the client
The new design of the website provides users with the ability to:
- easily discover how the website works and what’s being offered.
- create a memory in a few easy steps before they have to sign up.
- see the memories they uploaded clearly on a personalized dashboard.
- ask for help or receive guidance if needed with telling their story online.
We followed the Double Diamond process with its 4 phases.
We started the project by understanding our client — Iternal — reviewing their user analytics and seeing where the initial pain points were. Our client shared the KPI’s with us and I created a graph showing the number of user sign-ups from November 2020 till February 2021. At that moment just a small amount of users were recording a memory compared to the users signing up.
We aim to achieve a higher number of users to sign up and for the existing user to record much more memories. I added in a new KPI — Memories shared — for the reason that it was mentioned in the brief to encourage more users to share memories, but there was no data being tracked. In my prognosis, the number of memories shared will correlate to the conversion rate.
To get the results, we will focus on:
- Increasing accessibility.
- Efficient and easy guidance with signing up, logging in and recording/ sharing memories.
- An approachable and interactive (engaging) dashboard that invites to record, upload and share more memories.
To understand the current market, we compared Iternal and their competition. We analysed 10 competitors in the data storage landscape, with five identified as direct competitors offering a space to share and keep your personal stories safe. The analysis primarily showed we needed to design a clear structure on the homepage with a step by step guide telling what the website has to offer. A common theme is a visual timeline with an overview of personal events where the user can customize the information for every story.
We wanted to understand how people capture and document special moments in their life so that we could understand their pain points in this area.
Our user research consisted of four outcomes:
- 52 survey results
- 15 user interviews
- Affinity map
- Key findings
Overall we found 3 overarching themes:
With the findings of our research in mind, we created the persona of Sarah, she is in our core demographic group. Doing so allowed us to keep the user at the centre of the design process, ensuring we met her goals. We created a scenario with her family to frame the problem and focus on the user needs as we moved forward.
We defined Sarah’s problems with a problem statement:
Sarah needs a way to organise her family stories and photos securely in one place in order for her family to access easily because her family is very important for her and she wants to preserve her family traditions, stories and pictures.
We have created a User Flow to show the journey the user makes when using the new Iternal website. We focused on the most convenient steps that Sarah takes through the website to complete the task of onboarding and creating her first memory.
Now that we have identified that the onboarding was the biggest pain point of the User Flow, we narrowed down our focus to design to this part. We successfully facilitated a design studio workshop with the clients from Iternal, gathered a range of great ideas to address the problem and prioritised them as a group to create our Minimum Viable Product (MVP).
“How might we” are questions to help develop the solution for a potential problem.
The question that was most important to our final design was:
How might we help Sarah document the past stories of her family.
The results looked like this:
To test ideas gathered from the design studio we created a Low Fidelity paper prototype and shortly after we developed a mid-fidelity prototype in Figma. After 12 users tested the wireframes, we worked as a team on the visual design for the high-fidelity prototype.
Iteration 1 | Clarity of offering
The Problem | Heuristic Evaluation
Resulting from user testing and heuristic evaluation on the — Before — page, it seems a key issue with the website was that there’s misguided information. One cause of this was the high amount of sign-up buttons and the unclear offerings.
- From the brief and user interviews, we knew that strong guidance in explaining the value of the platform is needed.
- In Low fidelity, we imagined this as an easy 1–2–3 step process.
- We made this more clear in Mid Fidelity with icons used as a clear visual explanation.
- In High Fidelity we created custom made illustrations with an easy to understand copywriting.
Iteration 2 | Onboarding
The Problem | Heuristic Evaluation
The user would start their journey by going through several steps followed by signing up. When landing on the “Create your first memory” page, the user doesn’t understand why they are creating the memory. On top of that, the whole process has 5 steps, that could be simplified.
Our initial idea was to guide the user through 3 onboarding screens to show them the benefits of the platform. The intention was to lead them into signing up. Yet, it frustrated users that there were a high amount of steps and a lot of data input. Instead of getting the results of all that effort, the user was asked to sign up. We realised that this form of onboarding is unnecessary, so we changed our user flow and the onboarding became redundant.
- We combined the onboarding message with the website values and offerings on the homepage.
- The onboarding turned into “How it works” on the homepage. We also decided to show the main Iternal feature — timeline — on the homepage.
Iteration 3 — Creating First memory
The Problem | Picture First
From the results of Low Fidelity user testing, it became clear that users preferred receiving information with pictures first.
- When we created the Mid Fidelity wireframes we realised we needed clear icons and imagery to prompt creating the first memory.
- Tailor-made icons were designed to elaborate the functions.
- We simplified the process and placed all 5 steps into 1 page.
Iteration 4 | Dashboard
The Problem — Heuristic Evaluation
As a team, we decided that though it was not in our brief’s scope, to work on improving the dashboard. We noticed that the dashboard doesn’t have a clear prioritisation and the main feature of the website — Timeline — is hidden in the menu. Reworking the Dashboard was a perfect opportunity to use ideas from our Design Studio brainstorm.
- In the Mid Fidelity wireframe we thought about designing an Information Architecture that would make the hierarchy of the features clear, reshaping the feature — Timeline — was our main focus point. In High Fidelity, we made it into a clear design with an appealing visual representation.
- The primary “Call to Action” button — Create A New Memory — should be included in the timeline section.
- An idea from the Design Studio — Family Tree — a feature where the user can add members of their family, was included on the Dashboard.
- The — Send a Message to the Future — feature, which was being developed by the Iternal team at the time of this project was also included in the Dashboard.
We created a style guide as part of the handover process for our client. This also enabled us to create a visual consistency within our high-fidelity design.
Our Final Prototype
Our final design included:
- Onboarding screens on the homepage: introducing the platform to the user
- Making your 1st memory: to get a feeling of how to upload memory with the help of prompts.
- Sign-up page: after uploading and reviewing your first memory.
- Dashboard: including a timeline, seeing your friend activity and a family tree feature.
See our high-fidelity prototype here
I have learned that many hands make light work, as a team we accomplished so much in a short amount of time. I came to realise to see the value in the different strengths your teammates have and combining these into making a fully finished working product.
In the first week after our presentation, Iternal implemented changes to the homepage. They are planning to use more of our ideas and suggestions in the future. What a great way to finish the last project of the Bootcamp.
You can see it at iternal.life
“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!”
Paul Wiseall,Founder of Iternal
“This is great! I can’t wait to build it, you guys have done a fantastic job.”
Stefan, Lead Developer