Bedside Chats: Healthcare iPhone App
Remote/The USA
Disclaimer
This project is confidential. As a team of professionals, we talked to the project owner and decided not to show the entire project to avoid copyright issues. Instead, we are just showing a few screens with the owner's permission.
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)
While working with a potential health-focused start-up, the design team needed to translate their web product interactions into an iOS version. The team also needed to communicate effectively with the product developer to ensure the solutions were viable across all team specialties.
Problem
The main challenge was that we had limited resources as a new product on the market. The team consisted of new designers and a new developer. To overcome this barrier, we guaranteed frequent communication with the entire team until the end of the product development.
Outcome
The design team conducted comparative research and the final UI proposals were developed using pre-existing interaction solutions from the most popular apps on the market. The team successfully communicated with the developer and the iOS app is available in the App Store.
Objective
Project Brief
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.
App’s Previous Version
🔍Research
Design an iPhone 11 app from an existing Web application in an intuitive way for users (e.g. buttons, information architecture, interactions)
User Interface (UI)
Submit and prepare the file for the developer
Based on the design of the existing Web application, we decided to do some research to build the mobile app, including a workshop and comparative research. This would allow both applications to be consistent and intuitive to users.
1. Workshop: ideation + voting + discussion
The objective of the workshop was to include the main features of the Web application in the mobile app. So that the functions of the two applications were consistent and that the UI was not compromised.
Despite the instructions mentioned in the images below, the workshop had a total duration of 1h30, in which the team was able to finish 4 of the 6 most important screens of the application (enough for us to kick off the project).
The workshop was created from an inspiration from “Design Sprint WORKSHOP - (Lightning Decision Jam AJ&Smart)”.
🔍2. Comparative Research
During our design process, an important factor for us was not reinventing the wheel. We then used one of the possible solutions, which is to carry out comparative research on screens from already existing apps with similar functionalities. We used the Mobbin resources to do so.
You can see below some of the screenshots we took as inspirational ideas to create the final version of some of our screens.
Design an iPhone 11 app from an existing Web application in an intuitive way for users (e.g. buttons, information architecture, interactions)
User Interface (UI)
Submit and prepare the file for the developer
Figure 1: Descriptions underneath titles
Figure 2: Icons
Figure 3: Easy to press to record
Figure 4: Conversation history and audio recording
🗣️3. Communication with the Developer
Communication is one of the most important parts of the process for the team to stay fully in tune. During the process, we realized that having the file shared with the developer wasn't useful enough, so we created a method of leaving annotations next to each screen and signing the feature descriptions.
That way, the developer would be able to fully understand the design and functionality of the application he would have to program. Also, if there was something not possible to code, he could let us know before the final design, and we would make changes that would match his abilities.
You can see these notes in the pink rectangles near each screen:
Figure 5: Communication with the developer through Figma notes in pink.
🎨4. High-Fidelity and Prototype
After building the wireframe (not sharing due to confidentiality), we started designing the final iPhone screens, focusing on the UI and the final prototype.
We created about 80 screens, however, we want to respect the confidentiality of the project and we are showing only some (with the owner's permission).
Here are some of the screenshots we can share with you:
Sign up
List of questions
Search
Question Section
Practitioner profile
🧠5.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:
Through the workshop, the team was able to brainstorm many different ideas, which resulted in 4 mockups of the 6 screens we needed. In addition, we all participated in a democratic process for choosing the best ideas ("voting"). In the final phase ("quickly organize"), the team engaged in a discussion of design decisions, in which all members reported feeling that their ideas were appreciated. The final screens often merged ideas!
Our design process involved communicating with the developer many times so that we could develop a feasible-to-coded design. The method of communicating through the notes we created (the pink notes) in the Figma file was useful for him to understand and get in touch with us when necessary.
Learning from our mistakes:
Although our design was developed for the iPhone 11, we realized that our design would have more potential if we had researched the most common iPhones purchased by the target group we were designing for (elderly people). This was an important lesson that we are taking to our future as designers as we plan to include more research from the earlier design stages.
Documenting the design process is extremely important. When many people have access to a document, accidents are likely to happen. For example, a screen can be accidentally deleted or erased, which would prompt the team to redo the work and delay the final delivery.
One of the biggest challenges we had on this project was that we didn't have a deep UI background. We learned later that creating the design system would have helped us create a more consistent design for the app. For a future project, we plan to include more UI-oriented production methods.