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
© Copyright 2024