M A RG A R E T PA D ILL A UX/UI DESIGNER
Usability is about people and how they understand and use things, not about technology. STEVE KRUG, DON'T MAKE ME THINK
That 's me
ABOUT ME
I grew up in the heart of the Midwest, the curious daughter of two immigrants living in a multi-generational home. One night I was at a friend's house for dinner and made a shocking discovery: They did not have rice; in fact, they didn't have rice at every meal. That was the first time I understood that people may do things differently than how I was used to. I was fascinated. On the road to becoming a designer, I always wanted to look deeper into how people think and act. I am compelled by the intricacies of how things are made. I love understanding and learning about people's relationships and interactions with the things around them.
For me, the journey to a design solution is just as important as the end product. I always learn something new during the process, which is my favorite part of design. Fastfoward some 20 years later, I think back to that night at the dinner table, and my delight over a new discovery. Everyone has a unique perception of the world. As a designer, I try my best to understand these different perceptions. By doing this, I hope my designs bring that delight to those around me.
contents
O UTP OS T.CO M
OUTPOST APP
MINICHEF APP
PERSONAS
WIREFRAMES
EXPERIENCE MAPPING
ISSUE NO. 1
ISSUE NO. 2
ISSUE NO. 3
UX
PRO C E S S
ou t p ost.com
ISSUE NO. 1
Adventure starts here
7
ISSUE NO. 1
UX PROCESS
O U T P O S T.C O M
Personas: Establishing who they are and defining their wants, needs & goals.
PROCESS STEPS
CONCEPT
Problem Project Goal Survey Key Findings Personas (4) Affinity Mapping Feature Prioritization Information Architecture
Responsive Website ROLE
UX Design UI Design
To excel in today’s market, we have to focus on addressing what stands in the way of the consumer: convenience and time. HEIDI ZAK, CO-FOUNDER, THIRDLOVE
P R O B L E M S TAT E M E N T Road trips and camping are favorite pastimes that go hand-in-hand, but coordinating travel routes and searching and reserving campsites can be a frustrating process. Today’s campground search and reservation websites are confusing and inefficient. Many times users have to visit multiple websites to find suitable campgrounds. They are then left to coordinate routes and itineraries on their own or through another app, website or method. 10
PROJECT GOAL
Create a fully responsive website for outpost.com Outpost is an online community that enables campers to plan a road trip and book campgrounds in one place. Using the Campmapper tool, customers are able to view and book campsites within a 100 mile radius of their chosen route, giving them a convenient tool to plan the ultimate camping adventure.
11
SURVE Y Getting to know the users I conducted a survey of potential users to better understand the major concerns and pain points users encounter while preparing for a road trip or camping trip. A convenience sample collected through Facebook yielded 115 respondents.
SURVEY QUESTIONS 1. Are you male or female? • Male • Female 2. How old are you? • Under 18 • 18-24 • 25-34 • 45-54 • 55-64 • 65+ 3. What is your ideal camping trip? • A weekend camping trip with family or friends. • A week-long road trip to a cool state or national park — camping along the way! • Let’s fire up the RV! Who cares when we get there?
outpost.com
margaretpadilla.com
4. How do you research for your road trip or camping trip? Check all that apply Blogs Magazines Word of Mouth Campground / Park Website Yelp Other apps or websites I don’t research that much. Other 5. What is your “trip planning style?” • I just wing it. • I pick a few things I’d like to do and then just figure the rest out as I go. • I stress out a little, but I’ll plan because I know it will be fun once I get there. • I’m all about itineraries. There are so many things I want to see! I want to maximize time.
6. What kind of road tripper are you? • I want to get to my destination as quickly as possible. • I’ll stop at a sight or 2 along the way • I’ll get there when I get there! 7. Do you pre-book your accommodations before you leave on your road trip? • Yes • No, i just drive until I’m tired and then look for a place. 8. Do you consider yourself an organized person? • Yes • No • I’m decently organized
9. Is following a budget while
13. What is the most stressful
traveling important to you? • Yes • No
part of planning a road trip for
10. How comfortable are you
14. What are some of your
with technology (rate 1-5) • 1 Extremely Uncomfortable • 2 Uncomfortable • 3 Moderate • 4 Comfortable • 5 Extremely Comfortable 11. What devices do you take
you?
concerns when it comes to staying at a campground or park?
15. What is the most stressful part of planning a camping trip for you?
with you on a road trip? (Check all that apply) • Smart phone • Tablet • Laptop 12. What are some of your concerns when it comes to planning a road trip? 13
16. Do you have any must-have apps while road tripping or camping?
KE Y FINDING S Some insightful highlights from the survey CAMPGROUND CONCERNS R E S E RVATI O N S Securing a suitable or desirable campsite ranked high on the stress level chart. Campers want to know what their campsite is like. Is it the best one? Is it quiet? What kind of campers like to visit here? When is the busy season? Will it be crowded?
AMENITIES & SUPPLIES Campground amenities and supplies were equally ranked as top concerns when planning or preparing for a camping trip. What if we run out of food? Are there bathrooms? How clean are they? Is there access to clean water? Firewood? Is there a store nearby if I forget gear or something essential?
outpost.com
ACTIVITIES Campers with children were particularly concerned with activities to do at the campground. What is there to do there? Is it family and/or kid friendly?
margaretpadilla.com
SAFETY Safety was a major concern amongst users when searching or reserving a campsite. What kind of wildlife is present? Are there environment hazards or current alerts for the area? What are the campground rules? What are the quiet hours?
ROAD TRIP CONCERNS
ITINERARY When traveling with multiple people, users were concerned about the trip itinerary: keeping everyone on the same time schedule, coordinating rides, payments, and other logistics.
GAS Gas was a top concern users had when going on a road trip: cost of gas, where to find it, running out of gas in a secluded area.
ROUTE Route related issues were the second most common source of stress named by users. Is there traffic? What is the best route? What is the fastest route?
FOOD Where to find food while en route was a main concern for users.
15
98%
59%
81%
82%
of users travel with their smartphone always.
of users follow a budget while they are traveling.
of users pre-book accommodations before leaving for a road trip.
of users go by word of mouth for campground or roadtrip recommendations.
USERS AT A GLANCE 10% AGE 35-44 13% AGE 18-24
25% MALE
75% FEMALE
outpost.com
6% AGE 45-54
71% AGE 25-34
margaretpadilla.com
1% AGE 55-64
So, what now? Four distinct user personas emerged based off the information gathered. Each persona's individual set of wants, needs, painpoints and goals contribute to outpost.com information architecture and features.
Meet the Personas →
17
SO CIAL C AMPER 26 YEARS OLD / SALES ASSOCIATE / SINGLE URBAN & SURROUNDING SUBURBS / $45,000 YEARLY SALARY
M ee t M el a n ie
“I'm going on a weekend camping trip with friends and want to keep costs low.” Melanie is a young working professional living just outside the city. She spends most of the free time being active outside or hanging out with friends. She loves road trips and camping with her friends and family. Although she does loves nature, spending time with her friends and family is really what she enjoys most about these trips.
MAIN GOAL: FIND THE BEST CAMPGROUNDS FOR THE BUDGET AND GROUP
PLANNING Usually, Melanie takes the lead when it comes to researching and planning, but doesn’t mind if others chime in or help out in the planning process. She books her accommodations before going on road trips.
CONCERNS Splitting Costs Cost of gas Traffic
EFFICIENT ROAD TRIPPER When it comes to road trips, Melanie wants to get to her destination as fast as possible, but will stop
SOCIAL AND ONLINE RESEARCHER Melanie researches her accommodations before going on trips. She mainly uses online
for photo ops or bathroom breaks when needed.
resources like park or campground websites, Reserve America or RoadTrippers; but really takes word of mouth suggestions and Yelp and Google reviews to heart.
Weather Packing what I need Coordinating everyone
Cell service Bathrooms Enough supplies / food
TR AVELER PROFILE t r av e l s t r e s s l e v e l
o r g a n i z at i o n
b u d g e t co n s c i o u s
co m f o rt w i t h t ec h n o lo gy
outpost.com
margaretpadilla.com
ON-THE-FLY C AMPER 23 YEARS OLD / STUDENT / SINGLE URBAN & SURROUNDING SUBURBS / $25,000 YEARLY SALARY
M ee t N a te
“I'm driving up the Pacific Coast Highway and want to camp along the way.” Nate is moving from Southern California to Portland, Oregon. He has a really flexible timeline so he is taking his time driving and sightseeing. Nate is an outdoors-man, loves camping and everything that comes with it. When it comes to camping and road tripping, he prefers to travel solo or in a small group. He finds it easier and more flexible.
MAIN GOAL: SEE WHAT CAMPGROUNDS ARE AVAIL ABLE AROUND HIM
PLANNING Nate isn’t really an itinerary kind of guy. His idea of planning is listing places he wants to see, and then taking it day by day depending on his mood. He’s not concerned about hitting every place, but more so that he enjoys where he is at the current moment. CONCERNS Cost of gas Other people bogging him down or bothering him about plans
LAID-BACK ROAD TRIPPER When it comes to road trips, Nate just wants to take in the sights and enjoy the drive. He’s not concerned about timelines. He usually just drives until he gets tired and then tries to find a place close by.
SOCIAL AND ONLINE RESEARCHER Nate mostly gets his recommendations by word of mouth and blogs. He also checks Yelp or Google reviews and takes a quick peek at the campground or park website. He doesn’t do much research; he usually just goes if he hears it’s worth checking out.
Cell service Car troubles Busy campgrounds
Campground availability Proximity to his location Having all the necessary gear
TR AVELER PROFILE t r av e l s t r e s s l e v e l
o r g a n i z at i o n
b u d g e t co n s c i o u s
co m f o rt w i t h t ec h n o lo gy
19
FAMILY C AMPER 39 YEARS OLD / GOVERNMENT EMPLOYEE / MARRIED 3 CHILDREN / SUBURBAN / $80,000+ YEARLY SALARY
M ee t M ic h a el
“My family and I are road tripping from San Diego to Seattle. We are camping along the way." Michael is married and has 3 children under the age of 12. Traveling with children isn’t always the easiest, so it’s important to Michael to have a timeline and itinerary and stick with it. He and his wife tag team the road trip planning, but he handles all the booking and itineraries once they are on the trip. MAIN GOAL: BE INFORMED AND BUILD A SUITABLE ITINER ARY FOR HIS FAMILY
PLANNING Michael feels most comfortable having an itinerary when he travels. He researches routes and campgrounds that would be most family friendly for his children and wife. He books everything before he leaves for his trip.
CONCERNS Cost of gas Family friendly Activities for children
FLEXIBLE ROAD TRIPPER Keeping 3 children in a car for extended periods of time isn’t the best idea. So Michael stops
MAGAZINE AND ONLINE RESEARCHER Michael does most of his research online, but likes to read travel magazines as well. It also always
when needed and pulls over for sightseeing and bathroom breaks.
helps chatting with people who have done the trip before, but he’s not afraid of going places without recommendations.
Logistics of trip Cell service Campsite availability
Campground Safety Wildlife Organization of trip
TR AVELER PROFILE t r av e l s t r e s s l e v e l
o r g a n i z at i o n
b u d g e t co n s c i o u s
co m f o rt w i t h t ec h n o lo gy
outpost.com
margaretpadilla.com
RV LEISURIS T 55 YEARS OLD / RETIRED / MARRIED 2 CHILDREN / SUBURBAN / $60,000 YEARLY SALARY
“My husband and I are driving crosscountry in our RV. We're trying to visit as many National Parks as we can.”
M ee t M ic h el le
Michelle and her husband recently retired and are driving crosscountry in their RV. They love road trips and sightseeing, especially visiting national and state parks. They’re traveling for a month and want to see as many places as possible, without feeling too rushed.
MAIN GOAL: SEE WHAT PARKS AND CAMPGROUNDS SHE CAN STAY AT ALONG DIFFERENT ROUTES
PLANNING Susan loves planning and itineraries, but she’s okay with detours if something really enticing pops up. She books some accommodations before leaving, open to the possibilities of changes or extra stops here and there.
S I G HT-S E E I N G ROAD TRIPPER Susan and her husband started taking road trips with their children when they were young. They love exploring the diverse geography of the United States. Susan and her husband still road trip everywhere.
MAGAZINE AND ONLINE RESEARCHER Susan is an avid reader and subscribes to several travel magazines. She also is pretty comfortable with the internet. When planning a road trip, she uses ReserveAmerica.com and various campground or park websites.
CONCERNS Cost of gas Timing / schedule between stops My spouse
Finding the best deal to stay Agreeing on a place with my spouse Car troubles
Falling asleep at the wheel Figuring out where to stay on the go Personal safety
TR AVELER PROFILE t r av e l s t r e s s l e v e l
o r g a n i z at i o n
b u d g e t co n s c i o u s
co m f o rt w i t h t ec h n o lo gy
21
AFFINIT Y MAPPING Exploring features based off the users' wants and needs After defining the key users, I began brainstorming features, information and content that would be help the user's fulfill their main goals.
Clustering similar actions, features, need and wants outpost.com
margaretpadilla.com
FE ATURE PRIORITIZ ATION Nice-to-Have vs. Must-Have I placed the features along a feature prioritization matrix. Post-its places on the left side of the matrix represent "Niceto-Have" features; features that would be helpful, but not
neccessary to complete any of the personas' main goals. "Must-Have" features were placed the right side of the matrix. These features were required to complete goals.
Feature prioritization matrix 23
INFORMATION ARCHITEC TURE Defining a Sitemap After placing the features along the Feature Prioritization Matrix, I was able to visualize what were the most important features to solve and address first. From there, I started to
define a sitemap for Outpost. com, keeping in mind the most important features needed to complete the personas' main end goals.
Jotting down tentative sitemap content. outpost.com
margaretpadilla.com
SITEMAP U T I L I T Y N AV I G AT I O N
m e s sag e s
l i c e n s e s & pa s s e s
help
my profile
Alerts
My Trips
Notifications
Reservations
Messages
Favorites Account Settings Logout
home
plan a trip
e x p lo r e m a p
Search Results
d e s t i n at i o n s
Search Results
Detail Page
Outpost Top 40
States
Detail Page
d i s cov e r
Mountain Weekend
Parks
Family-Friend Spots
Regions
Beach Camping River Rendezvous Lake Living Forest Hideaways Cabins in Nature Desert Discoveries F O OT E R
l a n g u ag e s
co m pa n y
b e f o r e yo u g o
social media
outpost app
English
About
Packing List
Apple
Spanish
Careers
Gear/Supply List
Android
French
Press
Licenses & Passes
Windows
Help
Export Itinerary
Blog
Policies
Vimeo
Terms & Privacy 25
OUTP OS T.COM
Desktop https://marv
Mobile https://marv
outpost.com
margaretpadilla.com
M PROTOYPE
velapp.com/19d6hib
velapp.com/19efia8
27
UX
PRO C E S S
OUTPOST APP
ISSUE NO. 2
Your Adventure. Your Way.
ISSUE NO. 2
UX PROCESS
OUTPOST APP
Wireframes: Defining the architecture and interactions of the app experience.
PROCESS STEPS
CONCEPT
Problem Project Goal Information Architecture User Flow Wireframes
Mobile App ROLE
UX Design UI Design
Usability answers the question, 'Can the user accomplish their goal?. J OYC E L E E , H U M A N FAC TO R S D E S I G N , A P P L E
P R O B L E M S TAT E M E N T Without the constraints of the web browser, native mobile applications are able to provide more direct paths to tasks and information that are most relevant to users. The challenge for this project was to ensure that the user's interaction with the Outpost app was purposeful, streamlined and efficient.
PROJECT GOAL OBJECTIVES
Create an auxiliary mobile app for outpost.com 1. Define user-relevant information architecture 2. Solve for the "Check-in" userflow Outpost is an online community that enables campers to plan a road trip and book campgrounds in one place. The Outpost mobile app enables users to search, book and manage their campground reservations and travel plans on their phone.
just a heads up...
In this book I will be briefly referencing the first round of wireframes created for the Outpost app. You can get a quick overview by checking out the wireframes on the left. Should you feel like you need the full experience, you can click through them on my website margaretpadilla.com
INFORMATION ARCHITEC TURE Identifying the users' most important tasks Based off of Outpost's primary user personas, I identified that the most important tasks were: 1. Search 2. View Nearby Campgrounds 3. Manage / View Itinerary 4. Book / Reserve Campsites
To establish the app's information architecture, I sketched out this diagram to visualize the information architecture of the app. The diagram isn't anything too fancy, but in doing so, I was able to understand how these 4 primary goals could be translated as the main navigation items for the app and enable the user to accomplish his/her most important goals or tasks. After determining the IA, I could then move onto wireframes for the rest of the app.
outpost app
margaretpadilla.com
GLOBAL APP UI ROUND 1
USER TESTING FEEDBACK
"o u t p o s t "
as a home
is inconspicuous
The Outpost does not have a true "home screen," but rather several landing screens on the same IA level. Tapping a logo to return home is a common interaction for websites, but not so much for native apps.
r e m ov e a n d r e p l a c e
"se arch"
in
f o ot e r
Although it is an important action, Search can be found in multiple places within the app. Giving it a dedicated space in the main footer seemed redundant and unneccessary.
37
INFORMATION ARCHITEC TURE UI and IA revisions After testing, I made revisions to the existing UI navigation and IA diagram.
I also updated the Information Architecture diagram to reflect how the revised UI would affect the IA structure and better fulfill the user's core goals and tasks.
Taking the user feedback into consideration, I modified the footer and replaced "Search" with "Explore." This new addition would also act as the inital landing screen when the user first opens the app.
outpost app
margaretpadilla.com
With the new IA in place, I moved on to make additional changes users suggested during testing. These are some inital sketches.
→
I NTE G R ATE I N -A P P G P S N AV I G ATI O N
IN S I DE THOUG H T
In my inital wireframes, users were directed to pick from Google Maps, Maps or Waze to guide their navigation for their trip. A user suggested that I integrate a navigation function within the Outpost app. I was hesitant since the app is already pretty complex, but I decided to add it as another challenge to solve.
ADD "BROWSE BY TERRAIN" O N I N ITA L L A N D I N G S C R E E N
NEARBY CAMPGROUNDS SCREEN
39
USER FLOW Defining the Check-in User Flow
OPEN APP
LO G I N
User Persona Michael the Family Camper wants to check-in to his campsite. This is the user flow for the Check-in Process.
E X P LO R E / INITIAL L ANDING SCREEN " I w a n t to v i e w a
" I w a n t to v i e w
different way point
a d i f f e r e n t t r i p ."
o r r e s e r v a t i o n ."
S E L EC T
T R I P D E TA I L
S E L EC T
“MY TRIPS”
SCREEN
“ WAY P O I N T ”
MY TRIPS SCREEN
outpost app
R E S E R VAT I O N
D E TA I L SCREEN
S E L EC T “CURRENT TRIP ”
margaretpadilla.com
C H EC K- I N
wireframe user flow
OPEN APP
41
WIREFR AME S
Navigation System m en u
p r i m a ry l e v el n av i g at i o n
1 2
4
5
6
7
8
3
outpost app
margaretpadilla.com
1
primary le vel he ader
This header displays when viewing the primary levels of the app IA.
m e s s ag e a l er t
2
hamburger menu
Tapping reveals app menu. 3
p r i m a r y l e v e l f o ot e r
This footer displays when viewing the primary levels of the app IA. 4
e xplore
Shows campgrounds in the area based using the user’s GPS location or by zipcode. Users are able to adjust the radial distance 5
ne arby
Shows user campgrounds located in their proximity. 6
me ssage s
Directs user to message inbox. 7
my trips
Directs user to “My Trips” screen where they can view current trip, upcoming, pending reservations, saved and previous trips. 8
favo r i t e s
9
me ssage alert
9
Directs user to “Favorites” screen where they can view favorited campgrounds by list.
A number will display here when the user receives new messages, notifications or alerts.
43
WIREFR AME S
Navigation System
t er t i a ry l e v el n av i g at i o n
s eco n da ry l e v el n av i g at i o n
1
4
2
3
outpost app
margaretpadilla.com
5
n
1
s ec o n d a r y l e v e l h e a d e r
This header displays when viewing the secondary levels of the app IA.
r e s ervat i o n h e a d er
2
back
This button will take th user to the previously viewed screen. 3
This is the active state of a footer icon that indicates what primary level of the app IA is being viewed
7
6
a c t i v e s tat e i c o n
4
tertiary le vel he ader
This header displays when viewing the tertiary levels of the app IA. 5
current screen title
This indicates the screen the user is currently viewing. 6
r e s e r vat i o n h e a d e r
This header displays when viewing a reservation screen from the user’s itinerary. 7
help
This “Help” icon shows a shortcutted list to topics relevant to the check-in or reservation process. If they user does not find exactly what they need, there is a link that will direct them to the full list of Help and FAQ topics.
45
WIREFR AME S Log in
lo c at i o n acc e s s
lo g i n s c r een
2
1
outpost app
margaretpadilla.com
1
f o r g ot u s e r n a m e
Users will tap this link when / if they cannot remember their login information. They will then be prompted to enter their e-mail address or mobile phone number to receive the link to reset their login. This screen will only show if the user is not logged in their account.
e x p lo r e / i n i t i a l l a n d i n g s c r een
2
l o c at i o n a c c e s s
Upon logging in, Outpost will ask permission to use the user’s geolocation. The GPS location will only be active when the user is using the Outpost app. This will only show if the user has not previously granted Outpost location access.
3
3
f e at u r e s l i d e r
This area will display a gallery of pictures that automatically change.
4 4
search
Tapping this area will display the search screen where the user can input their campground search criteria or choose to explore the campground map or list.
47
WIREFR AME S
Explore / Initial Landing Screen e x p lo r e
e x p lo r e
1
4 3
2 5
outpost app
margaretpadilla.com
1
e xplore by terr ain
A slider that allows users to view campgrounds based by terrain: Forest, Mountain, Beach, Desert, Lake, River, Plain
e x p lo r e 2
d e s t i n at i o n m o d u l e
3
campground module
This module is used to display basic information about popular areas or park destinations. It contains a photo of the park, city and state, and the number of campgrounds in the park. Tapping on one of these modules will take users to the Destination Overview Landing Page where they can view individual campgrounds.
This module is used to display information about individual campgrounds. It contains a photo of the campground, the park it is located in (if applicable), city and state and distance from the user. 4
a d d to favo r i t e s
Tapping this icon will add the corresponding campground to the user’s favorites. After tapping it, the user will be prompted to select a list to add or to create a new list.
6
5
c a m p s i t e s ta r t i n g p r i c e
This area on the campground module shows the starting price for a campsite in this campground. Tapping the price will display a modal explaining this disclaimer. 6
e xplore c ampground map
Tapping this CTA will take users to the campgrounds map. 49
WIREFR AME S
Nearby Landing Screen
pre view c ampground modu
n e a r by l a n d i n g s c r een
1
1
2
2
outpost app
margaretpadilla.com
ule
1
ne arby c ampground module
The smaller nearby campground modules allows for more campgrounds to fit on the screen at a glance. Meant for quick browsing and interaction.
c a m p g r o u n d d e ta i l
2
pre view campground module
Preview Campground Module shows a more detailed snapshot of the campground.
3 3
a d d to t r i p i t i n e r a r y
Tapping this icon will add this campground to a trip itinerary. After tapping it, the user will be prompted to select an itinerary or create a new one. 4
4
ava i l a b i l i t y
This icon is shown in its positive state, meaning that there are campsites available for today.
5
5
r eq u e s t to b o o k
Tapping this CTA will take users to the Booking Screen to begin the reservation process. ta p a n d h o l d 1
2
"ne arby
campground module"
Tap and Holding the Nearby Campground Module will reavel the Preview Campground Module ta p h o l d t i m e d
"pre vie w
campground module"
Continuing to hold the Tap and Hold for more than 5 seconds will reveal the Campground Detail Screen. Newer iOS system can also use the 3D Touch interaction. 51
WIREFR AME S
My Trips Landing Screen > Current Trip Screen c u r r en t t r i p s c r een
m y t r i p s l a n d i n g s c r een
1 1
2
2
3
outpost app
margaretpadilla.com
1
current trip module
This module displays the trip that is currently in progress. It also will automatically start showing a week before the actual dates of the trip.
o u t p o s t i n - a p p n av i g at i o n 2
t r i p s p ec s ov e r v i e w b a r
This bar shows the Stops, Duration, Distance and Estimated Gas Costs of the activated stops on the trip itinerary. It will automatically update as stops of visited or toggled off or removed. 3 3
o u t p o s t i n - a p p n av i g at i o n
The Outpost app has its own proprietary navigation component that allows it to integrate with the user’s trip itinerary. See page 26 for annotations.
6
ta p 1
ta p 2
53
a r e a"
" s ta r t
r o u t e c ta"
Tapping this will initiate bring up the Start Route Modal. ta p
3
" f e at u r e
Tapping anywhere in this feature area will take the user to the Current Trip overview screen.
" s ta r t
route
s t i c k y f o ot e r "
The CTA displays as a footer on the Current Trip Overview Screen. It remains in place as the user scrolls to view the itinerary details. Tapping it will lead to the Outpost in-app navigation which has GPS tools that allows it to integrate with the user’s trip itinerary.
WIREFR AME S
My Trips > Current Trip > Outpost In-App Navigation o u t p o s t i n - a p p n av i g at i o n
r o u t e i n fo r m at i o n d r aw e
1
6
2
3
1
4
2 3
outpost app
margaretpadilla.com
1
current route guidance
This header area displays the current route guidance.
er
route map
2
n av i g at i o n ov e r v i e w
3
n e x t way p o i n t d e s t i n at i o n
4
n e x t way p o i n t a d d i t i o n a l
5
This area shows the expanded view of the navigation overview.
This area shows the next waypoint on the user's Trip Itinerary. Once the current waypoint is reach, navigation will continue to navigate to this waypoint until the user stops navigation mode.
d i s ta n c e a n d d u r at i o n
This shows the remaining distance and travel duration to reach the next way point. 5
route options
Users may change route options by tapping this icon: Fastest Route, Shortest Route. 6
route info coll apsed vie w
This area shows the navigation overview in its collapsed view. Tapping will reveal expanded view. ta p
1 6
vo i c e
Tapping this icon will mute or unmute navigation voice direction. ta p
2
" n av i g at i o n
d i r ec t i o n "
" s to p "
Tapping this icon will prompt the user to stop or stop & exit route. c l o s e r o u t e i n f o d r aw e r
3 55
Tapping "CLOSE" will collapse the Route Information Drawer.
WIREFR AME S
My Trips > Current Trip > Outpost In-App Navigation m a k e a s to p m en u
m a k e a s to p c ta
2
1
1
outpost app
2
margaretpadilla.com
3
1
m a k e a s to p c ta
Users can tap this CTA if they need to make a stop. 2
p i c k s to p s c r een
4
m a k e a s to p m e n u
This area shows the Make a Stop Menu. The menu overlays on top of the current navigation. m a k e a s to p l o c at i o n d e s c r i p t i o n
This is an example of a Make a Stop Location description. Since this is a limited navigation, it will not display all the location information. ta p to r e t u r n to 1
trip screen"
"c u r r e n t
Tapping this icon will return users back to the "Current Trip Screen." ta p to m a k e a s to p
4
2
Tapping CTA will reveal the Make a Stop Menu. close
3 4
"make
a s to p m e n u "
Tapping this icon will close Make A Stop Menu. ta p to a d d l o c at i o n to
4
r o u t e g u i d a n c e n av i g at i o n
Tapping anywhere in this box will add this location to the current route guidance. ne vermind
5 5
57
Tapping this CTA will exit the Pick Stop Screen and return the user back to the current route guidance navigation map.
WIREFR AME S
My Trips > Current Trip > Reservation Detail r e s ervat i o n d e ta i l pag e
r e s ervat i o n d e ta i l pag e
2
1 5
2
6
7
outpost app
margaretpadilla.com
1
c a m p g r o u n d l o c at i o n
Tapping on it takes users to the Campground Detail Screen.
c h ec k- i n co m p l e t e m o da l
e
&
2
campsite t ype
number
3
campground rules
This area shows the type of campside reserved and the campsite number. Tapping will users to a map of the campground.
Tapping on this area will take users to the Campground Rules Screen. 8
4
c ampground alerts
This area will show any alerts for the campground area. Tapping will bring up the Alert Modal. 3
5
pa r k g u i d e i n s i d e a c c e s s
This module will contain a picture of the campground. Tapping will reveal the Inside Guide Modal.
4
6
c h ec k - i n f o ot e r
The sticky CTA will remain at the bottom of the screen. The Check-In button will not be active until after the Check-in time. 7
view map
Tapping this area will open the campground location in a map. 8
c h ec k - i n c o m p l e t e m o d a l
This modal will confirm the Checkin process. s w i p e l e f t to s e e a d d i t i o n a l p h oto s 2
59
Swiping left on the feature area will reveal additional photos of the campground.
WIREFR AME S
Apple Watch Integrations
R E S E RVATI O N S
r e s e r vat i o n a p p r ov e d
outpost app
c h ec k - i n n ot i f i c at i o n
margaretpadilla.com
c h ec k - o u t n ot i f i c at i o n
s ta r t r o u t e
N AV I G ATI O N
ALERTS
m a k e a s to p
w e at h e r
61
WIREFR AME S Overview
outpost app
margaretpadilla.com
63
OUTP OS L AUNCH PR
https://marvelap
S T APP: ROTOT YPE
pp.com/2082g61
UX
PRO C E S S
MINICHEF app
ISSUE NO. 3
Food from the Heart
ISSUE NO. 3
UX PROCESS
MINICHEF APP
Experience Mapping: Understanding the needs of two users during each stage of the user journey.
PROCESS STEPS
CONCEPT
Problem Project Goal Affinity Mapping Experience Mapping Opportunity Finding Wireframes
iPad App ROLE
UX Design
The main thing is that everything become simple — easy enough for a child to understand. ALBERT CAMUS
P R O B L E M S TAT E M E N T The Minichef iPad app has 2 main functions: 1. Cook Mode: Access and view recipes 2. Manage Mode: Manage Minichef account settings and deliveries The main challenge of this project was to integrate these 2 core functions in one app while keeping the user interface straight-forward and easy to use for the 6-8 year old age group.
minichef app
margaretpadilla.com
PROJECT GOAL
OBJECTIVES
Create an iPad app for Minichef that is easy to use for both parents and children 1. Design a straightforward simple user interface geared toward children 2. Childproof "Manage Mode" to prevent children from accessing or changing important account information Minichef is a meal delivery subscription service that deliveries fresh ingredients for family-friendly recipes right to your door. Minichef encourages families to lead healthier lifestyles starting in the kitchen. 71
AFFINIT Y MAPPING Identifying and organizing wants, needs and concerns After conducting my initial research, I realized how and when users accessed or received content would play a major role in the success of the user experience. I wanted to understand when, where and in what context users should have access to certain information. I needed to understand what thoughts and concerns would be present in the
first place. To do this, I conducted an affinity mapping exercise to visually organize wants, needs and concerns into like-minded clusters. After placing the post-its in their respective clusters, I divided them into 2 categories: 1. Account Management 2. Recipe
ACCOUNT MANAGEMENT
Minichef
Recipe Management
Recipe Management
Recipe Questions & Preferences
Deliveries
minichef app
margaretpadilla.com
RECIPE
Recipe Related Actions
Making the Recipe
Ingredients
Accomplishments
Questions & Concerns
73
E XPERIENCE MAPPING Putting the users' wants and needs into context
PAR E N T
WA NT S & N EEDS
BOTH
WANT S & NEEDS
1 . PREPARE /OVERVIEW
CHILD
WA NT S & N EEDS minichef app
margaretpadilla.com
2. COOK
The next step was to decide when users would encounter certain features and information. To do this I placed the postits collected during affinity mapping with the step of the user journey where
3 . E AT!
it made the most sense. Users would interact with this information as they cooked the recipe. Anything left over would find a home either on the home screen, main menu or account settings.
4. REFLECT & REVIEW
75
5. CLEAN UP
OPP ORTUNIT Y FINDING Identifying areas for improvement The primary purpose of the User Journey exercise was to understand what concerns and information users may have during a particular step in the journey. After organizing the issues with their corresponding steps, I decided to focus on 4 feature integrations that would alleviate some concerns and painpoints users encounter during the cooking process.
INGREDIENT E X P L A N ATI O N Before starting the recipe, users are able to browse and learn about the ingredients in the recipe. Information will include health benefits, vitamins, fun facts and taste profiles. This is intended to engage the children and encourage their sense of curiousity.
minichef app
ENTER PIN TO BEGIN RECIPE In order to begin the recipe, an adult must enter the security PIN. This precautionary step ensures that unaccompanied children don't try to cook on their own. Parents are able to disable this feature in the settings.
margaretpadilla.com
M O M & DA D TA S K S VS . M I N I C H E F TA S K S Safety is paramount in the kitchen especially when children are involved. To help keep little ones away from dangerous tasks, each step is broken into Mom & Dad and Minichef. Also, as a plus, these suggestions directly involves the child in the cooking process without nagging from Mom or Dad.
TIPS & TRICKS Minichef's beloved mascot, Ernie, pops in and out of the app to excite the children about cooking. He will pop up and introduce tips and tricks when applicable. 77
WIREFR AME S Inital wireframe sketches These are some initial sketches before I moved on to digital wireframes.
minichef app
margaretpadilla.com
79
WIREFR AME S Digital wireframes This is an overall snapshot of my final wireframes. View this project on my website margaretpadilla.com to see more of wireframe iterations and process.
minichef app
margaretpadilla.com
81
MINICH L AUNCH PR
https://marvelap
HEF APP: ROTOT YPE
pp.com/1j8h341
Thank You
This portfolio is dedicated to my parents who have given me the world and more. Thank you for teaching me the importance of hard work and making my dreams a reality. Thank you to my friends, instructors and mentors at City College, especially Sean, Paul and Candice. You all inspire me to be a better person, designer and overall human being.
Special Thanks
Desiree, my fellow nighttime warrior. Michelle, my portfolio mom and hero. Diolinda, my brainstorm buddy. Vina, my UX soundboard. Melanie, my too helpful friend. Luke, my debriefing detox. Kenny, my logo mastermind. Archie, my warm and fuzzies. Michael, my thick and thin.
THANKS FOR READING. check out more of my work m a r g a r e t pa d i l l a . c o m
m a r g a r e t pa d i l l a @ g m a i l . c o m