Sprint 2- Mobile App and OS Design

Process Blog

Mobile App and OS Design

Team: Error 404

Sprint 2

OS Name: Atom


For sprint 2 of the assignment, our group was instructed to design the communications apps for our OS. This includes apps such as Dialer, Mail, Contacts and Messenger.

Design Process

Implementation of Feedback from Sprint 1:

Our Design Language for Sprint 1 had a dark theme complemented with white colored text. As part of the design critique, we were suggested to try out a light-themed design language instead. We did the same and went ahead with it. Once we started, we liked the results in terms of the apps and the way they looked visually.

This made us switch to a light theme. The question of the theme being less visible in extremely bright environments did come up amongst our group members during the design process. However, we felt that the design was turning out to be what we wanted it to look like and stuck to the light theme.

Wanting to retain the fluid element of the OS, our group implemented sliding navigation at the bottom of our apps, making it easier for users to navigate. This idea has been executed throughout the communications apps apart from the Mail Smart Mode, which has been inspired from Tinder. The user can swipe right to mark mail as “read” and swipe left to reply.

Specifications of the New OS Design Language

  1. Each card has a width of between 350–370 according to the app and our canvas is 411 in size, providing plenty of padding, making it easier on the eyes and more organised
  2. Instead of using white, we used #F1F1F1 which is slightly off-white (hardly noticeable, but easier on the eyes)
  3. We went with white instead of black because we feel like white is a more welcoming color. In other objects of the OS, instead of using black we using a slightly lighter black for which the code is #3a3a3a which is also easier on the eyes
  4. The OS is not very colorful as we wanted to make it more professional than childlike. It should be very narrowed and focused on the task at hand. We used a more modern and flat design across the whole UI for an aesthetically pleasing look. Lines, dots and circles are the backbone which has been used across the OS
  5. Most of our text uses the color code of #3a3a3a so to put emphasis on different types of text, as follows:

1)100% — opacity for most important text

2) 66% — moderately important text

3)33% — least important text

End Product

Contacts- Main Page
Contacts- Details
Contacts- Dialer
Contacts- Favourites
Messenger- Chats
Messenger- Favourites
Messenger- Promotions
Mail- All inboxes
Mail- Smart Mode

Reflective Statement-

After attending the 3rd lecture of App design, we learnt something very important; to ITERATE. Post designing each app of this assignment, we sat together and ITERATED each design. This helped us to look from the user’s point of view and empathize with our customer. Our basic thought behind our design is to be minimalistic and simple. We wanted to see if the user can get his/her way around easily. This helped us in improving our design.

Places we can improve-

  1. Our current OS does not have a “back” button to go to the previous screen. As of now, we propose to have a physical “back” button for our OS. In the future, we plan to include the button in the OS. We hope to do this once we figure out a way to include it seamlessly in our current structure
  2. We have not yet figured out a way to include entertainment and games when we have components instead of apps

Thank you for your time!


Team Error 404