Weather Tracker App
Weather Tracker Visual Screens on iPhone
Weather Tracker app is designed for iOS devices including iphone and iwatch. Here the Weather Tracker screens are displayed on a white Apple watch screen.
From the basic weather tracker you find on your iphone to online links that contain detailed information for the weather change, creative aesthetic has never been the focus. I wanted to create a visual UI design for a weather tracking app that would highlight important weather information in a stunning and fun way.
Create a mobile app template for keeping track of weather that is stylish and offers users a different way of looking at local weather changes.
Design navigation that is functional and provides a personalized weather locator for the user's custom experience.
Use a dark backdrop on all templates to accentuate main display, CTA buttons and gradient decor. Approach the design in a fun and easy-going manner, making sure the main components interflow with the unique interaction features.
Weather Tracker Low Fidelity Wireframe Outline
Weather Tracker High Fidelity Wireframe Outline
CASE STUDY 1
Design a flight booking app with a unique customization feature.
Many customers still use travel agencies or brand websites to book their flights. As a result, there is a huge consumer market of mobile device users that is untapped. In addition, users often experience delayed service, slow landing pages and even scams from sources they can't verify themselves. I believe that there can be a better way of offering users a customized and efficient air flight booking service - on a mobile app. That's where AIRCrew comes in. Its purpose is to provide a flight booking experience that caters to immediate user needs and offers additional benefits.
Design a flight booking app that is customizable, fun and functional for the everyday user. The final interaction should flow in an aesthetically pleasing way while ensuring that users can successfully carry out flight search and booking confirmation.
Planning & Brainstorming
Below is an overview of the planning process before the final low fidelity wireframe creation. I drew the first wireframe outline by hand for AIRCrew, using watercolor paints to highlight areas of user interaction. I also created a user flow with sticky notes, allowing me to gain a bigger picture of the user goal.
Brainstorming and putting down ideas onto paper always helps me transfer the app design into the final online version.
To understand what role AIRCrew would play in the flight booking industry, I went out to do some research on top competitors that were gaining popularity among users.
I found Hipmunk, Hopper and SkyScanner
Hipmunk caught my attention with its adorable emojis and playful theme. In addition to booking flights, Hipmunk offers car deals and hotel resources for users. In contrast to Hipmunk’s diverse services, I wanted to keep AIRCrew simple - "book a flight and enjoy.” AIRCrew would not include extra promotional features and would instead focus on one user goal, finding the ideal flight. I also noticed that Hipmunk included a Top Destinations feature. I liked this addition, and wanted to create something similar but in a way that would be more helpful to my users. I decided to go with a top destinations menu at the last page of the user journey and included a price tag in bold on each destination for user transparency.
Hopper's pastel color scheme was inviting, but there were some features that I didn't see as very reliable or user-centered. One of Hopper's ideas is to match flights for the user to locate the cheapest price. If it believes the user can get an even better deal than their current find, Hopper asks the user to wait until it's the right time to book. While this is interactively fun, it not only delays the user journey, but has a risk of user bounce rate (some users may tire of waiting and leave). I wanted to find a way to match prices with user budget goals without taking up the user’s time.
SkyScanner is all about cheap flight, rental car deals and hotel accomodation for the least possible amount. From my impression of the site, the target audience is not the top 1%, but rather anyone and everyone who does not want to spend an extra penny on their air trip. The main feature of SkyScanner that really impressed me is their advanced comparison method, which allows it to compare millions of flight options to give you the best deal. In addition, a fun interactive map lets users explore and plan their trip throughout the site. SkyScanner made me aware that customization is a big advantage for users. I decided that in addition to navigation and trip planning, I wanted to provide a personalized booking experience for users based on their preferences.
I created a potential user flow sequence to highlight the steps the user would take from first signing up, to booking a flight with confirmation. Below is a detailed user flow map, from which I was able to build my final user flow sequence.
Creating AIRCrew User Personas
If you're a busy and business savvy flier like Benjamin, all you might care about is getting the cheapest and most reliable flight for your on-the-go life. On the other hand, if you're a busy mom with little time to spare for the details of planning a 'once a year' vacation, you might find that a mobile app's easy confirmation feature is a life saver.
In either case, by creating user personas that represent different background stories, I was able to predict the motives that each user would have for deciding to switch to a mobile flight booking experience.This gave me a better idea of my target audience and how each user interaction would flow the user map.
User Flow Map
Low Fidelity Wireframe Design
High Fidelity Wireframe Design
The touchpoint map below shows how a potential user will go through each template and interact with each button. A smooth interaction will result in the user creating an account and successfully booking a flight with AIRCrew.
Top Destinations 2019 Feature
I found myself asking the question What do people want to see when looking for a dream flight? I decided it was 1) real cost 2) familiar destinations 3) variety. Users usually don't want surprises online, no matter how adventurous they may be in person. Often times a user can spend his or her time being strategically sold on a location or product, only to find out that it is way beyond budget or capability.
To reduce bounce rate or indecisiveness during the user interaction with AIRCrew, I provided a 'save' feature so that the user would be able to bookmark a destination and come back to it when he/she decides to book the flight.
In addition to providing a Top Trip browse feature, I wanted to give the user the power to make a more informative decision. I provided a quick overview of each destination and details about the cost. Expanding the browse feature would not only give the user more information, it would also help the user make a confident decision about his or her flight.
AIRCrew Feature Highlight
Hot spots created with InVision, complete interaction prototype filmed with Apowersoft.
A user can now make informative decisions about flights and save time by getting matched with flights based on custom preferences. The best part of AIRCrew is that it is designed with the user's custom needs in mind.
CASE STUDY 2
Design a luxury car service that can be used on a daily basis and gives users a unique, reliable experience.
I created wireframe templates to outline the product and to help me complete the product to its final look and function. With an outline in place, I was able to make decisions and alterations to each feature design of the app.
I designed up from wireframe template to final prototype, creating for mobile iOs and Android devices.
Making use of a futuristic style, I utilized a neon-glow for the vehicle tracking, dark black tones throughout the interface and sleek vehicle positioning to create a brand message of sophistication, power and luxury.
The goal is to design a luxurious user experience around a car service app. Lux is perfect for the everyday user to use for vacations, formal business meetings or an enjoyable ride to their next destination.
Brand Positioning and Consumer Psychology Analysis
To understand my target audience for Lux, I combined psychology and brand response into two data sets. In the first data collection, I analyzed best commute cars and vans of 2018, as well as the top five trending vehicle colors this past year. From the results I found that the color white and black are in high demand for modern customers. In addition, top user brands include Toyota, Honda and Mercedes Benz.For Lux I decided to provide only white and black vehicles for users to choose from. The limited selection would be a unique brand positioning approach for Lux. Not wanting to sacrifice user’s freedom of choice, Lux would of course provide both cars and vans. Given the research results for top car models, I chose Toyota, Mercedes Benz and Honda for Lux.
Finding the Ideal LUX Customer
User profiles are essential when testing out a product or app design. For UX designers, they allow a quick check of what features to include or exclude and how to rate each feature by user importance.
I typically create 2 user profiles, each from completely different backgrounds in order to match and contrast their needs. Above I have 2 users I created, John & Marley.
From Marley I learn that she might be a user we need to convert overtime, and that having options for car models can be a plus. John's profile informs me that the 'rate' feature on my app is a keeper and that his work will be the main reason he uses LUX.
Create a Customer Relationship
The most important component for this app is the user. In order to understand what customers seek out in a car service and online interaction, I decided to do some research. My goal was to gather as much accurate information as I could. I made note of customer reviews, comments, complaints and even car app ratings.
Here's what I found...
LUX User Flow Map
Lux Low Fidelity Wireframe Design
The complete low fidelity wireframe outline of LUX app below. The user will go through several steps to reach the final destination.
Step 1 will include ordering a LUX ride from the three vehicle options presented.
Step 2 will allow the user to choose from three vehicle options including LUX S Small a two-seater, LUX M Medium, a four-seater, and finally LUX XL Extra Large, a van for large groups.
Step 3 is for the user to confirm their order and await their LUX car to arrive!
High Fidelity Wireframe Design
In an ideal world, your car order arrives on time and everything goes smoothly.
To increase the chances of this happening with Lux, I addressed some potential roadblocks that a user might encounter during his or her interaction and came up with solutions.
Potential User Problems & Solutions
1) Location - Lux includes a location tracking feature accessory, this means that a user can get located by pressing the 'Check Location' button, get an ETA for their next Lux and then proceed to carry out an order. What's the added bonus of a location tracking feature? Well, first the user can see the availability of a Lux nearby at a current location. Second, the user can make an informed decision based on the availability of a Lux near them.
2) Tracking - Another problem I predicted with the interaction was trackability. In Uber for example, when a user places an order he or she can immediately see the car model, driver's name and overall rating. But, often times, the user is left to watch the moving car icon go back and forth while never really sure when it will arrive. There’s no clear visual for tracking where the car is. I wanted the user to be extra sure throughout the waiting process, so I included live notifications from the drivers. That means that the driver (Sam P. below) can send live updates to the user through Lux, providing exact ETA.
3) Accuracy - With a traditional car service, the customer orders a ride and is automatically billed by the car service. Several weeks later, the customer may be asked to rate the quality of the service through an online survey or a mailed flyer. I wanted users of Lux to confirm their ride and rate it as they were riding in the car. This would provide more accurate data for Lux's brand appraisal and record how many rides were being ordered at a time. So, I created a page right after the order summary that would prompt the user to confirm and rate Lux. Providing the call to action right after the confirmation would increase the chances of a user rating my service.
Hotspots created with InVision and final prototype clip created with Apowersoft.
The final prototyping trial can be seen in the video below. InVision was used to create hotspot templates with interaction and uploaded to Apowersoft for the final recording. Wireframe cc was used to create low fidelity templates.
Lux provides a personalized and luxury experience for customers that want to be picked up and taken to their destination on time. Unique live updates from Lux drivers provide customers with accurate arrival information while tracking features help locate the closest Lux nearby.
CASE STUDY 3
Create an app that connects campus students with each other and reduces social isolation in an academic setting.
Groupie an enthusiastic and uncritical follower google search
My definition of Groupie - an independent and enthusiastic follower of social experiences.
Growing up I was never the most social person nor the most popular kid in school. With time, my social skills flourished but it took a lot of trial and error, some rejections and strong self-confidence.
Today college campuses are competitive, not just academically but also socially. Freshman and transfer students can particularly feel isolated at a new campus.
Create a social app that allows active students on campus to connect with peers in a modern and interactive manner. In addition, create a user experience that is relatable to campus students and their social trends by applying conversational slang, emoji icons and status updates to the chat interface.
The goal of GROUPIE is to empower users and reduce their experience of social isolation on campus by giving them the freedom of expression, the ability to meet new people and access to campus resources.
Data and Important Facts to Consider
To grasp the the impact that social isolation has on students every year, I set out to conduct research and collect relevant data. The results were staggering, with a significant percentage of students experiencing feelings related to social isolation. Both college surveys and psychology sources show that serious risks of social isolation include depression, bodily abuse and even thoughts of suicide [ in extreme cases ].
Additionally, students that enter a campus for the first time value the ability to have real friends and support during their studies in addition to freedom and exposure to new experiences.
Iconography and Visual Design Concept
Low- Fidelity Wireframe Outline.
High-Fidelity Wireframe Presentation.
GROUPIE is created as a source of communication for student users on their campus. Providing users a safe outlet for meeting new people without the social stigma or pressure, GROUPIE can help reduce social issues including isolation.
My First UI/UX Portfolio Project
fitbeat is an app centered around fitness. The goal of fitbeat is to encourage new and returning users to keep track of their health.
They can create an account, set up a customized exercising schedule and even get feedback on their daily health target points.
The 21st century has introduced us to many revolutionary movements including fitness. From millennials to retired seniors, just about everyone has increased subscriptions to local gyms and signed up for fitness classes. While this is a huge benefit to the overall health and life expectancy of our society, not everyone can keep up with a dedicated workout regimen.
Staying fit can feel like a job in itself, with lots of required discipline, motivation and habit building. I wanted to help users keep track of their fitness routine throughout their busy lifestyle with a mobile fitness app. In short, I wanted to make their lives easier and reduce the stress of planning or managing their fitness.
I came up with fitbeat, a simple tracking system that would get users into shape and offer a custom feedback on their workout progress.
Designed custom logo concept (please note that for this project I did not design the logo image icon), created low and high fidelity wireframes, ideation, user research and final UI presentation.
The purpose of fitbeat is to help users keep track of their exercise schedule and set goals in a way that is easy, efficient and enjoyable. A workout summary and progress report are additional features included in the app.
fitbeat Brainstorming & Planning
A hand-drawn wireframe outline of fitbeat that I created can be seen below. I used watercolors to label areas of potential user interaction. Underneath each template screen I provided myself with major touchpoints that the user would complete throughout the final interaction.
To identify the user needs and design fitbeat in a way that solves their problems, I created user personas with fitness challenges. My goal would be to address their challenges throughout my design flow.
Below I created users of different ages, occupations and hobbies to provide myself with an unbiased guideline.
Data Collection & Interviews
To gain a general understanding of how fit people are in America, I analyzed recorded data of states that had the highest health percentage and the lowest. I was able to see that the average percentage of people working out and maintaining health is still low across the country.
The data table below was created with information gathered from cbs.news source.
When creating a fitness app, I came up with several questions. How do people stay fit today? and How often do people actually exercise despite data reports? To engage with a live audience, I decided to interview family and friends. The results I gathered are seen below.
I was able to conclude that the majority of people today prefer to have someone tracking or initiating their fitness. I also discovered that time is an issue when planning a workout schedule. For most people, work or a busy schedule causes them to plan their fitness around their priorities.
User Flow Concept
I wanted to design an app that would listen to the user and offer support during each fitness journey. To ensure I created the best possible design flow, I took to online research. Digging deep into the details, I discovered information that stood out to me. I made note of the facts that seemed to be most relevant to my goal, and used them to create a value hierarchy below.
Each template would include a user interaction. I designed the concept to understand and showcase how a user would follow each screen from. From the very first step of signing up to the very last step of finalizing their custom fitness schedule and beginning an exercise, the user would have several interactions throughout the app.
Low Fidelity Wireframe.
Start Your Journey!
From my data collection, I found out that a lack of time is the top issue when trying to fit workout goals into a daily routine. To reduce this problem for users, I included a timing feature in fitbeat. The user can choose a duration for each exercise. In addition, during the exercise, the user has the freedom to stop or save a workout and come back to when ready.
Improve Your Workout!
Both through user personas and interviews, I identified the user need to get feedback on strengths and weaknesses. People not only want an app to track their fitness, they want custom advice. To solve this problem, I included a feature that analyzes a user's best performance and least performance on exercises and sets up a custom fitness routine targeting those areas.
This would be an additional feature that any user would have access to.
High Fidelity Wireframe
fitbeat logo evolves from a simple geometric shape to shade gradient cube
I wanted to work with the six-sided shape that I used in the wireframe design, so I experimented with giving it more volume. The end result became a cube decorated with varying shades of black. This turned into the main logo symbol for fitbeat.
fitbeat gives users the freedom to custom track their fitness, workout when they want to without losing time and get advanced feedback on their performance.