InboXi

InboXi is an app & web-platform that organizes your emails, making it easy for you to find and follow your emails and newsletters.

Brief

InboXi allows you to import all of your emails into one platform, sorting them by easy to navigate folders/feeds. The user can set up the folders to import & sort emails automatically from different senders. In addition, the user can define a reminder to remind him when to check/follow-up on his unread emails. The folders/feeds can be shared between users freely.

Market Survey

In order to find what users are searching in their emails app, I conducted 3 observations.

I watched how they are using their mail and asked question in between about their actions. I found a couple of issues they encountered, and made fixing them as my goals for the future app/web platform:

• Mails tend to get lost in the inbox
• Users forget to check their emails
• Users do not have time to sort email and newsletters into feeds/folders
• General difficulty to search for lost mail in the inbox
• No option to share multiple emails/folders with others

Competitors research

I searched for inspiration, examples of apps\platforms which have the same goal — to organize your emails and make it easy to track them.

I found 3 competitors that serving almost the same idea, they support newsletters but they don’t support simple emails that are received in the user’s email:

Panda:

Panda is an app that shows the user all the interesting content by subscription name.
The user can adjust how he want to see that important information.

The issue:

none-RSS content cannot be categorized by the app. It simply doesn’t show it.

Feedly app

Feedly is designed to help you build your own news feed based on your favorite topics. Just search for a favorite site’s name to follow it, or look up for a topic to follow relevant articles.

The issue:

Just like Panda, this app has a problem with none-RSS content which cannot be categorized by the app. It simply doesn’t show it.

Feedbin app

Feedbin has a tagging system to organize your content into categories. There is an option to sort by unread & also starred content. Feedbin’s main feature is search. Not only can you search all your content by keyword, but you can also save search criteria. That way, you can set up a dynamic folder that gives you a quick overview of a specific topic.

The issue:

No reminders to encourage the users to finish reading his newsletters.
No option to share multiple emails/folders.

Storyboard

To show what my interface does and how it is used to accomplish tasks in a real usage scenario, I created a storyboard.

Storyboard:

Character name: Lyla.
Lyla is a designer which receives a lot of emails from her customers. The problem is because of the mass of emails she receives sometimes emails get lost in her inbox and this issue affects her business.

Wireframing

Wireframe of creating an account and connecting the user’s email to the app:

1.In the first window the user can log in or sign up.

2.If the user choose to sign up they have an option to connect via google or create an account.

3.The user needs to enter the email account they want to connect.

The “Home Page” and “Add Folder” page:

1. Home page includes all the folders that were synchronized automatically.
The home page also includes an action button which allows the user to add new folders.

2.On the “Add Folder” page, the user has the option to synchronize the folder with as many email addresses as he wants, add reminders and also customize the folder’s logo.

3. On the “Reminder” window the user can choose when he wants to be reminded about his unread emails: daily, monthly and even yearly.

“Email Feed\Newsletter” page and “More” popup window:
1. I designed the page to be scroll able, similar to the Facebook feed, so the user can navigate his emails more easily. Every email is presented as a “card’.
Every card shows the email title, description and picture (if the email contains a picture).

2. In the “More” popup window the user has additional options such as “Move to Folder”, “Set as read” and set as “Read later”.

User testing

With wireframe I chose to test my design on 2 test subjects between ages 27- 60 that are using smartphone casually.
I gave them several tasks to accomplish in order to see if the app/platform is intuitive and if it has any major usability issues.

After analyzing the results, I decided to implement the following changes:

• In the task creating folder, I changed “Folder’s Pattern” to “Folder’s Logo” to make the function a bit more clear.
• I changed the Bottom Menue’s color to a brighter color to make it more visible.
• In search tab where the user can search by dates I added arrows to indicate that the dates are scroll able.
• When switching accounts, I added a V sign near the account to indicate to the user that they their account was selected successfully.
• In the “More” popup window, where the user can move an item to a different folder, I added a confirmation window to confirm to the user the action was made.
• In the add folder section I changed the button name from “Create Folder” to just “Create”
• In the add folder section I changed the position of all the none-clickable icons to be closer to the text. This will indicate to the user that these icons are not clickable.
• In windows where the user deletes an item/folder and is asked to confirm his action, I switched the position of “yes” and “no” to help the user avoid miss-clicks.
• In the unread section I added a bubble with contains the number of the unread items.
• In the sidebar menu, where the user can click on his account to see additional options, I changed the transition effect to be “slide down” instead of “popup window”.

A/B Testing

I created four online test that contain the exact same tasks for 2 different designs:

Design A — prototype v1, before user testing

Design B — prototype v2, after user testing

I searched for test subjects between age 18–60 who have experience with smartphones.
My app\platform is aimed for users that check emails every day, as part of their daily routine. During the test I recorded the user’s screen, the user’s voice & movements on their interface. This method was used to provide different information which will be used for the evaluation of my design.

Results:

In both design A & B users were able to complete the tasks they were given.
However, in design A it took twice the time to finish the task than in design B.

The usability issues the users found in in both designs were:

1. When the user created an account and moved automatically to the home page they didn’t understood where they are and if anything was synced successfully.
2. In “Add Folder” task, when the users are synching the folder with an email address, users asked to see a list of their email contacts to make the process easier.
3. When switching accounts the users did not understand the account switch was successful. They asked to include some kind of confirmation message.
4. After clicking on the “Create” button, users did not notice the folder was created. They asked to include some kind of confirmation message.

Changes that were implemented in the new design:

1. Added a confirmation window after the user synced his account saying “Welcome!”.
2. In “Add folder”, when the user clicks on the sender’s address, I added a window which opens a list of contacts the user has in their email. The user still has the option to type manually.
3. Added a confirmation window upon successfully switching accounts.
4. When clicking on “Create” in “Add Folder”, I added a window indicating the folder was created successfully.

Color selection

Since the task of reading emails might be tiresome, I decided to choose light-green (teal) to make the user feel more relaxed while he is scanning large amounts of emails.
For the body of the app/platform I chose white so that the content will be more visible and the user will not be distracted from the content.
For the top & bottom bar menu I chose 3 tones of teal. This color is very easy for the eyes to process, which makes the usage of the app lighter and more comfortable.
For the buttons and action button I chose light-orange in order to emphasize them and make sure the user will notice them, and at the same time the colors will match and remain in harmony with the other light colors.
For the selection status of the bottom bar & text I chose deep dark-pink/purple which is very distinct from the orange buttons (thus not take any attention from them) but at the same time this color is very noticeable and and easy to find.
It also plays well with the warm orange and cold teal — balances between them.

The App\Platform

For the full version “InboXi” prototype

prototype_eye_coursera