MemorySafe is a fictional/futuristic service, which hopefully can be transformed into reality in the future – saving your memories along with the feelings and to restore them if needed.
Nowadays we can record and take pictures, but this will bring back only visual experiences, but not the feelings, how and what you felt in that moment.
The business is 2 years old, so the reach is still restricted and mainly known in their industry – medicine and technology.
When people get sick, have Alzheimer, dementia or just simply because we are getting old, and memory is not as good, we lose important memories; e.g. how we felt on our first day in school, our first kiss, how it felt when our baby was born or in worse cases, we can’t recognize family members.
• Promote their service;
• Offering a step by step guide how the service works;
• Attracting customers to book an appointment for an assessment;
• Provide a clean feel and easy to navigate website;
After pitching my idea and interviewing family and friends with age range 27 years old – 60 years old, I have developed three potential customer personas. I wanted to have a better structure and more visual appealing layout for the personas, so I have used Xtensio.com. Please click on each persona to read more details.
Files saved in a separate folder called Personas.
- Susan – The Psychologist
- Patrick – The Neuroscientist Researcher
- Mary (Patrick’s Mum) – The Modern Upper Class Lady
• Well informed and interested in technology and medicine;
• They know about the service already from their peers, but they want to find out more;
• Financially secure;
• Average age 45 years old;
• English speaker;
As a general user, I want to navigate my way easy on the website, so I find the information I need.
As a general user, I want to find out how this process works, so I know what to expect if I decide to book and appointment.
As a general user, I want to get the contact details easily, so I don’t have to browse too much on the website.
As a general user, I want to know who founded and who is partnering with this company, so I can do an in-depth research.
As a general user, I want to find out if anyone else had this procedure done and the outcome, so I know what’s the feedback.
As a technology savy user, I want to find out if any tech organisations are affiliated with this company, so maybe I can partner with them as well.
As a medical practitioner, I want to find out if any medical organisations are affiliated with this company, so maybe I can partner with them as well.
As a medical practitioner, I want to find out how this works, so I can recommend this service to my patients.
As an interested user, I want to follow the organisation on social media, so I keep an eye on how they develop.
As an interested user I want to be able to book an appointment online, so I don’t have to ring them.
As a person who booked, I want to find their location on the map easily, so I’m not late at the appointment.
As a person who booked, I want to find their contact details easily, so I can get in touch if I have any questions.
I have created wireframes for desktop and mobile with Balsamiq, which are saved in a separate folder called Wireframes.
Navbar for an easy navigation displayed on top of each page with a logo on the left hand side, a phone number beside the logo and four tabs: Home, About, Contact, How it works and a call to action button Book Here on the right hand side.
The navbar is responsive – under 768px width it transforms in a “hamburger” icon on the right hand side, phone number stays in the middle and the logo on the left hand side. The logo is linked to the home page.
The active navitem will change it's color from white to turqouise.
For the desktop view, there is a underline hoover effect added to the navitems, bar Book Now button.
Book Now call to action button placed on the navbar on the right hand side. When the screen is under 768px, the button collapses together with the other navitems. Having a modal instead of a new page, the site loads faster and it's accessible from all pages. When the button is clicked
Footer has four sections composed by Privacy, Terms & Conditions, Copyright and Social media icons (Facebook Twitter, YouTube). Is displayed on each page for the user to read more about the policies they have in place and to visit the social channels.
Hero image is placed on all pages, bar the Home page. It has a simple layout, mettalic-green background with white text. It gives a clean feel, but also futuristic. The hero image frames well the most important text on the page. The image is also responsive.
Testimonials section is on the Home page and showcases testimonials of two former clients, who had this procedure done. I wanted to highlight the fact that people will take advantage of this service for different reasons.
Profile cards are placed on About page and it features the founders of this organisation. A headshot and a short bio for each of them, highlighting their position and education.
• Phone number on the navbar should be made clickable and automatically to connect to skype or another service to facilitate an instant call.
• Useful FAQ about the service and process;
• Q&A section;
• Make the contact form work;
• Geolocation for the map;
• Copyright, Privacy, Social media icons and Terms & Conditions linked to the right content.
• Translation option for other languages;
I have created this website with the help of a multiple technologies:
• HTML for the structure of the website;
• CSS – to add styling to the HTML structure;
• Visual Studio Code as the IDE;
• GitHub Desktop for pushing to GitHub, comparing the changes and look at the history of the changes that I’ve made along the way.
• Bootstrap for adding responsive elements;
• FontAwesome was used for the icons that I have used on the site;
• Google Fonts for adding two font families: Raleway and Allerta Stencil;
• jQuery to reference Javascript needed for the responsive navbar and the Book Now modal.
• Balsamiq – to create the wireframes.
• AdobeXD – to create prototypes of the pages and see how they link together.
• PhotoPad Photo editor – I have adjusted the color of the icons from the How it works page.
please click on the separate document TESTING.md
.
This project was developed using the Visual Studio Code, committed to git and pushed to GitHub using GitHub Desktop. To deploy MemorySafe to GitHub Pages from its GitHub repository, the following steps were taken:
- Log into GitHub.
- From the list of repositories on the screen, select andreeaiosip/MemorySafe.
- From the menu items near the top of the page, select Settings.
- Scroll down to the GitHub Pages section.
- Under Source click the drop-down menu labelled None and select Master Branch
- On selecting Master Branch the page is automatically refreshed, MemorySafe is now deployed.
- Scroll back down to the GitHub Pages section to retrieve the link to the deployed website.
To clone this project from GitHub:
- Follow this link to the MemorySafe GitHub repository.
- Under the repository name, click "Clone or download".
- In the Clone with HTTPs section, copy the clone URL for the repository.
- In your local IDE open Git Bash.
- Change the current working directory to the location where you want the cloned directory to be made.
- Type git clone, and then paste the URL you copied in Step 3. git clone https://github.com/USERNAME/REPOSITORY
- Press Enter. Your local clone will be created.
There are no differences between the deployed version and the development version.
To change the colour of the navbar “hamburger” icon, I had to overwrite Bootstrap rules and I have found a code on GitHub that helped me to solve that bug.
The hoover underline effect for the navbar tabs, I got the inspiration from a Youtube video.
My mentor, Simen Daehlin helped me to implement the Book Now modal into the navbar.
The content on the website is all fictional and written by me. For the bios for the founders, I researched for a more medical wording and I’ve got my inspiration from psychologytoday.com.
• I have sourced photos that don’t need copyright, from Google pictures and from Unsplash.
• For the icons on the How it works page, I have sourced them on Google pictures and recoloured them in Photo Editor, PhotoPad, so they will match the colour scheme of the website.
I received inspiration, suggestions and constructive feedback from my colleagues at Code Institute, my friends and my mentor, Simen Daehlin.
The content of this Website is for educational purposes only.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
