https://kolvera.com Katherine Olvera - UX Portfolio Mon, 21 Oct 2019 04:17:44 +0000 https://kolvera.com en https://kolvera.com/Home Sun, 13 May 2018 19:49:45 +0000 Katherine Olvera - UX Portfolio https://kolvera.com/Home A designer who never stops learning. I’m a senior UX designer in Dallas, currently working at Viget.&nbsp;I began my career designing physical products, from apparel to accessories. While working with a wearables team, though, I found myself drawn to tech and began my journey into UX design. No matter the medium, from physical materials to digital interfaces, I bring a process of investigation: ask questions and listen, identify a problem and research, observe and analyze, explore solutions and test. Check out some of my work to see that process in action. Work <img width="1050" height="525" width_o="1050" height_o="525" data-src="https://freight.cargo.site/t/original/i/b1f38ff3a19289b3a14d31278415cf2c0b08bff1c84c41efbba503f5278f1f26/Thumbnail.jpg" data-mid="53069462" border="0" src="https://freight.cargo.site/w/1000/i/b1f38ff3a19289b3a14d31278415cf2c0b08bff1c84c41efbba503f5278f1f26/Thumbnail.jpg" /> Ace Your Retirement Encouraging people to start planning for retirement now For Ad Council, AARP Role Content Strategy <img width="1050" height="525" width_o="1050" height_o="525" data-src="https://freight.cargo.site/t/original/i/a3e26cffe41e451be57662f96d4c081133022f418d21c7f56ad31e0ca3a4dca1/Thumbnail.jpg" data-mid="53069465" border="0" src="https://freight.cargo.site/w/1000/i/a3e26cffe41e451be57662f96d4c081133022f418d21c7f56ad31e0ca3a4dca1/Thumbnail.jpg" /> Feed the Future Illustrating the mission and work of the US’ global food security initiative For USAID Role Content Strategy, UX Design <img width="1050" height="525" width_o="1050" height_o="525" data-src="https://freight.cargo.site/t/original/i/bb4152a4eba47a2de5f0d64844d579c52e85f276f4bc6709a293cfec565c4bb1/Thumbnail.jpg" data-mid="53069495" border="0" src="https://freight.cargo.site/w/1000/i/bb4152a4eba47a2de5f0d64844d579c52e85f276f4bc6709a293cfec565c4bb1/Thumbnail.jpg" /> Leadership Coaching App Scaling leadership coaching to serve middle managers For Optify Role Product Strategy, UX Design <img width="1050" height="525" width_o="1050" height_o="525" data-src="https://freight.cargo.site/t/original/i/4e5cc30b8c9b8f64db3c3626ece343b4c3b52d7395bef22859e0f6074263521c/ExploringEComm-NEW.jpg" data-mid="52602846" border="0" data-no-zoom src="https://freight.cargo.site/w/1000/i/4e5cc30b8c9b8f64db3c3626ece343b4c3b52d7395bef22859e0f6074263521c/ExploringEComm-NEW.jpg" /> Exploring E-Commerce Helping online shoppers browse products more organically For Apprenticeship at Viget&nbsp; Role Research, Interaction Design View More Work Writing Just My (Proto)typeJuly 2019 Fashioning Tech: How to Innovate in the Fashion IndustryFeb 2019 (NoVA UX) Ceci n’est pas un prototype.Aug 2018 A Bone to Pick with Skeleton ScreensOct 2017 Improving the Way We Shop Online: A Viget ExplorationSep 2017 View More Writing https://kolvera.com/Ace-Your-Retirement Sun, 20 Oct 2019 15:19:46 +0000 Katherine Olvera - UX Portfolio https://kolvera.com/Ace-Your-Retirement Ace Your Retirement Content Strategy For people in their late-40s and 50s, retirement can seem distant. In addition, life isn’t always predictable, which can create many financial pressures, whether it be acting as a caregiver or losing a job. All of that can make it difficult to save the money needed to retire. AdCouncil and AARP partnered to create a campaign to address people who were quickly approaching retirement, but who hadn’t been able to save. They wanted to encourage and empower them to start planning for retirement now. ProblemRetirement calculators are often dire, which can leave people fearful and unsure about what to do next. Instead, we wanted to create an experience that encouraged those approaching retirement to take a meaningful step towards retirement today. SolutionCollaborated with a team of copywriters, designers, and developers to create a friendly retirement coach to guide users through a set of questions, which returns a set of personalized, prioritized action items. The Process Categorizing ContentAARP had over 200 articles about how to prepare for retirement. But these articles weren’t tailored to the audience at hand. While AARP had detailed information about the relative benefits of annuities and whether you should consider a Roth or traditional 401(k), there was no checklist that simply laid out how to get started. That can be overwhelming for people new to retirement planning. To simplify, we started reading through each of the articles to find the relevant information and organizing the actionable tips into categories. We then collaborated with subject-matter experts at AARP to determine which of these tips were most applicable to our audience. We finally narrowed to a set of roughly 20 action items that could help someone jumpstart their retirement planning. <img width="2880" height="1600" width_o="2880" height_o="1600" data-src="https://freight.cargo.site/t/original/i/6fad6da2e295b43a3baa848ac873c9aae39493b5b3f8636c374110a286cfeee0/Full-Width01.jpg" data-mid="53055568" border="0" src="https://freight.cargo.site/w/1000/i/6fad6da2e295b43a3baa848ac873c9aae39493b5b3f8636c374110a286cfeee0/Full-Width01.jpg" /> PersonalizationEarly research had shown that our audience had negative attitudes to chat-type experiences that delivered generic or impersonal responses. As we were designing this digital campaign and the content around it, we wanted to design a chat-like experience that felt personal and conversational. In collaboration with several designers and copywriters, we developed a script and a character named Avo who would ask questions and give reassuring and encouraging responses as a user engaged with the chat. But all that work wouldn’t be useful, if the payoff, the results delivered at the end of the experience, seemed generic. We needed to make sure that the list of action items wasn’t just a standard list, but was tailored to the user’s particular situation. <img width="2880" height="1000" width_o="2880" height_o="1000" data-src="https://freight.cargo.site/t/original/i/d2dd3e1130e3aad3b08dfcf5ded5290be88fe062a85816fe657cf330b2c82498/Full-Width02.jpg" data-mid="53055623" border="0" src="https://freight.cargo.site/w/1000/i/d2dd3e1130e3aad3b08dfcf5ded5290be88fe062a85816fe657cf330b2c82498/Full-Width02.jpg" /> PrototypingWith questions, answer options, and action items all determined, we now had to decide which answers would trigger which action items. We prototyped the logic in a dynamic spreadsheet to test the results of different response sets for a few key personas we had in mind. This allowed us to see whether the logic we had mapped was working as expected or whether we needed to tweak it before building. <img width="949" height="597" width_o="949" height_o="597" data-src="https://freight.cargo.site/t/original/i/9dc6f12a8656ea7786ec9a90c3953041c0da268fd850ef86b11ab880dae13772/c7YaFZcPBk.gif" data-mid="53057394" border="0" src="https://freight.cargo.site/w/949/i/9dc6f12a8656ea7786ec9a90c3953041c0da268fd850ef86b11ab880dae13772/c7YaFZcPBk.gif" /> Testing &amp; Iterating After launch, we continued to monitor site traffic, analyzing who was coming to the site and what types of results they received. Our research team conducted interviews with some members of our target audience and found that certain action items resonated more with them, either because they seemed more tailored to their situation or provided actionable advice that felt fresh. Prioritizing those action items in their results would likely help them feel that the experience was more personalized and valuable. In light of these findings, we’ve continued to make adjustments to the copy of questions and action items, as well as the logic. View Site <img width="2880" height="1200" width_o="2880" height_o="1200" data-src="https://freight.cargo.site/t/original/i/03e5e533595de63a849a7bf6c319f56f0e2262a4d105ad7bf2020b91303be798/Full-Width03.jpg" data-mid="53055638" border="0" src="https://freight.cargo.site/w/1000/i/03e5e533595de63a849a7bf6c319f56f0e2262a4d105ad7bf2020b91303be798/Full-Width03.jpg" /> Next Project https://kolvera.com/Feed-The-Future Mon, 21 Oct 2019 01:32:01 +0000 Katherine Olvera - UX Portfolio https://kolvera.com/Feed-The-Future Feed the Future Content Strategy &amp; UX DesignFeed the Future is the US Government’s global hunger and food security initiative. They develop strategies to tackle hunger and nutrition around the world. To do that, they bring together and orchestrate experts from across governments, non-profits, and the private sector to make progress. They needed a new website to better communicate the many aspects of their work to both their partners and the public: their mission, their approach, and the impact of their projects. ProblemFeed the Future had a wealth of resources, but they were difficult to navigate. Additionally, the information felt rather disconnected. There were statistics and results, but there was no narrative to help the public understand what all this meant, that these statistics represented lives changed. SolutionDesigned and developed a responsive website on a new CMS platform. The new CMS structure would help them better maintain and edit their content going forward, while also allowing them to draw deeper connections between related content. The Process Understanding AudiencesBefore we began designing, we needed to understand the different audiences coming to the website and what they were looking for. In order to do that, we facilitated several workshops with Feed the Future to discuss all their users, categorize them, and prioritize them. We found that the audiences could be organized into three core groups: those looking for data-oriented results, those looking for stories of the human impact, and those looking to get involved. We kept these groups in mind as we started to develop new navigation structures and redesign pages. <img width="2880" height="1000" width_o="2880" height_o="1000" data-src="https://freight.cargo.site/t/original/i/68186385f79b08166778bdfb13c1ee5ea6ea82b6f9582c85888c621a9f355f48/Full-Width01.jpg" data-mid="53064368" border="0" src="https://freight.cargo.site/w/1000/i/68186385f79b08166778bdfb13c1ee5ea6ea82b6f9582c85888c621a9f355f48/Full-Width01.jpg" /> Information ArchitectureA content audit revealed some key problems. All serial content was in one area, regardless of purpose. This included research, success stories, press releases, director’s statements, and more. This made it difficult for audiences to filter through the resources to locate the specific data or stories they were searching for. Additionally, a few important pages were getting buried. These pages contained important information, but they didn’t have much traffic because the navigation didn’t account for these pages. We developed a revised IA to account for these buried pages, added new content categories, and renamed navigation items to be clearer. <img width="2880" height="1500" width_o="2880" height_o="1500" data-src="https://freight.cargo.site/t/original/i/58d515a77aadcf38d8fab25951ab7ed3d6d974743fac9210f502e682fa382528/Full-Width02.jpg" data-mid="53064538" border="0" src="https://freight.cargo.site/w/1000/i/58d515a77aadcf38d8fab25951ab7ed3d6d974743fac9210f502e682fa382528/Full-Width02.jpg" /> Wireframing Key PagesWe realized early on that we would need to devote a fair amount of time to redesigning country pages. Country pages aggregated all the information about the projects Feed the Future was doing in a target country. This was a huge opportunity to illustrate Feed the Future’s strategy and impact.&nbsp; In the original site, the information was dense and difficult to read. They used tabs to break up the information. Superficially, this made the pages appear shorter, but it also buried much of their important work. We worked on developing wireframes that would prioritize information based on the audiences we had discussed. Data-oriented audiences were looking for a quick snapshot of progress in that country. We moved stats up to the top of the page along with a summary to give the proper context for those stats. This effectively gave this audience a quick snapshot of the work in a given country. Audiences interested in more detail could read on to find out more about the strategy, tactics, and projects in the country. Throughout the page we broke up the text with images, maps, and links to related stories to help people see a connection between the numbers and real human lives. While the page appears longer, we’ve created a narrative flow through the page, established a hierarchy that fits our audience needs, and broken up the content to make it more digestible. <img width="2880" height="1500" width_o="2880" height_o="1500" data-src="https://freight.cargo.site/t/original/i/c6594eb38c8c88fc291464a89efbb2db34ec8daf12a981b6338ef7c0fd4a2c9a/Full-Width03.jpg" data-mid="53064789" border="0" src="https://freight.cargo.site/w/1000/i/c6594eb38c8c88fc291464a89efbb2db34ec8daf12a981b6338ef7c0fd4a2c9a/Full-Width03.jpg" /> Working with a designer and front-end developer, we developed a full system of templates and blocks for the CMS that would be accessible, flexible, and responsive. This would enable the USAID team to more easily manage and maintain the site going forward. View Site <img width="2880" height="1200" width_o="2880" height_o="1200" data-src="https://freight.cargo.site/t/original/i/cc31708d7cf6282bbd7b74d8be948bae28691a89705146de18138a9f3f84aebc/Full-Width04.jpg" data-mid="53064820" border="0" src="https://freight.cargo.site/w/1000/i/cc31708d7cf6282bbd7b74d8be948bae28691a89705146de18138a9f3f84aebc/Full-Width04.jpg" /> Next Project https://kolvera.com/Leadership-Coaching-App Mon, 21 Oct 2019 00:47:24 +0000 Katherine Olvera - UX Portfolio https://kolvera.com/Leadership-Coaching-App Leadership Coaching App Product Strategy &amp; UX DesignOrganizations invest in leadership development to help their team members manage both their work and their team. Personal leadership coaching is effective, but expensive. So, it is typically reserved for senior executives. Meanwhile, middle managers are typically introduced to leadership through group trainings and workshops. These trainings have a consistent curriculum, allowing for leadership development to scale to larger groups of employees. Pam Krulitz, an experienced executive leadership coach, came to us with an idea.&nbsp; She wanted to use technology to scale one-on-one leadership coaching, combining the best aspects of training and coaching. With coaching available to a larger group of individuals, organizations could start to see a larger return on investments in leadership development.ProblemCoaching is deeply personal. It’s tailored to the individual being coached. In order to scale, we needed to create a structure would allow us to manage the logistics and resources for a coaching program in a centralized manner. However, it still needed to feel personal and flex to accomodate different coaching engagements SolutionAlong with developers and designers, we designed and built a web application from the ground up. Today, Optify is a fully-functional platform&nbsp; with many active coach and client users. The product allows coaches to work through a given curriculum with their clients: setting goals, assigning exercises, scheduling meetings, and communicating.The Process Proof of ConceptOur first step was to take our client’s vision and turn it into something tangible. In a two-week sprint, we put together a clickable prototype to function as a proof-of-concept. This allowed our client to demonstrate her concept to potential clients and investors and gauge product-market fit.&nbsp; She was able to get valuable feedback about what would differentiate her product in a low-cost way. <img width="2880" height="2000" width_o="2880" height_o="2000" data-src="https://freight.cargo.site/t/original/i/1d613a76ae0d74d30f24de694c5c65396cb2a0b62fbcb7f5cc45a3108c7103a9/Full-Width01.jpg" data-mid="53063445" border="0" src="https://freight.cargo.site/w/1000/i/1d613a76ae0d74d30f24de694c5c65396cb2a0b62fbcb7f5cc45a3108c7103a9/Full-Width01.jpg" /> Research &amp; AnalysisOnce our client had assurance that there was interest and a market for her concept, it was time to start planning and building the product. The proof of concept was largely driven by our client’s vision. We needed to take a step back. We conducted an extensive competitive analysis and interviewed potential users to understand what features our MVP should have, and what we should focus on building first. <img width="2880" height="1500" width_o="2880" height_o="1500" data-src="https://freight.cargo.site/t/original/i/4ad0222a7abdd5e4cb479ac76478888594b4eb3c8fb89399f4c683850871e0e5/Full-Width02.jpg" data-mid="53063451" border="0" src="https://freight.cargo.site/w/1000/i/4ad0222a7abdd5e4cb479ac76478888594b4eb3c8fb89399f4c683850871e0e5/Full-Width02.jpg" /> Concept ModelingOnce we knew what features would be vital to an MVP, we needed to model out all the objects that would exist in the system and how different features would allow users within the system to create, edit, update, and delete different objects. We diagrammed out the system to help us fully understand how all the pieces fit together. <img width="1440" height="1503" width_o="1440" height_o="1503" data-src="https://freight.cargo.site/t/original/i/995e5420ac58c04152f775b85d2f62e558a44f30c6463c47995f1941c0f86326/Column-Width.jpg" data-mid="53063454" border="0" src="https://freight.cargo.site/w/1000/i/995e5420ac58c04152f775b85d2f62e558a44f30c6463c47995f1941c0f86326/Column-Width.jpg" /> Product Design As we prepared for development, we created wireframes, which were eventually built up into higher-fidelity designs, to lay out the navigation and interaction patterns for some of the key features. This example shows how a coach could create an assignment. <img width="2880" height="1024" width_o="2880" height_o="1024" data-src="https://freight.cargo.site/t/original/i/823e3bc1b672c61e1348e752a75a817d1195e73059305e82abc2900a3c50d8b8/Full-Width03.jpg" data-mid="53063455" border="0" src="https://freight.cargo.site/w/1000/i/823e3bc1b672c61e1348e752a75a817d1195e73059305e82abc2900a3c50d8b8/Full-Width03.jpg" /> Iteration We began with launching an MVP that could be piloted by a small cohort of coaches and clients. Since then, we have continued to iterate on the application, refining features and adding new ones as we hear more feedback, monitor usage, and learn about what users need. <img width="2880" height="1200" width_o="2880" height_o="1200" data-src="https://freight.cargo.site/t/original/i/a15994bbdc85a20e5a1cf5daa1a1e96ce3eb2f992b20236f05a8dfb3ef991238/Full-Width04.jpg" data-mid="53063456" border="0" src="https://freight.cargo.site/w/1000/i/a15994bbdc85a20e5a1cf5daa1a1e96ce3eb2f992b20236f05a8dfb3ef991238/Full-Width04.jpg" /> Next Project https://kolvera.com/Exploring-E-Commerce Sun, 13 Oct 2019 21:52:23 +0000 Katherine Olvera - UX Portfolio https://kolvera.com/Exploring-E-Commerce Exploring E-Commerce Apprenticeship Project, Viget While working in retail, I learned a curious fact: while more and more people are shopping for clothes online, this doesn't necessarily translate into a rise in sales. Per transaction, online sales often trail traditional store sales. While at Viget, I decided to investigate why. I focused on how to improve the user experience for browsing apparel, accessories, and home goods online. Read more about what prompted my investigation.&nbsp; ProblemMany e‑commerce sites are optimized to search for independent items. This can be a dissatisfying experience for the many shoppers who prefer to discover, browse, and compare in a non‑linear manner. How can successful design strategies from the physical retail space be adapted to the virtual one to accommodate these users? SolutionI redesigned the traditional e‑commerce grid to surface a wider variety of product categories, so that customers could start to make comparisons as they browsed online stores. This creates a richer, more dynamic experience that would enable users to shop for collections and ensembles, as opposed to items. The Process ResearchI began my investigation with research: studying physical store design, observing shoppers, and interviewing women about their shopping preferences. I then mapped common shopping behaviors to a preference for online or physical shopping. This helped me determine where online retailers had an opportunity to improve. For example, fit, proportion, product comparisons, and product pairings were often difficult to understand online.&nbsp; <img width="2880" height="1600" width_o="2880" height_o="1600" data-src="https://freight.cargo.site/t/original/i/606cec7c5dc551d79f1a5b114ca12602382a76122fc97a1a24708e7204e60d1b/Full-Width02.png" data-mid="53066652" border="0" src="https://freight.cargo.site/w/1000/i/606cec7c5dc551d79f1a5b114ca12602382a76122fc97a1a24708e7204e60d1b/Full-Width02.png" /> Defining the ProblemIn analyzing common e‑commerce interactions, I discovered that online stores from Amazon to Nordstrom use a siloed, linear flow. But, this doesn't align with the way shoppers tend to behave in physical stores. There, shoppers are constantly making comparisons, picking items up, putting others back, and mulling over the details. This consideration phase was missing from the typical e‑commerce flow. How could I design a new interaction pattern to account for this behavior? <img width="1440" height="720" width_o="1440" height_o="720" data-src="https://freight.cargo.site/t/original/i/55a028b2a4e455067b996324d88d9a8ca9fd1392065539f2ecdb4060d8261f46/Column-Width01.png" data-mid="53066664" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/55a028b2a4e455067b996324d88d9a8ca9fd1392065539f2ecdb4060d8261f46/Column-Width01.png" /> <img width="1440" height="720" width_o="1440" height_o="720" data-src="https://freight.cargo.site/t/original/i/39f7bdea008cf1bec9205ae2ef8406bd3684ee6414b314934cebcd0d8b46d9a5/ColumnWidth02.png" data-mid="53066665" border="0" src="https://freight.cargo.site/w/1000/i/39f7bdea008cf1bec9205ae2ef8406bd3684ee6414b314934cebcd0d8b46d9a5/ColumnWidth02.png" /> Sketching &amp; IteratingE‑commerce interactions can be complex. When and how should the user be able to filter or sort? How many filters are appropriate? When should a user enter their size? In order to sort out these interactions and the flow between them, I sketched low-fidelity wireframes and flows to explore different strategies and work through my ideas. <img width="1680" height="876" width_o="1680" height_o="876" data-src="https://freight.cargo.site/t/original/i/f1ac1450f4167dda971bf069fa7c642c67eb833d91b4c6b7f125779fa9adaf3f/ExploringECommSketches-simplified.jpg" data-mid="52594316" border="0" src="https://freight.cargo.site/w/1000/i/f1ac1450f4167dda971bf069fa7c642c67eb833d91b4c6b7f125779fa9adaf3f/ExploringECommSketches-simplified.jpg" /> Articulating Ideas I continued to explore different interaction designs and patterns by building a few simple graybox prototypes. Because they were relatively simple and focused, I was able to explore multiple approaches and add animation that would provide vital context for a user.&nbsp; These quick studies both helped me refine my thinking about the interactions, and communicate my ideas to others. <img width="1680" height="876" width_o="1680" height_o="876" data-src="https://freight.cargo.site/t/original/i/87f67fd48a06220aedc04b3bae998716bdb6c3660b04d4309468cb68934ec81e/ExplorationECommAnimation5.gif" data-mid="52594319" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/87f67fd48a06220aedc04b3bae998716bdb6c3660b04d4309468cb68934ec81e/ExplorationECommAnimation5.gif" /> <img width="1680" height="876" width_o="1680" height_o="876" data-src="https://freight.cargo.site/t/original/i/dd577c9879b6f56c8395a0a6ee643059888f82bca1264833419562f49c3f8aa3/ExploringECommAnimation1.gif" data-mid="52594320" border="0" src="https://freight.cargo.site/w/1000/i/dd577c9879b6f56c8395a0a6ee643059888f82bca1264833419562f49c3f8aa3/ExploringECommAnimation1.gif" /> <img width="1680" height="876" width_o="1680" height_o="876" data-src="https://freight.cargo.site/t/original/i/07ad587d8188864cb675ba0aec2d544adc2e3fb6a388fbadfadcb1db463fc241/ExploringECommAnimation2.gif" data-mid="52594321" border="0" src="https://freight.cargo.site/w/1000/i/07ad587d8188864cb675ba0aec2d544adc2e3fb6a388fbadfadcb1db463fc241/ExploringECommAnimation2.gif" /> <img width="1680" height="876" width_o="1680" height_o="876" data-src="https://freight.cargo.site/t/original/i/14eae46526de991d6e8ea861ef3809581efa1c386125e05563ffbdfe803b9398/ExploringECommAnimation3.gif" data-mid="52594322" border="0" src="https://freight.cargo.site/w/1000/i/14eae46526de991d6e8ea861ef3809581efa1c386125e05563ffbdfe803b9398/ExploringECommAnimation3.gif" /> <img width="1680" height="876" width_o="1680" height_o="876" data-src="https://freight.cargo.site/t/original/i/03f7028ccc29942c5b695efc977c12e07fef2f6825999601b6960c74515b30b9/ExploringECommAnimation4.gif" data-mid="52594323" border="0" src="https://freight.cargo.site/w/1000/i/03f7028ccc29942c5b695efc977c12e07fef2f6825999601b6960c74515b30b9/ExploringECommAnimation4.gif" /> Prototyping After exploring a few concepts, I refined one into a more finished prototype that would allow a shopper to build an outfit online. With a set of stacked carousels, this prototype emulated a paper-doll, allowing a shopper to understand a set of items together. I explored two executions: one for a retailer with a complex line of offerings, and another to serve a more boutique business. Explore the prototype for youself ︎. <img width="2880" height="1502" width_o="2880" height_o="1502" data-src="https://freight.cargo.site/t/original/i/f7b0d778236a991ef3dd22da462ddbe235cd6b935cf3da9d8a7c285e30d5738a/ExploringECommPrototypes.jpg" data-mid="53067284" border="0" src="https://freight.cargo.site/w/1000/i/f7b0d778236a991ef3dd22da462ddbe235cd6b935cf3da9d8a7c285e30d5738a/ExploringECommPrototypes.jpg" /> b&nbsp; Next Project https://kolvera.com/Process-Design Mon, 21 Oct 2019 03:37:26 +0000 Katherine Olvera - UX Portfolio https://kolvera.com/Process-Design Process Design UX Design &amp; Development When I joined the handbags team at Fossil, our team was short-staffed and struggling to learn a new product lifecycle management system.The team couldn't keep pace with the work. To overcome this deficit, I strategized, designed, and built a tool to streamline our workflow, freeing designers to spend more time creating. ProblemThe Fossil team used a PLM system to communicate materials to overseas factories for a complex line of products. This system relied heavily on entering data manually. This was time-consuming and error-prone, leading to waste in the sampling process. SolutionI designed and created a tool that automated much of the data entry by linking information in a way that aligned with how the users actually thought about designing leather products.&nbsp; This tool also integrated with the existing PLM system. The tool eliminated a week of work in the typical sampling cycle and reduced manual entries by 50%. It is now used to manage all women's leathers products at Fossil: a multi-million dollar business. The products it touches, from handbags and wallets to belts and keychains, are sold around the world. The Process ResearchI interviewed users across multiple teams, including design, production, and material sourcing, who were involved in developing leather products. I aimed to understand their roles, goals, and frustrations with using the PLM system to communicate. I created user flows and charts to map how information flowed between these teams in a typical development cycle. <img width="3500" height="1825" width_o="3500" height_o="1825" data-src="https://freight.cargo.site/t/original/i/ad6b36bce8baadeb1f958e8512e07f774b2c59e8d720b63da2ec7cdec0ef746f/ProcessDesignResearch-RGB.png" data-mid="53068350" border="0" src="https://freight.cargo.site/w/1000/i/ad6b36bce8baadeb1f958e8512e07f774b2c59e8d720b63da2ec7cdec0ef746f/ProcessDesignResearch-RGB.png" /> Information ArchitectureI investigated the relationships between products and their component parts. How did the product designers make decisions? I observed that designers first selected a leather, and then correlating details, like zippers or thread. I noted these hierarchies and charted the many relationships and concept models that influenced design decision-making. <img width="1680" height="876" width_o="1680" height_o="876" data-src="https://freight.cargo.site/t/original/i/13513ad4fa8571b30ec3a3ed2e9b44899bdd089285af60758a62d1396d75aed7/ProcessDesignIA.jpg" data-mid="53068327" border="0" src="https://freight.cargo.site/w/1000/i/13513ad4fa8571b30ec3a3ed2e9b44899bdd089285af60758a62d1396d75aed7/ProcessDesignIA.jpg" /> DesignI crafted a tool to link related components together. A designer would now select a color, and the tool would supply the appropriate codes for correlating components. It would also generate search terms that could be processed by the PLM system, automating many steps in the workflow. <img width="1680" height="876" width_o="1680" height_o="876" data-src="https://freight.cargo.site/t/original/i/d30214ca11cdf5783a11b2558e277bcf6fd46d382486327a90be04f2166cc5a3/ProcessDesignDesign-BG.gif" data-mid="53068314" border="0" src="https://freight.cargo.site/w/1000/i/d30214ca11cdf5783a11b2558e277bcf6fd46d382486327a90be04f2166cc5a3/ProcessDesignDesign-BG.gif" /> Testing &amp; Buy-IN To convince users to adopt the tool, I demonstrated how it would save time, and my peers hopped on board. I asked for feedback to learn about problems they encountered as they worked, and I devised updates to fix them. After finishing this project, directors began to consult me on best practices in our process, based on my ability to understand both the intricacies of our PLM system and our users’ needs. Beyond this tool, I also standardized and outlined our workflow to streamline communication with factories based on different teams' needs. <img width="6999" height="3649" width_o="6999" height_o="3649" data-src="https://freight.cargo.site/t/original/i/d401133da1ce045e2f63e43adc594064b27b4cb1e9ae3000b69269e8d42f0dd4/ProcessDesignProcessFlow-large.jpg" data-mid="53068352" border="0" src="https://freight.cargo.site/w/1000/i/d401133da1ce045e2f63e43adc594064b27b4cb1e9ae3000b69269e8d42f0dd4/ProcessDesignProcessFlow-large.jpg" /> Next Project https://kolvera.com/Branding-Strategy Mon, 21 Oct 2019 04:04:41 +0000 Katherine Olvera - UX Portfolio https://kolvera.com/Branding-Strategy Branding Research &amp; Design Originally, I was tasked with devising standards for applying the Fossil logo to leather products. However, this project coincided with a larger re-branding effort. The scope of the project evolved, and my research and initial concepts became the basis for a new logo.ProblemThe existing logo was busy with type, icons, and rule: it seemed dated and heavy. Fossil needed a logo that could be applied consistently to a wide range of products. It also needed to reflect Fossil's aim to bring midcentury aesthetics to the modern customer.SolutionDrawing on my research, I recombined elements from Fossil's original logo and other brand icons to create a simpler, more flexible design. It could easily be applied to different products and executed in a variety of mediums, from a deboss on leather to foil on paper. All Fossil products and collateral are now aligned through consistent visual language, supported by the new logo. It has been applied systematically throughout the distribution chain. The logo appears on everything from tags and store signage to marketing campaigns and the e-commerce store. The Process Discovery &amp; ResearchI inventoried how the Fossil logo was applied to products, noting inconsistencies and the variety of execution styles. I also looked through Fossil's archives, which documented the company's thirty year history, to find patterns in design language and iconography. One consistent icon was the lock and key. <img width="1680" height="876" width_o="1680" height_o="876" data-src="https://freight.cargo.site/t/original/i/6454cf419390624ed3ee71d7f97296cf6bad3d7d58e9c2dccccb2ec2b629e5dc/BrandingStrategyResearch.jpg" data-mid="53068884" border="0" src="https://freight.cargo.site/w/1000/i/6454cf419390624ed3ee71d7f97296cf6bad3d7d58e9c2dccccb2ec2b629e5dc/BrandingStrategyResearch.jpg" /> InspirationIn my research, I discovered this 1950s Ford key. I recognized it as a quintessential icon of the midcentury. It conveyed the period's emphasis on mass production, streamlined design, and optimism about the future. This authentic midcentury artifact would inform the new logo design. <img width="1680" height="876" width_o="1680" height_o="876" data-src="https://freight.cargo.site/t/original/i/26a26fe8fe206b842238048c6e47bc9052f89139c00fe2bdb1d0e44359720e0c/BrandingStrategyInspiration.jpg" data-mid="53068892" border="0" src="https://freight.cargo.site/w/1000/i/26a26fe8fe206b842238048c6e47bc9052f89139c00fe2bdb1d0e44359720e0c/BrandingStrategyInspiration.jpg" /> IterationI sketched a series of thumbnails to explore how logo elements could be rearranged into a simpler logo. The logo needed to embody Fossil's modern vintage concept. I extracted the diamond from the original logo and made it central to my new designs, as it fit well with the midcentury aesthetic. It would also need to be versatile. I had to consider how it would execute in a variety of mediums at different scales, from print and digital marketing to application on products. <img width="1680" height="876" width_o="1680" height_o="876" data-src="https://freight.cargo.site/t/original/i/d996507f517edf9cc5d740d55ffc7f1e99ad5de1db1f91f2f6d4c785ee62324d/BrandingStrategyIteration.jpg" data-mid="53068940" border="0" src="https://freight.cargo.site/w/1000/i/d996507f517edf9cc5d740d55ffc7f1e99ad5de1db1f91f2f6d4c785ee62324d/BrandingStrategyIteration.jpg" /> Application I presented a few design directions to the creative director. One concept was selected to be refined by the graphics team into the current branding system. After the new logo was established, my team would be responsible for exploring ways to incorporate and apply the logo to handbag designs, both explicitly, through direct application, and implicitly, through diamond motifs. <img width="1680" height="876" width_o="1680" height_o="876" data-src="https://freight.cargo.site/t/original/i/38f319edba6183385abfbcac15ad3b647bb001a57b2a09ecf3a0c44374000ae4/BrandingStategyApplication.jpg" data-mid="53068943" border="0" src="https://freight.cargo.site/w/1000/i/38f319edba6183385abfbcac15ad3b647bb001a57b2a09ecf3a0c44374000ae4/BrandingStategyApplication.jpg" /> Next Project https://kolvera.com/Handbag-Design Mon, 21 Oct 2019 04:17:44 +0000 Katherine Olvera - UX Portfolio https://kolvera.com/Handbag-Design It’s In The Bag Handbag Design as UX Design When I first transitioned from designing physical products to digital ones, many people noted that it seemed like a major career shift. But, as I have learned, many of the practices and processes that I used in my career designing handbags easily translated directly into user experience design. The only difference really is the medium. The Process ResearchAny handbag design begins with defining the target customer (AKA the user) and determining her needs. Is this a bag for a new mother or a college student? Is she more concerned with security or accessibility? Does she need storage or something compact? We would then create boards to depict the customer (AKA personas) and write a brief to focus on features that customer might need, as well as constraints and budget targets. <img width="1680" height="876" width_o="1680" height_o="876" data-src="https://freight.cargo.site/t/original/i/99e61493063959e075eb8553aa12be33b9786a623a2a75de382ac25f39b3d86a/HandbagUXResearch.jpg" data-mid="53069200" border="0" src="https://freight.cargo.site/w/1000/i/99e61493063959e075eb8553aa12be33b9786a623a2a75de382ac25f39b3d86a/HandbagUXResearch.jpg" /> Sketching &amp; IterationAfter the initial research, we would sketch forms that would accommodate our customer and iterate on it, exploring various handles, pockets, stitching patterns, that would prioritize different features of the bag. In this case, our customer was interested in ways to customize or personalize the bag, so we focused on modular elements. <img width="1680" height="876" width_o="1680" height_o="876" data-src="https://freight.cargo.site/t/original/i/e8795a842fb56ede609f73f3a470c157920c4b05b450c94d786de23e2518efac/HandbagUXSketches.jpg" data-mid="53069211" border="0" src="https://freight.cargo.site/w/1000/i/e8795a842fb56ede609f73f3a470c157920c4b05b450c94d786de23e2518efac/HandbagUXSketches.jpg" /> PrototypingAfter settling on a general direction, we would create a first prototype, typically in paper or a heavy white fabric called salpa. Similar to wireframes, the purpose of this prototype was to get a general sense of function and proportion and ensure that all the pieces were in the right places. It was a tool for a designer to begin to visualize the form stripped of its details. <img width="1680" height="876" width_o="1680" height_o="876" data-src="https://freight.cargo.site/t/original/i/2dc640ec5d2a35424aac9dc7ce200a9a3bf31c17912f1b1c1e3f3f0cdf97eb07/HandbagUXProto.jpg" data-mid="53069217" border="0" src="https://freight.cargo.site/w/1000/i/2dc640ec5d2a35424aac9dc7ce200a9a3bf31c17912f1b1c1e3f3f0cdf97eb07/HandbagUXProto.jpg" /> Sampling &amp; testing After making adjustments to the proto, we would send out for a sample. Like a clickable prototype, this would be functional, with pockets, lining, working hardware, and straps. However, it was still a work in progress. This sample would be given to a woman to wear-test for a couple weeks. We would ask about how the bag worked for her: Were the straps long enough? Were there enough pockets? Were the pockets big enough? How did the zippers work? We wanted to make sure that the bag fit her lifestyle before sending it into production. <img width="1680" height="876" width_o="1680" height_o="876" data-src="https://freight.cargo.site/t/original/i/c827408ea56697d234841dca3a006b88284359e5006e46fbfe6bfef129bb5512/HandbagUXSample.jpg" data-mid="53069322" border="0" src="https://freight.cargo.site/w/1000/i/c827408ea56697d234841dca3a006b88284359e5006e46fbfe6bfef129bb5512/HandbagUXSample.jpg" /> Production Then, we would refine. We would create variations and select details to create a system of related products to appeal to a range of customers: one for the woman who enjoys some whimsy, another for the woman who wants an easy, inexpensive fabric bag, another for the woman who likes a high-quality straightforward bag. Ultimately, we aimed to make a cohesive line of products that balanced these user needs with business goals. <img width="1680" height="876" width_o="1680" height_o="876" data-src="https://freight.cargo.site/t/original/i/84bf63e75f8362d56e633ea74406ae858b2b219f20a4fbbe4f1998d1300b7d0c/HandbagUXGroup.jpg" data-mid="53069328" border="0" src="https://freight.cargo.site/w/1000/i/84bf63e75f8362d56e633ea74406ae858b2b219f20a4fbbe4f1998d1300b7d0c/HandbagUXGroup.jpg" /> View Fashion Portfolio