Augmented reality mobile app
UI/UX case study
Saraja
This product (Saraja mobile app) is a part of a Smart City project which consists of:
1. Hardware – Informative panels
2. Software – Software on panels, Mobile app and Web platform
The idea behind this project is to make everyday life easier for citizens and to bring the city closer to tourists by using new information technologies in the form of augmented reality.
The key focus of this project is on augmented reality, mainly for navigation, new forms of information and advertisement.
With this product, companies will be able to offer new and intuitive ways of interacting with their product and/or brand while keeping up with the fast-growing technologies.
Project overview
1. Create an intuitive mobile app for all ages and genders
2. Implementation of outdoor and indoor navigation
3. Implementation of outdoor and indoor Augmented Reality
4. Implementation of payment services (E-Wallet)
5. Implementation of pages for different companies with different features and options (based on industry branches)
6. Implementation of chat service
7. Implementation of other information-based features
Research
Since this is a very extensive application with great scaling capabilities, the research is divided into several different units.
1. Augmented reality research
2. Research based on different industry branches
3. Outdoor and Indoor navigation research
4. Information visualization and structuring research
5. Researching similar apps
1. Augmented reality research
For this part of the research, I worked closely with software developers to better understand Augmented reality possibilities and limitations while considering product requirements. Besides the navigation, augmented reality is presented in the other parts of the app in the form of product and/or company advertisements.
For example, AR commercials can be in the form of scanning a QR code of a product where the users will be presented with commercials or mini-games which the user needs to complete to get a prize (discount, free coupon or product).
The possibilities for creative advertising and user engagement are endless.
2. Research based on different industry branches
Because this app will contain different businesses from different industries I had to extend my research to better understand how to create a scalable interface. For the first iteration of this app, we agreed upon (based on marketing research) a few different industry branches such as:
1. Markets (Grocery stores, Clothing stores, Malls and other shops)
2. Food & Drink (Restaurants, Cafes, Pubs…)
3. Accommodations (Hotels, Motels, Airbnb…)
4. Transport (Public transport, Parking and other transport services)
5. Tourist spots (Monuments, Parks, Museums, City events…)
For each of these industries, we have subcategories that contain different options and features I needed to research to create a scalable interface with different options.
3. Outdoor and Indoor (AR) navigation research
This part of the research was structured around “what are/is” questions. To list some of them:
1. What is the most important information the users need to see for different types of industries for both outdoor and indoor navigation?
2. What are the most important options/features based on the different types of industries for both outdoor and indoor navigation?
Based on the collected info I understood what to present to the user at any given time based on their activities while considering requests we got from our clients.
4. Information visualization and structuring research
For this part of my research, I was focused on “how to” questions. How to present and structure all important and less important information and options (features) without cluttering the interface.
With all the data collected from previous research and client requests I was able to create a spreadsheet with:
1. Info and features that all industries share
2. Custom features for different industry types
3. Most and less important info
4. Most and less important features
This part of the research helped me a lot to better understand layout structuring for different types of business, not just for the navigation part of the app but for other parts as well.
5. Researching similar apps
Researching similar apps is a very important step of the research process. With this step, I can always get good ideas about where to start after the research part is done. I will mention some of the most useful data and info I gathered from researching similar apps:
1. Understanding industry standards (user familiarity) for this type of app
2. User interface inspiration
3. Good and bad practices (my own app testing and reading reviews for released apps)
4. Finding potential problems and solutions for those problems
5. Collecting new ideas that could potentially enhance our app
UI layout
Low fidelity wireframes
Sign in / Sign up
Intro screens
Explore section
Company profile
Outdoor navigation
Indoor navigation
E-wallet
Chat service
Colors
Light purple – Primary & accent color
The primary brand color is used for highlights, CTA buttons and important details.
Ocean blue – Secondary color
This color is used mostly as a background color for components, different sections and design elements. Nice light contrast with the background color (dark blue).
Dark blue – Background color
Used as a background color for most of the app.
White – Description/Text color
Mostly used for text and description purposes as well as for some backgrounds and icons on dark backgrounds.
Low fidelity wireframes
Typography
Typeface used:
Roboto
Font weight used:
Light, Regular, Medium and Bold
Font sizes used:
12 – 20px
Work overview
1. Augmented reality research
2. Research based on different industry branches
3. Outdoor and Indoor navigation research
4. Information visualization and structuring research
5. Researching similar apps
6. UI research (color, typography and structuring)
7. Low fidelity wireframes
8. Navigation structuring
9. High fidelity wireframing
10. Prototyping and user flow
Other web projects
Ava
A web platform with a goal to enable individuals, and organizations to make the best safety-related decisions.
Ui/Ux Designer (employment)
FurnitureHub
FurnitureHub is a digital association platform suited for companies and individuals in the furniture industry.
Ui/Ux Case Study
Sky Tracker
A web platform with an interactive calendar layout where flight crew members can schedule vacation days.