Announce Today

Relevant information at the right location, at the right time.

IOS / Android / Web
Announce desktop an mobile mock

Introduction

Announce.today is a cross-platform application where users can create and view announcements in a specific area. Users can also explore a location and follow the area to get notified of new announcements.

Company
Milkieway. Inc
Role
UI/UX designer
Timeline
Jan-Jun 2020

Getting started

When I joined Milkieway. Inc, the basic architecture of Announce has already been built. My task was to design an end-to-end user interface for Web, IOS, and Android with high fidelity mockups and prototypes.

Problem statement

Did you ever lose something and wanted to ask everyone to help, got an important public announcement too late, missed an event that happened the other night in your neighborhood. There are different ways to make an announcement, some of them are using a megaphone across the streets, hoardings, flyers. The problem is that, they are not so effective, require man force and we don’t know whether the announcement reached the right audience.

Announce.today, is developed to overcome these problems. It allows users to create announcements in a specific area.

Design process

Design process
Research
Look for competitors
Research latest UX trends
Keep an eye on UI guidelines
Analysis
Understand requirements
Create user personas
Examine the use cases
Sketch
Rough sketches of app icon
Gather ideas for illustrations
Multiple iterations
Design
Design mockups
Create prototypes
Confirm style-guide
Evaluate
Perform usability testing
Identify improvements
Export for development

User research

Project Goals
  • Design the UI that has diverse functionalities.
  • Simplify the user flow of creating announcements.
  • Create a seamless experience with the support of multiple platforms.
  • Dynamic map tools with user education.
User Goals
  • To reach out to their audience in a specific location.
  • Get notified about activities in localities of their interest.
  • An easy and effective way to make announcements.
  • Take control over the announcement timelimit.
Target Users
  • Announce.today is for everyone, some might have lost their pet, some are interested in attending events, some want to know the latest deals in their local stores.
  • Aimed at people who never want to miss an announcement.
  • Lost something and wanted to ask for help in that area.
  • Opening a new store and wishing customers to visit by.

User flow

Visual identity

When I onboarded Announce, the existed logo has a globe with the letter A embedded. But it didn’t look so elegant. So I started creating a new logo by modifying the existed one. Then our director suggested using a megaphone in the logo. After multiple iterations, we finalized the logo for Announce.

Logotype
Arial rounded MT Bold
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
A+megaphone
ios app icon
App icon
favicon
Favicon

Design system

I have examined the competitors in the market and started from the atomic level of the UI design. All the icons and UI elements that I have created are responsive. We chose the typography for the product according to the supported font faces of the system.

Color palette
Color Palette for point
Icons

Placeholder images

While creating an announcement, users can upload images to that. But, when the user thinks not to upload any Pictures, the content looks empty in the product. So I created some custom-made placeholders that show up as the default image when the user didn't upload any image.

Final UI screens

Onboarding screens

Onboarding for Announce explains the usability of the product with some clean graphics, which I have created. System permissions are requested when the user continues.

Home screen

On the home screen, the user sees the announcement in card format along with a map to show where it has been made. The announcement in view will be highlighted in red color.

Follow area

Follow area allows users to follow a particular area with a name and they will be notified when a new announcement is made in that area.

Create

Creating an announcement is simplified to 4 step process, 1 - add title, 2 - mark area( Users can draw on the map where they want to make an announcement ), 3 - add details, 4 - upload images (optional).

Saved

Save the announcement while exploring and you can revisit it anytime by going into the saved section.

Web experience

Announce web has a different approach in interaction with the map. To view where the announcement was made, users can click on navigate button on the announcement card.

App promo

I have created few commercial videos for Announce by combining all the prototypes that I made. This video shows the usability of the product and helps to promote Announce.

6

Months

104

Mockups

20

Prototypes

2

Commercials
Challenges

The main challenge I faced was to design a product that doesn’t need to have user education. The main feature of the application is to mark the area on the map while creating an announcement, this was even more challenging when there are no competitors in the market. As it was my first UI/UX project I learned a lot during the time being.

Result

The resulting product was a fully designed and interactive app that users can create and view announcements in a location. I have been closely working with the development team to export assets required for different platforms.