Designer of the Month: Bree Walter of H&R Block (April)

Bree Walter Designer of the Month at UXPin
Bree Walter of H&R Block is this month’s pick!

Round 2 of our new blog series! Every month we highlight a UXPin user. Learn more about why they work in design, what inspires them, and how UXPin makes their lives easier!

This month, we’re thrilled to introduce to you the amazing Bree Walter, H&R Block’s Senior User Experience (UX) Designer! Let’s jump right in.

Bree, it’s a pleasure. For starters, what’s your role at H&R Block?

To provide some quick background, we have a UX team that focuses on our client-centered applications and experience, such as our “DIY” tool to file your own taxes. And we have a UX team focused on our “Assisted” tax professional applications and the experience facilitated in our 10,000+ offices. I’m a Senior UX Designer on the latter team.

A unique aspect of my role is that I work on applications with dual user experiences. There’s a consideration for how tax professionals use the system and also how clients follow along on the screen while the tax professional completes their taxes. Previously, there wasn’t a dedicated UX representation for our tax professional applications. The focus was primarily on our client facing products. It’s been an exciting opportunity to pioneer this initiative to improve both experiences.

What’s the most memorable project you’ve worked on?

In my short time at Block, I’ve particularly enjoyed working on our in-office “point of sale” application which staff use in our tax offices to collect payments. This was a classic case of an experience that hadn’t been renovated for decades and our team was given free reign with it from a UX perspective. We turned it on its axis technologically, began utilizing more intuitive, modern design patterns and integrated immense workflow enhancements.

Given this was the largest redesign in the application’s history, we knew there’d be significant change management involved. We drastically adjusted our training program and help content. Validation testing and measurement has shown some amazing figures so far and I’m excited to see the long-term benefits this redesign will bring to our tax office staff and clients.

This project was exciting because of the freedom presented to me to press the boundaries of “how it’s always been done”. Also, it was the first IT department project that integrated an Agile UX process with our development and product teams. We worked through trial and error scenarios to learn what’d work best and how to most effectively embed UX practices in the design and development processes. The team has been extremely supportive and, as a result, are driving better results for our users.

Sounds amazing! Moving along, what’s your design process like?

Here’s how I summarize my process – relate, ideate, create, validate. It’s essentially the design thinking process, but since it rhymes, those who aren’t UX designers remember it easier!

Additionally, my department fully embraced an Agile inspired “shift left” mentality, making the design process more effective and efficient. We engage key stakeholders, source user feedback, embrace team feedback, and test our designs and development as early as possible. This reduces development time and cost, which would otherwise be much higher if we waited until later.

Describe the relationship between designers and developers at your company.

Here at Block, we’re consciously creating a transparent and collaborative relationship between both teams. We also establish strong relationships with other key partners in the development process, such as QA and Product. We stay very much in-sync throughout the whole process, ensuring we’re always marching in the same direction.

The narrative across the industry has portrayed the developer and designer relationship as being very “us and them”. But if you boil it down, I believe success all comes down to common decency. If every team member values each other and respects the unique insight each person brings, your team dynamic will be much more positive.

I’ll admit that some developers have suggested ideas I’ve disagreed with, but in these instances, it’s the delivery of your response and dialog with them that matter most. Thank that developer for their input, rationally explain why this may not be the best approach, and back it up with facts and findings from user insights, and you’ll create a safe space to find a common solution. This encourages them to keep providing their valuable input, and your relationship and the climate of the team will be much more fruitful!

What’s something you’ve done recently that you’re proud of (personally or professionally)?


UX Collective had a great point in their 2019 State of UX report. Instead of slaving away on unsolicited redesigns or improving the double-diamond model, do the world a greater service and guide young professionals or work with non-profits. I couldn’t agree more! So many designers focus on adding the coolest, sleekest case study to their portfolio, when in reality taking on these others does much more for your professional and personal development. Employers like seeing that you’re well-rounded, involved in the UX community, and spend your time doing good instead of solely being focused on bolstering up your portfolio.

That’s why I was a board member for the UXPA KC chapter last year and coordinated a mentorship program to match students and young professionals in the area with veteran UXers. I also mentor students from my alma mater and go back to speak on campus. Amazing mentors guided me in my early career, and I’m passionate about passing on that support to the next generation of designers. Additionally, I provide volunteer UX services for a few non-profit causes. This allows me to add work to my portfolio while also gaining a larger network of resources that impact communities and causes that I care about.

We agree, that’s so important! Speaking of what’s important: what’s your life philosophy?

One of my mentees recently said,“the graveyard is the richest place on Earth”. I love mentoring because I always end up learning as well! This quote suggests the grave is “full of hopes and dreams that were never fulfilled, inventions never created, books never written, and cures never discovered, all because someone was too afraid to take that first step”.

This philosophy can be applied to many situations, whether it’s being too afraid to speak up or ask questions in a meeting with stakeholders, reaching out to someone to mentor you, or following your dream to start your own business. If we don’t take the leap, speak up, reach out, or dive into uncharted territory, we’re left wondering about the “what ifs”. And this isn’t just a disservice to ourselves, but to all those that could’ve also been positively impacted by those decisions.

Wow, incredibly deep. Switching gears: What kind of projects do you use UXPin for?

UXPin is so robust in what it can provide! I certainly use it for product design, whether that’s responsive websites or applications and software programs. But I also utilize UXPin for less conventional uses too, like design collateral for events, visual infographics for teammates, training/onboarding documentation for new resources… heck I even designed my resume with it! The options are endless. Since it has so many built-in libraries and design properties, and a very elegant way of previewing and sharing with others, it makes it a very multi-purpose tool!

Give us your favorite tip to make design collaboration easier!

This may not be a “tip” to make collaboration easier so much as it’s a fundamental necessity to create effective collaboration.

I strongly support giving all team members a seat at the table. There’s a saying that if you want to go fast, go alone; if you want to go far, go together. Before effective collaboration can happen, everyone must feel they’re an important part of the team. Everyone brings their own individual strengths to a project. Regardless of how long you’ve been around or your role, everyone must be an active part in team collaboration.

In practice, this means that I incorporate representation from all roles and disciplines in research readouts, ideation sessions, design reviews, development reviews, user testing sessions, etc. In doing this, everyone plays an active role in creating the best UX and the team feels more driven and empowered.

And now… our favorite question: What’s your favorite UXPin feature?

I’m supposed to choose just one?!?! No way! I’ll give you top 5! The real-time collaboration ability in the tool is huge! Not long ago, my teammates and I sent Illustrator and Photoshop files back and forth. I give this UXPin feature two thumbs up!

The countless libraries are also very helpful. The fact that you don’t have to manually import them and that there are many elements, like form inputs, that already have working functionality speeds up my design process.

Design system integration is also immensely powerful! 70%+ of companies either currently have a design system or are building one (according to UXPin’s industry report… don’t even get me started on how much I love UXPin’s amazing educational content in addition to their tool!), so having this feature built in creates a seamless experience for our teams.

Several latest features make me consider UXPin the true leader in the industry. Conditional logic (variables) makes user testing way more realistic and lets me convey functionality effectively. Additionally, the accessibility feature to view designs with various color-blindness lenses takes UXPin from “sleek” to truly inclusive and best-in-class!

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/05/variables.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Wow – thank you! One more: fill in the blank: “It’s my dream to design a …”

Ted Talk presentation, a children’s book, a music festival, a molecular gastronomy restaurant, a UX conference, a river-front park, and a young professional’s podcast, just to name a few! My dreams involve merging my analytical and creative sides in ways that go beyond digital interfaces to impact a multitude of diverse human experiences.

Well… what are you waiting for? Check our Bree’s top 5 features yourself:

Join the world's best designers who use UXPin.

Sign up for a free trial.

Want to be featured as the next designer of the month? Know a designer who deserves extra recognition? Email us at marketing@uxpin.com.

Designer of the Month: Robert Smith UX Freelancer (March) | UXPin

UXPin's designer of the Month Robert Smith
Designer of the month: Robert Smith!

Welcome to a brand new series on UXPin’s Studio blog! It’s pretty self explanatory, but each month we’ll highlight a designer who uses UXPin as part of their design workflow. So you can learn more about why they work in design, what inspires their creations, and how they use UXPin.

First one up? Meet Robert Smith. Robert has been a strong advocate for UXPin for some time, so it only felt natural that he’d be our inaugural designer of the month! Plus he shares a name with one of the greatest rock singers on earth. So it’s a win-win, really.

Tell us about yourself, Robert.

I am a freelance UX designer based in London, so I work with multiple clients on multiple projects. Over the past few years i’ve worked with everyone from early-stage startups to FTSE100 organisations.

I am a freelance UX designer based in London, so I work with multiple clients on multiple projects. Currently I work with a creative agency called Karmarama, who are part of Accenture Interactive.

How did you get into design?

After dropping out of my first year of a Business degree, I transferred to a Creative Design course where I was introduced to Photoshop and Dreamweaver. Another year later I quit the course and moved to London. The rest is history!

Nice! Describe your design process.

No two projects are ever the same, so I try and keep my approach agile and flexible to fit the needs of the client and the project. Broadly speaking, I always like to understand things in as much detail as I can upfront so I feel really educated about the problem at hand before committing to any design work. I always like to ask “Why?” before “How?” and try to challenge assumptions as much as possible with data throughout the design process.

What do you like to do when you’re not at work?

Being a freelancer can get stressful, especially in a big city like London, so I try to take care of my physical and mental health first. Normally this means hitting the gym as much as possible, meditating and of course, binge watching a Netflix series or two. Beyond that my time is split between shooting videos for my YouTube channel and trying to have a social life!

https://www.youtube.com/watch?v=U7ho1H3OXUs
Check out Robert’s Intro to UXPin video!

What’s your favorite place on earth?

Sitting by the river in Berlin drinking a cold beer.

Sounds lovely. What kind of music do you enjoy listening to while you’re working?

I like anything with a lot of energy, so for me it’s often Hip-Hop or Heavy Metal!

Right on. What’s your biggest inspiration for your designs?

I don’t think there’s a single source of inspiration. I’ve learned a lot from different people over the years and I always try to keep things they have told me in the forefront of my mind when I am designing something.

Ok, now tell us a design-related joke!

I don’t know if it’s a joke, but I had a client once who insisted that I made his website on a Mac rather than a PC. That made me laugh at the time.

Ha! That’s pretty funny. What kind of projects do you use UXPin for?

Mostly for websites and web apps.

What’s your favorite UXPin feature?

I love the rich interactions you can create using Interactions and States. For me this is what sets UXPin apart from its competitors and the whole ‘clickable mockup’ thing.

UXPin clickable mockups
UXPin States

Check these features out for yourself:

Join the world's best designers who use UXPin.

Sign up for a free trial.

Want to be featured as the next designer of the month? Know a designer who deserves extra recognition? Email us at marketing@uxpin.com!

Build Prototypes That Talk to Your Products | UXPin

We truly live in the future. One in which we can power our home lights, sound systems or even security with our voices or from a phone app while miles away. Much like the one predicted in the cult classic, Back to the Future:  

You’re now able to build such prototypes in UXPin! Until now, it was impossible to do this using prototyping tools or without coding.  What is this sorcery?! Or as Doc Brown would say: Jumpin’ Gigawatts!

UXPin’s latest feature, API request, allows you to create app prototypes to “talk” with your products. For e.g. as a car manufacturing company, you could build a prototype that communicates with the car. You can even save data from a prototype to a spreadsheet! Or you’ll be able to simulate changing the colors of your smart lights via a prototype created in UXPin. Just like so:

API request in UXPin
Changing the colors of your smart lights via a prototype created in UXPin

Technically speaking, it allows you to send HTTP requests to an external API. This is now part of Interactions as a new type of action called API request.

Learn how to use this feature here.

Welcome to the future.

Join the world's best designers who use UXPin.

Sign up for a free trial.

Ensure Mobile Prototypes Look and Perform as Intended – meet the Mirror app

UXPin Mirror - preview prototypes on mobile

Designing web and mobile experiences is no easy feat. It can be tough to visualize complex digital experiences you’re creating with just artboards. You should save your imagination for creating your designs, not waste it racking your brain on how they will interact in real life.

That’s why we created UXPin’s new Mirror app.

What is UXPin Mirror app?

It makes previewing prototypes on real devices (both iOs and Android) fast and easy. That too in real time. All it takes is one click to ensure mobile prototypes look and perform the way you intended.

This feature allows for a fast review of created prototypes by seeing them immediately on the device they’re intended for. The Mirror app must be used in conjunction with UXPin’s Desktop App or Browser.

As you make changes in the prototype, the preview on your device updates automatically. So if you switch pages, you’ll see that real time in the preview. Also, there is no need to connect via USB or use Wi-Fi network, just scan the QR code in the editor to view your prototype!

Download UXPin Mirror App.

The First Built-in Accessibility Features in a Design Tool are Here

Accessibility Checker

There’s no easy way to say this: Design tools have completely failed to deliver sufficient ways to help create accessible experiences.

All of these have existed as plugins or external programs. Until now.

Introducing the very first built-in Contrast Analyzer & Color Blindness Simulator in a design tool. According to WHO, over 1.3 billion people live with some form of vision impairment. Of that, 217 million with moderate to severe vision impairment!

Contrast Analyzer

Think about it—can everyone perceive your digital creations? Here’s where taking size and contrast of the elements of the user interface really counts. That’s exactly what our Contrast Analyzer was built for. Now, the WCAG contrast standard is used in our built-in, automatic linter. Right inside the UXPin design editor, you can specify whether to comply with either AA and AAA levels. It will automatically inform you when the design’s text can be easily read.

Color Blindness Simulator

And then there’s our new Color Blindness Simulator. Did you know that 4.5% of the world’s population has one of the types of color blindness? Moreover, a whopping 8% of the male population experiences a form of it! This huge number is too often overlooked by designers. Alas, the Color Blindness Simulator shows your design as perceived by someone with one of eight types of color blindness!

UXPin can simulate:

  • Four kinds of red–green color blindness
  • Two kinds of blue–yellow color blindness
  • Two kinds of complete color blindness

Hopefully, with this simulator at our fingertips in UXPin, we’ll all always make sure that people affected by color blindness can use and enjoy our digital creations.

Say goodbye to external accessibility checker tools and jumping between programs. Learn more about in in our CEO’s Medium article and check out the tutorial on how to use both.

No one should feel excluded from digital experiences by means of their visual, motor, auditory, speech or cognitive disabilities. Taking care of accessibility is an ethical imperative for designers. UXPin just took the first step. Let’s get to it.

Join the world's best designers who use UXPin.

Sign up for a free trial.

Expressions: Harness The Power of JavaScript in your Prototypes

Expressions and Java script with UXPin

Just when you thought your prototypes couldn’t gain more superpowers, we added another to your prototyping utility belt: Expressions. Bring the power of JavaScript functions to your designs.

Now you can power up your prototype in a programmatic way. Gone are the days of design tools not having math functions! We just leveled up with Expressions. It makes JavaScript directly applicable to your prototypes. This is the most powerful feature UXPin has released to date, and it nicely complements ournew Variables and Conditional Interactions features. It also brings us one step closer to our mission to enable the best user experiences by merging design and engineering into one world of better, faster product development.

Expressions

Expressions is basically “code language”. You can now use JavaScript functions to perform additional operations on variables such as math, dates, text, etc. to build even more. Want to prototype a design with a computational component? Now you can! Manipulate variables, perform math and regular expressions tests, and use the results to update variables or trigger state changes and transitions— all right inside the prototype.

Think of Expressions as being similar to the functions in Google Sheets and Excel. They can also make a prototype “context aware”. Basically, a prototype can change based on its operating system, or size of the browser window.

Expressions allow you to get even closer to real apps, especially when user testing. You can change things dynamically in an earlier stage of your prototype. Say goodbye to linking static artboards forever.

The number of things you can create with Expressions is infinite. But here are some specific examples:

  • Perform some math on a diagram’s data
  • Create a shopping cart for an e-commerce website
  • Build an ROI calculator for your business
  • Create a rap name generator (as our Account Manager, Natalie, suggested)
  • Make a scheduling tool to book clients
  • Show error or success messages
  • Validate email addresses

Not part of the UXPin family yet?

Join the world's best designers who use UXPin.

Sign up for a free trial.

Introducing Variables and Conditional Interactions for More Interactive Prototyping

Your prototypes have officially gained superpowers. Now you can store or pass information using variables and add conditional interactions! Prototyping just got a whole lot more interactive. Get much closer to real, coded apps with these new features. They’ll be especially handy for user testing.

Fall 2018 has been a crazy time at UXPin for all the right reasons. We have many cool features on their way—stay tuned for Expressions, States and Data. But we digress… today, we’re excited to show you not one, but two new features closely tied together!

What are they?

Variables

Variables allow different elements to “communicate” with each other even if spread across pages. This data persists from page to page as you click through the prototype. Meaning you can set a variable’s value on one page and then take action based on that value on a completely different page.

With variables, you’ll be able to build the relationships between elements in a prototype. To do that, you can simply set the same variable for the elements you want to pair together. For example, to collect user data in an input and then use “username” in a message in a different part of the prototype.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2018/08/variables-video.mp4″ autoplay=”true” controls=”false” loop=”true” muted=”true”]

 

Conditional Interactions

Conditional interactions give your prototypes a layer of logic—this is a very powerful feature that is characteristic to only a handful of prototyping tools. We’re very excited to be added to that list. With conditional interactions, you can set rules that make the interaction happen only if those rules are met.

When to use these features

  • To collect some information, like a name, and pass it to another page to display it as part of a greeting message
  • Easily store user-entered data and then reuse it across elements and pages in your prototype
  • To tailor prototype content and behavior to different scenarios for user testing

Why you want them in your life right now

  • Make prototypes feel like the real deal, operating on data or actions by users (especially when user testing)
  • Your prototypes will be more dynamic and less generic
  • Make it much easier to showcase (to developers, for example) how the solution should work in real life
  • Create more flexible prototypes and save a lot of time on creation, because you don’t have to re-do components to fit different use cases

How can you start using them right away?

  • All this is already live in your account (both web and desktop app) if you use UXPin.
  • Don’t use UXPin yet but want to try your hand at variables and conditional interactions?

Join the world's best designers who use UXPin.

Sign up for a free trial.

The Most Accurate Specs for Sketch on the Market

You asked, we listened. UXPin just unleashed the mother of all Sketch plugins. Now you can get the most accurate specs and code snippets available on the market for all of your Sketch designs. And it works faster than ever.

So, what’s the main reason for this update? Designers often work in Sketch and upload their designs to UXPin to get accurate specs for development and/or gather comments. Historically, our integration has had issues with speed and prototypes being a true match when switched to our platform. We needed to fix this STAT. So we did!

With UXPin’s new Sketch plugin, you can:

  • Get specs and code snippets for any element, even deeply nested
  • Import your Sketch files with all layers preserved for spec and collaboration
  • Generate assets for different platforms (iOS, Android, Web)
  • Export designs in one click between Sketch and UXPin

Full Spec Mode locked and loaded

Now when you create a prototype in Sketch and export it to UXPin for spec/comments, you don’t have to stitch the prototype again. We’ll import this information and link everything together.

If you’re using the UXPin Design System and sync symbols to UXPin and document them, we’ll present this information (documentation from Design System) on Spec as well. We’re also maintaining all the overrides for symbols from Sketch files. Gone are the days of time-consuming redlining of mockups. A new era of smoother collaboration between designer and developer has begun.

Spec mode for Sketch files

100% accuracy when you import from Sketch → UXPin

Yup, you read that right. Keep in mind that this is only single-directional for the time being. You can’t send these imports back to Sketch while maintaining that accuracy. We’re working on the ability to edit text on your Sketch imported designs in UXPin, so stay tuned. In the meantime, you can either:

  • Complete your designs in Sketch, then bring them into UXPin for prototyping and collaboration
  • Design completely in UXPin

100% accuracy when you import from Sketch to UXPin

UXPin users may have noticed some recent releases in the tool. We added more high fidelity design capabilities and have gotten great feedback about our new pen/path tool. You can do almost everything in UXPin that you can do in Sketch (except for masking, but we’ll add that too!). The biggest reason for some of the disconnect is that Sketch is vector-based, and UXPin is code-based.

We chose this path because there are many benefits of code-based design for both designers and developers, including:

  • The most realistic fidelity
  • The same constraints for both parties
  • Interactive components instead of artboards
  • The most powerful interactions
  • The strongest collaboration between design and code

Asset export for different platforms

Now you can generate and export assets from Sketch designs in appropriate sizes for all your iOS, Android and Web projects.This has been a frustration for our users, but no longer! As for most of our features, keep in mind that you need to be connected to the Internet to export things out of UXPin.

New export feature for various file types and platforms

How can you start using this right away?

  • Already have the Sketch plugin? Simply update it
  • Don’t use the Sketch plugin yet? Download it in your UXPin account (available in the ‘integrations’ panel and linked from the main dashboard when users create a new project)
  • Don’t have either? It’s time to…

Join the world's best designers who use UXPin.

Sign up for a free trial.