UI/UX applied to a website backed by a relational database using PHP and MySQLi: Tech Plan

Aleksandra Petrukova, André Cardoso, Andrés Hamburger

Applied UI/UX Design, web design MEQ-2

Click here to access Kitnote

Objective

Revitalize an existent note app with a contempurrary cat-lover makeover and improved functionality. Make the users experience a blend of cute modern design and enhanced features, redefining their note-taking experience and developing a easy-doing and efficient way to scratch their meows, capturing and organizing thoughts.

Description

Kitnote is a cute intuitive note-taking app that painless aids you in managing your thoughts and tasks. Designed for ease of use, Kitnote simplifies tracking your tasks, using the app for quick reminders or creating to-do lists. You can use it in all your devices to keep yourself organized wherever you go. Kitnote will become your essential cat companion for productivity, if it isn't already. 😼

Reason to be

Yeah it's just another note taking app, but did you look at it? Cats! I mean... Do you need a better reason? I don't think so.

But if you insist...

There are so many note-taking apps in the market nowadays... And they tend to offer a little bit too many options, and you may actually not need them. Many, many times, less is more. So We decided to make it simple for you. Stick with what you really need: know what you have to do.

Features

    Practical:

  • Cats ❤️
  • Easy to use
  • Organized
  • Simple
  • Intuitive
  • Modern
  • Cute
  • Responsive
  • Accessible
  • Did I mention cats?

    Design:

  • New logo
  • Minimalist Design
  • Simplicity
  • Grid layout
  • Colours for personal categories
  • Dark/light mode

    Actions:

  • Sign up
  • Log in
  • Add note
  • Edit note
  • Delete note
  • Choose note colour for personalized categories
  • Check/uncheck note completed
  • Filters:
    • Checked
    • Unchecked
    • By colour
    • All notes
    • Order by oldest/newest

OneNote by Microsoft

OneNote is a versatile note-taking app that combines the functionality of a traditional notebook with the flexibility of a digital workspace. It allows you to jot down ideas, create checklists, and even insert images, tables, and other multimedia elements directly into your notes.

    key features of OneNote include:

  • A multi-layer interface with three levels: each page is a canvas for your notes, grouped into sections comprising a notebook. This layout might take some getting used to, but advanced users might appreciate it due to its robust organization.
  • Superior rich text editing and media capabilities compared to Google Keep. You can import meeting details directly from the Outlook calendar and add hyperlinks to your notes.
  • Organization of notes into sections and notebooks by default. You can move notes between sections and notebooks, giving you control over how your notes are categorized.
  • Mobile-friendly app with a clean interface and intuitive features.

On the other hand, OneNote has its own set of limitations. It only offers local storage under Windows, which can be restrictive for users who need to access their notes from different devices. There are also text editing issues in OneNote. If you annotate a photo or some text, then insert some text above it, the annotations don't necessarily move with the photo and can become misplaced. Finally, OneNote has a somewhat outdated look and can sometimes feel overcrowded.

Keep by Google

Google Keep is a simple yet powerful note-taking app that's designed for quick, easy access to your notes. It's particularly useful for jotting down to-do items, creating checklists, and capturing quick ideas.

    key features of OneNote include:

  • A clean interface with notes displayed as widgets in the main window. You can compose a new note using the bar placed above the existing ones, and you'll see options to add an image or checklist.
  • Limited rich text editing and media capabilities compared to OneNote. However, it does allow you to add images, drawings, checklists, and voice notes.
  • Centralized organization of notes on the main screen with features to sort them. You can assign labels that act as folders and display them in the left-hand menu. Google Keep also lets you set colours and backgrounds of your notes.
  • Mobile-friendly app with a similar layout to the web version. It provides quick actions for creating a note and accessing different labels.

Google Keep has some limitations that can affect its usability. For instance, it doesn't allow users to organize their notes into folders, which can lead to a cluttered user interface and make navigation difficult. Additionally, some users have reported issues with data synchronization, including delays and the return of old or deleted items. Lastly, the text editing experience in Google Keep is not ideal. When users click in the middle of a note, a text box is created in the middle, which can result in an empty note with an empty text box at the bottom right.

Notes by Apple

Apple Notes is a straightforward note-taking app that's integrated seamlessly with the rest of the Apple ecosystem. It's designed to be simple and easy to use, making it a good choice for those who prefer simplicity over complexity.

    key features of OneNote include:

  • Integration with other Apple services like Siri, Shortcuts, and the Apple Watch.
  • Support for rich text and images.
  • Ability to organize notes into folders and subfolders.
  • Syncing across all your Apple devices.
  • Sharing options with others.

Apple Notes also has its own set of limitations. While you can share individual notes, you can't share collections or notebooks with others. Unlike some other note-taking apps, Apple Notes doesn't support rich text editing, which means you can't change the font size or style, apply bold or italics, etc., within a single note. These features, which are available in many other note-taking apps, are missing from Apple Notes. Another limitation is that Apple Notes does not support colour-coding or tagging, which can be useful for organizing notes.

Previous UI

    Previous login page
    Previous signup page
  • The sign up form is wider than login form for no specific reason. This creates a glitch when being dynamically generated.
  • The name referred to cats but the design barely reflect this
    small text box, big empty space
  • A Small and always visible text box blocking the layout and generating too much empty space in the page
  • Each note can have only 600 characters maximum
  • The button to add note on the is on the left side of text box. Normally it should be placed on the right side
  • In general, small buttons with no hover effect. The button to add a note is the only one with a hover effect applied to it
  • The filter buttons have no mouse pointer set (and no hover effect), so it's not clear if it's a button unless you try and click on them
    A narrow space to display the notes
  • The notes are shown in a narrow space, one on top of the other, so you can only see one or two of them before need to scroll the page
  • The buttons for note actions are all positioned together side-by-side on the left side of the note
  • The button to delete note is in between other two buttons, this can cause accidental unwanted deletion. It also has a confusing icon, it looks more like the ones used to cancel an action
  • The checked and unchecked notes have no visual difference besides the button icon changing, they have the same background colour
  • The logout button it's hidden bellow all the notes, forcing the user to scroll the page in order to find it

Improved UI

    Improved login page
    Improved signup page
  • Cats ❤️
  • New logo, reflecting better the thematic
  • A balanced login and signup form
    Notes in a grid layout, page with a floating menu
  • All notes showed side-by-side in a grid layout occupying most part of the page
  • Floating menu to add and filter notes discretely placed at each side of the page
  • The notes show a preview of the content, so you can read it full once you open the one you actually need to see
  • Buttons to check, open/edit and delete more logically positioned and increased space around them to avoid mistakes
  • Checked notes in gray colour to visually separate completed ones from the ones in progress
    Textbox to add a note in a modal
    Notes open and are edited in a modal
  • Use of modal to add a note
  • Notes with up to 1200 characters
  • Use of modal to open/edit the desired note
    Dark/Light modes
  • Dark/light mode option
  • A hamburger menu, with dark/light mode toggle and log out button, was added to the page
    Sort notes by color
  • Option to chose among 6 different colours, to create personalized categories
  • Improved filter menu, with added option to show notes by colour
Emma, 24 y/o, productivity enthusiast.
Persona The Productivity Enthusiast.
Name Emma
Age 24
Occupation Marketing Assistant
Background Emma is always on the lookout for ways to boost her productivity. She uses your note-making app to create to-do lists, set reminders for important tasks, and keep track of her marketing ideas. Emma values the ability to customize the look of her notes to visually prioritize and organize her thoughts.
Needs and Goals
  • Quick note-taking with a focus on to-do lists.
  • Customization options for note appearance.
  • Efficient filters to view completed and in-progress tasks.
Preferred Features
  • Background color customization for note items.
  • Task completion status indicators.
  • Easy-to-use update feature for note details.
Lily, 22 y/o, a cat lover.
Persona The Cat Lover.
Name Lily
Age 22
Occupation Veterinary Student
Background Lily is a cat enthusiast who uses your note-making app for a variety of purposes, including organizing her study notes, tracking appointments at the veterinary clinic, and even jotting down cute cat-related ideas. Lily appreciates the cat-themed design elements in your app, making her note-taking experience more enjoyable.
Needs and Goals
  • Efficient organization of study notes with a touch of fun.
  • Quick access to reminders for veterinary appointments.
  • Enjoyable and visually appealing cat-themed design.
Preferred Features
  • Cat-themed icons and background color customization.
  • Reminders for important veterinary appointments.
  • Seamless update and timestamp features for tracking changes.
Olivia, 35 y/o, fitness enthusiast.
Persona The Fitness Enthusiast
Name Olivia
Age 35
Occupation Personal Trainer
Background Olivia uses Kitnote to manage her fitness routines, client schedules, and nutrition plans. As a fitness enthusiast, she values a visually engaging and user-friendly app that complements her active lifestyle. Olivia seeks features that aid her in staying organized and focused on her fitness goals.
Needs and Goals
  • Streamlined note-taking for fitness routines and nutrition plans.
  • Visual customization options for a personalized touch.
  • Quick access to filters for managing different aspects of her fitness notes.
Preferred Features
  • Visual appeal with background color and icon customization.
  • Efficient filters for organizing workout and nutrition notes.
  • User-friendly design for a seamless fitness planning experience.
Brian, 28 y/o, creative freelancer.
Persona The Creative Freelancer
Name Brian
Age 28
Occupation Graphic Designer
Background Brian, a creative freelancer, relies on Kitnote to organize design concepts, client details, and project deadlines. He appreciates the app's cat-themed design, finding it a unique and enjoyable touch to his note-taking experience. Brian seeks features that enhance his creative workflow and provide a personalized touch.
Needs and Goals
  • Creative tools for jotting down design ideas and concepts.
  • Personalized customization options for a unique note-taking experience.
  • Efficient organization of projects and tasks.
Preferred Features
  • Cat-themed icons and backgrounds for a touch of creativity.
  • Quick access to note previews for streamlined project management.
  • Personalization options, such as color choices and visual aesthetics.

Mood Board

Mockup

Prototype

Testing

Lighthouse Analysis

Lighthouse analysis on desktop: 100% performance
Lighthouse analysis on mobile: 95% performance

Future Improvements

  • More cats ❤️
  • Personalize user experience welcoming them by showing their names
  • When adding a note, change background colour of modal when choosing a specific color
  • Add rich text editing feature (bold, underline, italic, list etc)
  • Allow user to open a specific note only by clicking anywhere on it instead of use a dedicated button to do that
  • Hide note when checking it done and show only when using the specific filter
  • Create a filter to show deleted notes and add the option to delete them forever if desired
  • Add reminder configuration and notification
  • Add the possibility to share a note
  • Dark mode in server storage and applied to the login page so the user can have it activated even if they log out and log in again in another device

As you can see, Kitnote is not just another note-taking app. It's your best feline-inspired companion for a more fun and efficient note-taking experience. With a cute contempurrary cat-lover makeover, Kitnote combines minimalist design with essential features to keep your tasks organized. The renovated UI ensures a smooth and visually appealing interaction, offering a grid layout for easy access to all your notes. The addition of dark/light mode, customizable note colors, and a user-friendly floating menu increases the overall user experience.

Our focus on simplicity and functionality sets Kitnote apart in a market crowded with saturated options. We understand that sometimes less is more, and we've updated the app to prioritize what truly matters - helping you to stay on top of your tasks. As we move forward, Kitnote is committed to continuous improvement, with plans to introduce more enjoyable cat-themed elements, personalization features, and additional enhancements based on user feedback. Come with us in the joy of note-taking, where simplicity meets productivity. Welcome to Kitnote - because who wouldn't want a touch of feline charm in their daily tasks? Come scratch your meows with us! 😼