cft

Iternal | A UX Design Case Study

For the memories that matter most A UX & UI project | Redesigning a social online platform


user

Roy Kersten

3 years ago | 8 min read

Redesigning a social online platform built to capture your most personal moments.


The Brief

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.

Iternal’s logo
Iternal’s logo

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.

My role

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.
The group with Pritpal, Lena, Debbie and myself
The group with Pritpal, Lena, Debbie and myself

Key deliverables

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

Results

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.

Double Diamond

We followed the Double Diamond process with its 4 phases.

Double Diamond process
Double Diamond process


Discover

User Analytics

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.

Graph showing user analytics before and prognosis after the website’s redesign.
Graph showing user analytics before and prognosis after the website’s redesign.

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.

Competitor analysis

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.

Iternal’s direct competitors
Iternal’s direct competitors

User research

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
Affinity Map made up from the User Research
Affinity Map made up from the User Research

Overall we found 3 overarching themes:


Define

Persona Family

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.

Persona | Core demographic user Sarah Winters and her family
Persona | Core demographic user Sarah Winters and her family

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.

User Flow

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.

User Flow | Sarah’s journey on the website
User Flow | Sarah’s journey on the website

Develop

Design Studio

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:

Design Studio | A collaboration of ideas through sketching
Design Studio | A collaboration of ideas through sketching

Delivery

Iterating

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.

Low-, Mid- and Hi-fidelity wireframes | Clarity of offering on the homepage
Low-, Mid- and Hi-fidelity wireframes | Clarity of offering on the homepage

The solution

  • 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.

Low-, Mid- and Hi-fidelity wireframes | The onboarding pages
Low-, Mid- and Hi-fidelity wireframes | The onboarding pages

A Revelation

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.

The solution

  • 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.

Low-, Mid- and Hi-fidelity wireframes | Create a memory page
Low-, Mid- and Hi-fidelity wireframes | Create a memory page

The solution

  • 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.

Low-, Mid- and Hi-fidelity wireframes | Dashboard
Low-, Mid- and Hi-fidelity wireframes | Dashboard

The Solution

  • 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.

Style Guide

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.

Visual Design Style Guide
Visual Design Style Guide

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

Key learning

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

Testimonials

“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

Upvote


user
Created by

Roy Kersten


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles