UI/UX

1. Aladdins Food App

Hungry for some food? A Prototype design for a local takeaway

The Design Process

My process differs depending on the size of the project and how many people are working on this too. Other factors include the project goals, business requirements, complexity of the problem and time. The method in which I use to solve the problem and create a product which is user-centered will be explained below.

Research

Understanding the product

Before doing any ideation I started to analyse current native apps which were in the same industry, this allowed me to understand more about the user journey and also what makes a good food app. A few of the most popular and successful apps which have nailed down on their user-centered designs are the likes of Deliveroo, Uber Eats, Just eat.

For each app, I had identified what the key features were and what made that app successful for the user, this was also done by reading reviews of the apps to identify pain points and to find user needs. This was a great way for me to create user interview questions and the potential obstacles users could face, I would then revisit this during my workflow and design stages.

Key Findings

Some food do not have an image, harder for user to visualise
Other less successful apps, it is harder to navigate through the different types of food
Too many clicks for the user
Option to add dish to favourites for easy reordering

Initial Proposal

I had created an initial proposed design with the main features that should be available for example I had started to think about what would go onto the home page.

Design principles: clean, emotionally connected to the overall brand through the use of colours and icons.
Home screen more personalised and tailored to the company for example Aladdins has great emphasis on their lunchtime deals hence why this should go at the front at the top.
Navigation and transition should be easy to use but also understandable.

Ideation

Sketching and Wireframes

After the research, it was time to do the sketching and the low-fidelity wire-framing. I had a list of different screens to cover all scenarios so while I was sketching, I was constantly thinking about the user journey and also the user interview questions in which I had created. I had made a few different designs to detail out the flows and the journey as you can see below.

User Flows

The following flowchart below describe the content strategy and user flow through the app, listing potential features and buttons users may interact with. The creation of flowcharts are the foundation for refining the workload necessary for developers and higher-fidelity designs later on. This had also helped me to gain a better understanding of the user and help me to build my wireframes by discovering potential issues behind the product in a quick and time-efficient way.

Design

Turning Sketch to Prototype

I wanted to keep things very consistent to the current brand in which Aladdins have. This meant that I needed to follow their brand guideline and use the same elements which included colours, typography, components, images etc. I had then used my own skills and initiative to make sure that the buttons, icons, and overlays all matched the brand and that it flowed very well so I could create a clean and holistic look.

2. Prayer Timetable App

A clean and simple UI/UX design allowing muslims to see the next prayer. Depending on the time of day, the background adjusts allowing the app to be more interactive and see the time of day. The problem with most apps like this is that there is an overload of information and it does now allow the user to see clearly what they need to.

The prototype.

Here is the final prototype, users are able to interact with the cards at the bottom of the screen. They are also able to tell what number card they are on through the circles on the right.

More Animations

Enjoy this quick animation which I created from the prototypes

3. Camplance

Need a campsite? Camplance has got your back, an app made specifically for camping fanatics who love the great outdoors – easily view camp sites and its information such as price, activities, amenities and more. It eradicates the problem of users searching the internet and using different apps/website to make their camping trip a success.