Bedside Chats
Landing Page for iPhone App and Desktop
Remote/The USA
Team
Andrew Nashed - Developer & Product Owner
Aline M. Araujo - UX/UI Designer
Luiza Souza Corrêa - UX/UI Designer
Natalia FM Rodrigues - UX/UI Designer
Tools
Figma
Miro
Zoom ( remote communication)
Objective
After validating a customer segment and creating a final design concept during a previous project with Besides Chats, the design team was asked to redesign the company’s landing page for the final product.
Problem
The old Besides Chats landing page did not convey information effectively. Data was disorganized and disconnected. Furthermore, the content did not reflect the value of the product to its customer segment.
Outcome
The design team completed a benchmark against Bedside Chats competitors and evaluated customer responses to their products and services. The information architecture for the landing page was then developed based on the relevance of topics and the value users attached to them. A final UI was eventually developed.
Project Brief
The aim of this project is to redesign the Landing Page of Bedside Chats, a new company in the market. The landing page should promote and sell the product.
For this project, the page was designed for the web, in a standard format, without responsiveness nor worrying concerns with mobile features.
Bedside Chats Logo
🤔 What is Bedside Chats: a digital tool to guide conversations between physicians and senior patients. This tool is designed to help patients remember questions they want to ask their doctor during a visit together. It helps patients find questions related to their specific health concerns and needs and allows them to save these questions and organize them in lists.
🏥Device Users: senior patients Other Stakeholders: health care systems, Families, Support groups, Medical Societies
🏇🏻Competition: sources where patients get information on the types of questions to ask a doctor (Google, WebMD, Mayo Clinic, Cleveland Clinic, etc).
Design Goals
Research relevant content to include in the new landing page
Build a benchmark analysis
Research content hierarchy
Redesign the landing page
Research
In order to improve the new landing page for Bedside Chats, the team decided to conduct research. The research was divided into the 6 phases mentioned below:
Current Landing Page
Objectives Map
Who are the Bedside Chats’ competitors?
Benchmark
Content Research and Analysis
Hierarchy Analysis
1. Current Landing Page
We first did a quick analysis of elements used in the current landing page.
2. Objectives Map
To perform a more complete analysis, we made an Objectives Map (Figure 1) with the company's goals from 4 different perspectives (for who, where, objectives, and how) This visual helped the team to keep all company's priorities in the spotlight while developing the landing page.
Figure 2: Objectives Map.
3. Who are the Bedside Chats competitors?
Because Bedside Chats is a new company and hadn’t the product in the market yet, the team decided to further investigate what competitors were doing right and wrong.
After talking to the Product Owner, we created a list of competitors and/or similar companies:
4. Benchmark
Analysis of competitors’ landing pages split into sections based on their topics to study their narratives. See them bellow.
5. Content Research and Analysis
Sill without any data from Bedside Chats, the team started to collect some data from Bedside Chats' competitors’ reviews.
👉 Results: the analysis generated important insight from the data collected, as shown in the image below.
Data Collected
Next step we set the data collected in an affinity map format in order to keep the data organized by topics
Affinity Map
5. Hierarchy Analysis
As the objective of a landing page is to make the visitor perform the main action desired by the company (in this case, to download the app), the team’s main objective was to highlight the strengths of the company and its services on its landing page.
Next step: we created a Priority Pyramid Diagram (see image bellow) to visualize the top 10 features that customers appreciated from competitors.
Pyramid Priority Diagram
Next step: we translated the Priority Pyramid Diagram into a landing page Flowchart format (See image bellow).
Landing Page Flowchart
Wireframe
The design team created a wireframe in 3 stages while meeting with the developer at each end. The goal was to find out what would be feasible and what would not, based on the team's skills.
After the 3 meetings with the developer, we added the final changes until we achieve a design that was possible and viable for the company.The aim of this project is to create an iPhone app for Bedside Chats from the existing Web Application version.
Bedside Chats is an online digital product that helps seniors better prepare themselves for medical appointments. Their product is made up of a Web Application and the company intends to create iPhone and Android apps. Their official website can be found at bedsides.com
For this project, the app was designed for the iPhone 11 version, in a standard format, without responsiveness. The design team consisted of 3 design students who volunteered while learning with a real case project.
High Fidelity Prototype
After building the wireframe along with developer recommendations, we started to focus on the UI and the final prototype of the landing page.
Here is the final landing page design. You can find below an interactive prototype page & the full picture. The aim of this project is to create an iPhone app for Bedside Chats from the existing Web Application version.
Screenshots
🧠Learnings
The main takeaway of each project is to develop skills and knowledge for the future. That is why we could not ignore the opportunity to reflect on what we've learned from this project as designers.
Achievements:
The phase dedicated to analyzing competitors' landing pages was crucial to our understanding of what was working and what was not. This allowed us to see the features that add the most value to customers.
The competitor analysis was also helpful for the UI phase, providing inspiration from different sources for the functionalities and aesthetics of our landing page sections. This helped us not to waste time and effort trying to reinvent the wheel.
The most fundamental aspect of this project was having the team in tune with each other through all parts of the process. Communication between the 3 members was excellent and helps us to keep fixing small errors from the beginning of the project. This helped us to avoid any huge problems in future design.
Learning from our mistakes:
We regret not observing the developer process earlier. We only did this after the final design was ready and it was important for us as designers to understand his difficulties with implementing certain elements. If done earlier, this would have saved us time by reducing the number of meetings needed to make the final changes.
At the end of this project, we learned how to use the Figma community resource, which helped us streamline the UI process. We would have liked to have done more research on this tool in advance to avoid a lot of time spent in the production phase.