UX PORTFOLIO
Todd Torabi
[email protected]
858.6996.6851
Jump to:
My Story
Emirates.com
Process + Philosophy
Petrolicious.com
Doorsteps.com
Veloce
toddtorabi.com
Index
My Story
My Story
Beginning
It all started in college when I designed and operated an online tutoring business
while majoring in Economics + Entrepreneurship. I eventually declined a seedoffer to expand the company, for the opportunity to better my skills as a product
designer and eventually build a career in New York City.
Emirates Global
After enrolling at General Assembly’s 10 week UX Design Immersive program and
working through a few freelance gigs, I worked with Atmosphere BBDO’s UX
team to consult their client, Emirates.com Global, in Dubai. Living in Dubai for a
total of 6 months was not only great for my development as a UX designer, but
for my confidence working with and presenting to clients on a daily basis.
Petrolicious
More recently, I am leading a team of designers, developers, and project
managers for the complete responsive redesign and rebranding of
Petrolicious.com. I am balancing this project with my contract work at
Atmosphere BBDO in NY.
Next Steps
It’s a really exciting time to be designing digital products. Right now, I’m looking
to build on my past experiences to get better as a UX designer. A team with a
design process that values high-level thinking, thought leadership, and innovation
is who I know I can contribute to, and continue to learn from as I move forward
with my career.
Index
Process + Philosophy
Process + Philosophy
Overall PhilosophyConfining a digital product to only it’s feature set and visual identity hampers it’s ability to
grow and connect with people on a deeper level. Brands and businesses make people feel and
act in very specific ways, and there should be continuity in how they interact with products
offline and online. Digging deeper into brand affinity on all touch points in order to optimize
value for the user are keys to my design process.
Experience Mapping Tools: Whiteboard, diagrams, flow charts, marker + paper
Simulating the user experience across all touch points with the product provides a great sense
of opportunity for innovation, areas in need of improvement, and overall strengths that should
be highlighted. The devices used for each of these touch points also help determine how each
medium can be optimized and which platform should be prioritized.
Below is an example of how our team mapped out the customer journey of the entire
Emirates Airline experience.
Stages
Shopping
Research & Planning
Booking
Post-Booking, Pre-Travel
Talking with family/coworkers/friends
What
the User
is Doing
Online booking
Phone call
Walk into travel agency
office
Comparing airfare prices
Looking up schedule, route maps
Browsing destinations/airports
Receive travel documents >
Check Status > Make
necessary changes
Thinking
Feeling
I will miss being home but
looking forward to
exploring a new place.
Just business, no big deal
Devices
(based on
analytics and
assumptions)
Opportunity
for EK
Desktop
Offering Special Offers,
Building a tool to inspire
travel,
Provide user stories on their
website, encouraging similar
experiences for new
customers.
I need to get the best price.
How do I know this is the best
price?
Do I have a Visa?
What am I willing to
compromise on?
I will miss my friends.
What if I meet some
awesome people?
I’m a little anxious
about the flight.
I really hope my seat is
comfortable
Desktop
More transparency on how
prices are formulated,
user-friendly search results
process for the user,
information about best
deals, and services that are
offered for those fares.
Do I need to sign up for
Skywards?
How should I pay for this?
What are the benefits to me
as a member?
This is finally becoming a
reality.
There are too many steps
in this booking process.
I feel like I’m missing
something.
Desktop/Mobile/Tablet
Guiding language in
booking process (content
audit may be needed),
multiple access points to
Skywards signup,
consolidate booking
engine for users who want
to quickly check-out.
Check-in > Read
Travel Info > Make
Changes
Share photos, status
updates, emails
Reading online travel guides
Where should I go?
How long should I stay?
How much can I afford?
What can I when I’m there?
How do I find my way there?
Do I know anybody who’s
been there?
Travel
Do I have everything ready?
Are all my affairs at home in
order?
I need to share my itinerary
with my family/friends
So excited. Can’t wait for
the trip.
Post-Travel
Share photos, status updates,
emails
Check account for miles earned
potentially call for errors/
omissions in account
I want to share my experience
with friends and family.
How do I deal with a
situation if
something goes
wrong or I’m late?
This is so much fun.
Can’t wait to be back
home.
I love it here.
I wonder if my miles converted
to my account efficiently
I wonder when I can go back
again.
I’m so happy I went on this trip
and went with this airline.
I am a little frustrated that my
luggage was lost for a while.
I wish I had more deals or offers
from the airline.
Tablet/Mobile
Access to what services/
feature are not the flight,
FAQ/Help features specific
to post-booking and pretravel, anticipitory emails
to user.
Desktop/Tablet/
Mobile
Desktop/Mobile
Build EK social feature
for users to easily find
more information
about the people on
their flight, post
content, share
experiences, etc.
Provide examples of user
stories/experiences on their
trips, social media campaign to
encourage user submissions of
photos/videos/ etc, follow up
with user on future deals and
discounts to related locations.
Process + Philosophy
Validation Tools: data/analytics, research reports, competitive analysis
Understanding which design solutions are worth pursuing must be
validated by analytics and research. Information on user behavior was
a crucial aspect of our process at Emirates and Petrolicious. Without
it, moving forward to preliminary sketching and site-mapping would
be difficult and uninformed. A competitive analysis is also helpful in
understanding how other brands and products solve common
problems.
Site Map + User Flows Tools: flow charts and diagrams
Designing how all elements of an experience will connect is one of
the most important steps in my design process. Making sure that a
site map communicates all goals of the product/feature is secondary
to analyzing how it works in context to certain types of users. This is
achieved through building personas and articulating how these
personas would flow through the site map efficiently.
Sketching + Wireframing Tools: marker + paper, omnigraffle, balsamiq,
Building the architecture of the product provides a foundation for the
user interface and how all the elements interact with one another. I
usually start with low fidelity sketching and move on to annotated,
high fidelity wireframes.
Process + Philosophy
IteratingTools: marker + paper, omnigraffle, balsamiq,
Sometimes the designs don’t feel right, or the client (Emirates for
exmaple) don’t approve or understand the way it works. How willing a
designer is to iterate on their designs is a reflection of their ego and
patience to build the best product possible. In my experience, iterating
on designs is part of diving deeper into the problem, and taking into
account all stakeholders.
Interaction Design Tools: inivision prototyping, flinto mobile prototyping, HTML prototyping
Prototyping should take into account how we want users to
effectively navigate all elements of the experience, and what
constraints there are in the development process. Prototypes not only
bring designs to life, but also provide an opportunity for user testing,
and validation of usability.
Guiding Art Direction and Development/QA Tools: inivision prototyping, flinto mobile prototyping, HTML prototyping
Understanding all the intricacies of product management is crucial to
having a full perspective in the design process. I love getting involved
in art direction, front-end development, CMS integration, and QA
mostly because it provides even more context to solving problems in
the future.
Index
Emirates.com
Recent UX projects
Emirates.com Global
Special Offers & Featured Fares
Role: UX and UI
Team: Senior UX, Art Director, Front-End Developer, Account Supervisor
Problem:
Emirates.com offers many special-priced offers and fares for their customers.
As part of the redesign project, our goal was to provide transparency of all
information and regulations, increase personalization through filtering and
saving offers, and designing the experience to be responsive, ultimately
leading to more touch points for the user and increasing revenue for Emirates.
Highlights of our Process:
Prioritizing the Feature Set:
We weighed how important all the potential tasks and features were by level
of importance. The “highly” important tasks and features to our user base
were eventually implemented into our wireframes. Searching for new offers,
scanning all offers at once, filtering by category, saving and sharing offers,
and interacting with an optimized UI for mobile and tablet were of the
“higher” priority actions we included in our site map and eventual
wireframes.
Mobile/Desktop Interaction Design:
The challenge with this project was finding unique ways to communicate the
large amount of information and guidelines. We also had to consider the fact
that most users were accessing special offers on their phone. So, we went
with a mobile-first approach in our design process. The interface had to
reflect all required information, and be accessed through unique, mobilefriendly interaction design. The advantage of prioritizing mobile interactions
was that the design could scale properly across all devices and screen sizes.
Interaction Design Examples
Results and Next Steps:
After several rounds of iterations to the wireframes and frequent client
presentations, my team agreed on a general approach for the visual identity of the
feature, and I helped guide the front-end development team on interaction
design. The project is still under development and is set to launch in January 2015.
Mobile & tablet view of Offer
Featured Fares homepage across two breakpoints (501px and 1001 px)
Mobile and desktop designs of Special Offers
Emirates.com Global
Media Centre & About Emirates
Role: UX and UI
Team: Senior UX, Art Director, Business Analyst, Analytics, Account Supervisor
Problem:
Emirates.com offers very little information about their airline or brand
message. Although the company spends a lot of resources on advertising and
marketing, their website doesn’t consistently reflect Emirates’ desire to be a
lifestyle brand. Communicating the pillars of the Emirates brand while
providing content for press/journalists was that main approach we took with
this this project.
Highlights of our Process:
Site Mapping for Journalists and Press:
Before designing the responsive interface and user experience for About Emirates,
I considered who the end user would be as well as what qualities of the brand
needed to reflected. The primary use case for these pages would be press and
journalists who need information quickly. The secondary use case was new and old
customers who want to learn more about the Emirates brand through photos,
videos, and news releases. I crafted a sitemap to connect all elements that would
provide the most accessible user experience for both types of users.
Site Map
Highlighting Search and Filtering:
Combining user needs with the brand and business initiatives was a common
challenge consulting for Emirates, and this project was no different. Starting with
basic sketches and low-fidelity wireframes, the product evolved through countless
client meetings and presentations. A key factor for the design of the Media Page
was the ability for users to quickly search and filter for content. Rather than
prioritizing free-will exploration as an experiential quality of the site, we prioritized
accessibility. Thus, the first set of functionalities the user is introduced to is the
search field and filters for All Media, Photos, News, and Videos. Checking on these
boxes automatically loads the respective content to the page. This was extremely
crucial for journalists and analysts who needed specific information and media. Once
desktop wires were approved, responsive designs proceded with careful
consideration for distinct user behaviors on mobile and tablet.
Results and Next Steps:
Upon the approval of the client, I worked closely with our Art Director on the UI
and visual identity. Communicating the ease of use and exploratory nature of the
content was very important in a visual sense, and I maintained close contact with
the visual designers to ensure that. The designs came out great, reflecting the
new, flat-style design Emirates will be incorporating across the site.
Desktop designs of About Emirates + Media Centre
Photos Page
Our Company Page
Media Centre
Contact Us
Responsive Design Examples
Final Design Examples
About Emirates Homepage
News Page
Media Centre
Our Company Page
Photos Page
Index
Petrolicious.com
Recent UX projects
Petrolicious.com
Petrolicious Homepage
Role: UX
Team: Project Manager, UX Designer, SEO analyst,
Development team, Art Director
Problem:
Petrolicious is known for their fantastic short films on rare, vintage cars from all
around the world. The challenge in this redesign project was to introduce their new
features, while allowing users to rediscover old content across all devices. The project
offered opportunities to design for several different features like user profiles that can
save and share content, exploration through photo/video galleries, beautiful road trip
guides, dynamic display of car shows and events around the world, and a
“Collections” concept with exclusive subscribed content provided every week.
Highlights of our Process:
Discovering Old Content:
The over-arching concept that resonated throughout the user experience is “timeless”
content. Our belief was that Petrolicious offered rich stories, high-quality videos, and
unique perspectives that were always relevant, no matter when they were published.
Our goal for the homepage was to build opportunities for the user to discover all types
of content, while introducing features of the profile experience. Understanding user
paths throughout the site provided great insight into how we offer quick access points
on the homepage:
User Paths/Flows
Analytics lnspiring Responsive Design:
Nearly 37% of users are currently accessing Petrolicious.com via mobile and tablet
devices. The bounce rate (35%) is double and the time on site (1:30 minutes) is half of
that on the desktop experience. Our team had a huge opportunity to design a
responsive digital experience to encourage more usage on those devices and thus
decrease bounce rates for all current and potential fans.
Results and Next Steps:
I worked closely with our Art Director on the UI and visual identity for these
homepage wireframes. I wanted the designs to reflect the Petrolicious brand while
communicating the concept of exploration and integration of all content on the
homepage. I also communicated functional specs and technical requirements to
the development team to ensure that our vision can come alive.
Responsive Wireframes
Breakpoint Range: 1001-1400px
Results and Next Steps:
After several rounds of iterations to the wireframes and frequent client
presentations, my team agreed on a general approach for the visual identity of the
feature, and I helped guide the front-end development team on interaction
design. The project is still under development and is set to launch in January 2015.
Responsive Designs
Breakpoint Range: 501-1001px
Breakpoint Range: 320-501px
Petrolicious.com
Petrolicious Content Pages
Role: UX
Team: Project Manager, UX Designer, SEO analyst,
Back-end Developer, Visual Designer
Problem:
The value-add for Petrolicious is their content. Videos, articles, events recaps, and
guides are the core of their business, and it was up to our team to design a seamless
experience that focused on readability and exploration of related content. Integrating
the profile experience into this experience was also a priority.
Highlights of our Process:
Focus on Readability:
A lot of editorial websites distract the user from the actual content with ads, related
content, links, and more ads. Our team wanted to design an experience where the user
could focus on the content without clutter. With such rich content available on the site,
we believed this approach would be the best way to showcase it.
Prioritizing Tasks:
Building a list of all possible user interactions with content helped us formulate a general
strategy for wire framing the experiencing. Based on our three personas (David, Jonas,
and Stephanie), we developed a color-coded diagram of how important certain tasks
were to them. Stephanie, for example, is an avid car fan but doesn’t have time to read
the article or watch the video. Therefore, her desire to save content for later, viewing
condensed articles, and searching for what she exactly wants are use cases we needed
to consider in our design process.
Task Analysis
Adaptive Navigation and Comment Functionality:
The navigation offered opportunity to introduce new functionality that fits in
context with how the user interacts with the content. Our team’s general hypothesis
was that if a user scrolls down a content page, their desire to share, view
comments, or save the piece would increase. To fulfill this strategy, we designed an
adaptive navigation that allows the user to do all of those things. Once the user
scrolls back up, the nav adapts to that interaction and reverts back to it’s original UI.
Content Pages
Index
Doorsteps.com
UX Consulting
Doorsteps.com
Interactive Guide to Buying a Home
Role: Information Architect
Team: UX Designer, UI Designer, Founders of Doorsteps.com
Problem:
Doorsteps’ goal was to create an interactive experience for those who are
looking to buy a home smarter, better, and faster. The obstacles users faced
with Doorsteps lied in the flow and process of the home-buying educational
tool. So, rather than visually restructuring Doorsteps' website, we focused
on information architecture and user flows.
Highlights of our Process:
Information Architecture:
Users often complained about the number of steps, and were especially
frustrated with the frequent prompting of personal information, such as
credit score, marital status, contact information, etc. Thus, we prioritized less
steps, and a more interactive educational experience, as that was the most
popular feature on doorsteps.com
Targeting KPI’s:
My role was to reconstruct Doorsteps' user flows and make each step more
interactive. The primary KPI was to reduce the high bounce rate after step 2,
which assessed the users' buying power. Some other key performance
indicators were increasing the engagement periods per user by 50%,
establishing more agent/lender and buyer matches by 25%, and more
conversations between the buyer and agent/lender.
Early site mapping with post-its
Final Site Map + Flows
Results and Next Steps:
We reduced the number of questions by 35%, and created a cleaner, five step
process with the last two steps being locked, until a user decides to connect with
an agent. Giving users the freedom to start where they wanted in the homebuying path, and learn as much as they can, while inputting the valuable
information that Doorsteps needs to match them with agents and lenders was
crucial. Locking the last two steps made the immediate process seem shorter, and
gave users some added motivation to sign on with an agent through Doorsteps.
Index
Veloce
Founder and Designer
Veloce
Online Vintage Car Showroom
Role: Co-founder, UX
Team: Petrolicious staff & development agency
Problem:
Veloce Classic Car Exchange (Veloce), is a classic car sales listing website that
combines curated content and transactional services to walk vintage car enthusiasts
through the buy/sell process. Think Airbnb meets vintage cars. A friend and I designed
the concept and pitched it to the founder of Petrolicious, the company my team has
been consulting ever since. The goal of this project was to bring power to online
buyers and sellers of vintage cars. It is a billion dollar industry, and the competitive
online experiences supporting those transactions do not value UX nor a meaningful
content strategy. We believed that partnering with Petrolicious could combine our
vision for excellent content, UX enhancements in the buy/sell process, and branding/
marketing that the industry fans deserve.
Buyer & Seller Maps
Veloce Ad for Vintage Car
STAY IN TOUCH!
For more work examples, don’t hesitate to reach out:
Todd Torabi
[email protected]
858.6996.6851
Jump to:
My Story
Emirates.com
Process + Philosophy
Petrolicious.com
Doorsteps.com
Veloce
toddtorabi.com