On Jan 10, 2019, I attended an with the NYC Lean/Kanban meetup, which was partnered with another meetup, to discuss Kanban and extreme programming. It was a night of discussing user story optimizations and testing.
Last year, I didn’t make any posts really even though I was quite busy. This year, I don’t want to make that mistake, so I will post updates of what I’ve been up to as I go.
On Jan 10, 2019, I went to the NYC Lean/Kanban Meetup for a talk on “Kanban + XP” (with pizza). We learned about Extreme Programming, or XP, which is now called pair programming. View photos below (but no photos of pizza).
The speaker discussed how to write better user stories, and specifically talked about “story splitting” or where to split a single story into two. The speaker explained that sometimes stories are too complicated and it’s not clear what is being built, why, when to know when it’s done or how to test that it’s correct. Splitting a story into smaller pieces helps keeps requirements manageable. He said to watch for the “and”; this is often a good place to split.
He also discussed how well-written user stories can significantly aid testing, and he gave some examples of tools that basically turn a user story into test criteria.
I also learned that Lean Kit is a good tool for visualizing Kanban, although I’ve probably learned this in other events.
As always, it was informative and I look forward to the next event.
I evaluated a guest and event management platform using personas, a competitive analysis, and a heuristic evaluation.
Summary
Over the course of several weeks, I completed a UX audit of a guest management platform including personas, competitive evaluation, and heuristic evaluation. The research revealed an internal user base, many usability issues, and a number of competitive features to consider for future redesigns.
Note: DOOR3 had their own UX/presentation templates, which I followed for each of these deliverables.
I. Personas
Personas are used by design teams to create representations of end-users that can help ground the design team in the realistic capabilities and expectations of users. I conducted interviews with the client, to learn more about their users and develop personas.
Introduction
The template for DOOR3 organized personas by the following:
Characteristics: What do we know about them?
Goals:What are they trying to achieve by using our product or service
Questions: What are some of the common questions they have while using our product?
Personas were then separated into Internal Actors and External Actors.
Client Interviews
In order to answer these questions, I set up an interview with one of their lead client services managers and a product manager. I also read job descriptions for some of clients they worked with, such as an event manager or director of development. Using this information, I created six personas, which the client reviewed and validated.
“Internal actors” are primary users.
“External actors” are secondary users.
(Note: These are replicated originals.)
3 Key Learnings
I learned three key pieces of information that affected the user experience:
Roles & Permissions Restricted Functionality: User roles and permissions was a core aspect of the user experience. Many functions required could only be accessed if permission was granted by admins.
Internal Core User Group: Most end users were internal members of the client services team; many did not have admin access. Only a small minority of users were actual customers. Of those, only a rare few had accessed the site independently. There were no plans to add user registration so that new customers could sign up on their own.
Extensive Training Required: I learned that the platform required a significant amount of training before users could became sufficiently productive. The reasons for this became clear during the heuristic evaluation.
II. Competitive Evaluation
The competitive evaluation or analysis is a common stage in product design. I identified at least 20 competitors and related industries, to gain knowledge of industry conventions and identify potentially useful features.
3 Tiers of Competition
To locate competitors, I reviewed Capterra and Software Suggest, and included obvious choices such as Eventbrite and Splashthat. I included a few I’d learned of during the interviews. Competitors were organized into 3 tiers of competition: direct, secondary, tertiary.
Planning Pod, a direct competitor, has a robust set of features focused on event and guest management.
Secondary Competitors
Offered the same functionality but specialized in specific types of events, like weddings or travel. I identified 2 and evaluated 1: TripIt.
TripIt specializes in helping their users keep track of travel itinerary. The client’s owner said he was a user of TripIt.
Tertiary competitors
Represented tools or industries that the users encountered frequently as a part of their work, such as airline websites or industry news. I identified 7 options and evaluated 4: SendGrid, BeeFree, Flight Stats, BizBash. These services specialized in only certain features and I wanted to review the functionality they did well.
BeeFree (BEE) has services related to email marketing. I reviewed this tool because it was mentioned by the client. I was impressed by the cute animations and whimsical email character throughout the site.
4 Categories of Findings
Findings were organized into 4 categories, based on functionality or features users would be likely to find important. Examples are below:
Competitive Overall Features — integrations with third-party apps and services, (e.g., MailChimp, GoldStar, Zapier, etc); branded user profiles
Platform-Specific Features — ability to create and share a favorites list or vision board; easy access to help or reference guide
Design and Information Architecture — high-contrast between foreground and background colors; strong global and sub-task navigation
Additional Event Capabilities — real-time RFID event tracking; ability to preview and export name badges
III. Heuristic Evaluation
The bulk of my time was spent on the heuristic evaluation. In a heuristic evaluation, a UX expert uses an established guideline to identify potential usability issues.
A large number of issues were revealed during the heuristic evaluation. While many were not critical, the cumulative amount was a concern.
I identified over 70 usability issues, from their main platform as well as their public website. For each usability issue, I included a suggested recommendation on how to fix it. I also included an appendix with additional UX references on typography, accessibility, and navigation.
Many of the main issues had to do with inconsistent use of UI elements, navigation, or labels, as well as accessibility issues like low contrast. There were also technical issues, cryptic error messages, and confusing workflows.
Presentation of Findings
I presented the evaluation so that the most important findings came first, then organized the rest of the findings by section such as groups or account tools.
Since their users were internal, I focused on the connection between usability issues and productivity — that is, a interface with a shorter learning curve would save money in training and overhead costs.
During my presentation to the client, they revealed that they were aware of many of the usability and design issues I identified, but they had been backlogged in favor of “hot fixes” due to many issues in the code.
Outcome: Prioritization
The DOOR3 team worked with the client to help identify all the issues with the platform — front-end, back-end, design, future features. The issues were then prioritized, so that they could be put into a backlog and managed over time.
The client continued working with DOOR3 on engineering updates and some design updates.
Thanks for visiting! Feel free to read my latest blog post, or if you came from my portfolio head back there.
An in-depth look into an e-commerce update for an electronics retailer. The update focused on improving the international shopping experience by clarifying shipping information.
Summary
By conducting UX research on competitors and examining the shopping journey, I made a number of recommended changes to improve the user experience for international customers.
Adorama regularly shipped internationally, but many international customers were unhappy when they received their items.
The short answer is the site was not providing enough information about the fees associated with international shipping, leading to unhappy and expensive surprises.
The business owners had only requested a change to the checkout page, which they felt would solve the problem. However, in order to provide the best user experience, I explored the shopping journey, from PDP to checkout, to find out where improvements could be made.
1. Research & Findings
I researched at least 30 websites to find out how other companies handled international and domestic shipping. I discovered that Adorama was solving a unique problem.
Many online shopping sites do not offer international shipping, even to Canada. Of those that do, the vast majority provide a localized shopping experience, where product prices are displayed in the local currency and shipping destinations are restricted to a single country.
I also discovered that many companies will also not allow customers to associate a US billing address with a Canadian shipping address, or vice-versa. They must both be Canadian (or American).
Shipping and Localization Examples
Sephora, Overstock, Nordstrom, B&H, JCPenny
Sephora offers Canadians a localized shopping experience.
Overstock makes their Canadian localization page very obvious.
Nordstrom homepage features a link to shipping details.
Competitor B&H clearly explains the differences in international shipping fees.
JC Penney does a good job explaining the choices between international shipping options.
List of E-commerce sites reviewed:
OfficeDepot, IKEA, Sephora, Target, Overstock, REI, Williams Sonoma, Michaels, Sears, HomeGoods (doesn’t ship), Shop.com, QVC, Macys, Nordstrom, Zappos, JCrew, JC Penny, GameStop, ebay, NewEgg, BestBuy, Walmart, Cars.com (no CAN), plus competitors (Abe’s of Maine, Keh, B&H, RitzCamera, MPB, Samys, and BuyDig).
Conclusion
Adorama offered a unique, non-localized, multi-currency, and cross-country international shopping experience. Given the complexity of the problem, I felt a more comprehensive solution was more appropriate.
2. Design Patterns
Although I was solving a unique problem, I did uncover a few patterns that could be used on Adorama’s website:
A. Supportive Help Pages
For most sites, the best place to look for shipping information was in the help pages, but Adorama’s help pages did not include all information about international shipping.
In fact, while most international customers would only be able to select FedEx International Shipping, the help pages did not include any information about this shipping method.
No FedEx shipping information on Adorama’s help pages.
B. Easy to Access Shipping Information
Competitors included shipping information well before checkout. For instance, Nordstrom advertises its shipping information in the header on the homepage.
Nordstrom homepage features a link to shipping details in the header.
C. Provide Clear & Obvious International Shipping Information
For some websites, the international shipping rates were available when viewing the cart. JC Penney (pictured), Nordstrom and Adorama competitor, B&H (pictured), were good at this.
JC Penney does a good job explaining the choices between international shipping options.B&H clearly explains the differences in international shipping fees.
3. Recommendations for User Workflow and Wireframes
After all the research and collecting design patterns, I started clarifying the user workflow and the wireframes, focusing on international shoppers. The workflow would flow in the following order:
Help Pages
First the help pages, accessible via the footer, would need to be updated to include new language about FedEx International Shipping. This task was sent to the business owners to complete and finalize.
User scrolls to bottom of home page to footer for shipping information.
User locates link to “International Shipping” information.
FAQs on International shipping to be updated, to include better content on shipping fees.
Product Pages (Wireframes presented)
The next place customers would learn about shipping is on the product pages. The recommended product page features improved language and tooltips, as well as an updated shipping information section.
User locates area where shipping fees can be estimated.
In the empty state of the estimation tool, the user enters shipping details, country and postal code – i.e., Canada.
Results for the shipping estimation tool provide cost estimates for shipping, based on destination. Canada shown here.
Tooltips provide additional detail information about each shipping method.
User adds product to their cart.
Cart and Checkout (Screenshots presented)
The final place for customers to learn about shipping fees. The recommended changes for the cart and checkout pages would include clarified shipping information, as well as an updated tooltip.
This cart page is estimating shipping costs for a Canadian postal code.
The checkout page shows shipping fees for a Canadian address.
UI Development & Next Steps
As a dual UX designer and UI developer, it was up to me to begin the implementation of changes to the cart and checkout pages.
As of April 2018, only changes to the cart and checkout pages have been implemented. Additional development work will be created in May, or possibly June, for the product page modals.
Thanks for visiting! Feel free to read my latest blog post, or if you came from my portfolio head back there.
I hope this short, 2:36 video is just the start of a more public conversation about hiring practices within the UX community. I hope it helps to define UX titles and terms, and I hope it helps UX teams break past unspoken practices in team dynamics and hiring. A video like this is a long time coming and covers one aspect of a topic I have been thinking about for the past few years.
The UX Unicorn Myth (Jakob Nielsen)
Summary: UX constitutes many different specialties such as researcher, interaction designer, and Information architect. Forcing one person to do it all is a prescription for mediocrity.
A few weeks ago, I attended a few screenings at FIAF, the French Institute-Alliance Francaise. I go to many of their events and I was really excited to attend this one because I love animation. I have been watching French films for years, and I find them refreshingly diverse and smart.
The weekend was a collection of film screenings, including feature-length animations and shorts, as well as talks, an AR gallery, a VR gallery, events for kids, and an opening night party. And the event planners at FIAF ended up adding additional screenings and events.
When I heard about the weekend event, I wrote down a whole list of films I wanted to see. Unfortunately, I only ended up going to a presentation of 3-D short films, followed by a short talk, a feature-length animation, another talk, and I viewed the AR gallery. I also got a free poster.
My initial list of films included: Miniscule, The Red Turtle plus a talk, a few 3-D short films, Last Man, Renaissance, Day of the Crows, more short films, and probably another talk. I ended up only seeing Day of the Crows, as well as the 3-D films I mentioned above.
It may be possible to see some of these films above, but Day of the Crows did not seem to be currently available in the US, which is why I wanted to see it. Here is a French trailer with German subtitles.
Short Films
I spent time looking for some of the names for short films, so I could try and watch them later. Here are some I found. I cannot remember which list they came from, so they might be a little disjointed.
René Laloux in 1987 | Comment Wang-Fo fut Sauve / How Wang-Fo was saved
René Laloux |Les Dents du Singe (The Teeth of the Monkey), 1960
First post of 2018 is all about new resources and tools I learned in January, even though I’m writing in February.
Well, it’s a new year and it’s time to get back into writing. I had hoped to be a little more rigorous this year, as well as posting at least once a month, but I’d started writing this post way back in January and I’m just now getting to it in Feb.
So far, there are two subjects I definitely want to write about this year. The first is my experience learning front-end web development. The second is a critical commentary on UX hiring practices. I’ve started writing the second, but I just haven’t gotten the formatting quite right. I also have a few other topics waiting to the side, and I’m excited to get to those, too.
In the meantime, here are a few interesting things I learned this week (back in January).
Now that I am working in e-commerce, I’m really interested in learning more about e-commerce experiences. The goals are a little different from web applications and digital products, but actually more straightforward. The goal is, essentially, getting out of the way of people making purchases. Although the results found on this site are hidden unless you pay, it’s still helpful to just have the names of the sites to review.
A site that goes over many psychological principles of user experience. Some of these are also similar to fallacies or biases, such as the recency bias. One of them is not actually a “law”, and is just a renaming of Gestalt. I’m not a fan of renaming terms that have perfectly good names. But I am a fan of this concept and the site itself. It gives me ideas for the design of another site – maybe a site about goats.
As I explored the laws of UX site, I found that it had been built on a templating language that I was not aware existed. Nunjucks seems a lot like Pug (or Jade), in that you have a template with content chunks that get written independently and ported in via extend calls. I’m not explaining it well, but templating is amazing.
It is called “IBM Plex”. I like it, but it kind of looks like it would be the favorite font of Lt Commander Data.
Zappos Mobile App: Search with emojis
Presumably I downloaded this app because I was looking for shoes. Rain boots, really. Anyway, I was pretty (ahem) delighted to discover that you can search via emoji on the Zappos app. Here are some screen captures from my iPhone, where I’m searching for women’s dress boots.
Open app
Normal browse at top
Scroll to emoji search area
Women + dress + boot = women’s dress boots
Emoji search results
Version Control Tools for Designers
This week I also came across some version control tools for designers. These are all for Mac computers, and specifically Sketch files. (Sketch is OK, but not great, IMO.) Abstract made the most sense to me; it seemed the closest to git. But here is the list for all 3. I haven’t used any of them.
Namasketch is a short yoga session for beginners, told in doodles. This sequence consists of ten basic poses in a six-minute flow. The goal is to help you create a strong foundation and develop a love for yoga before you move on to the next level.
A short, intro yoga class for yoga beginners.
It’s cute and friendly, using sketchy animation to demonstrate the poses. I think I might send this to my mom.
You can read more about the production process over at Product Hunt. Looks like he used a product called “Hype” which is the first I’m hearing of it. It’s only $50(!), but doesn’t sound like it’s for production, unless you have a small project like this.
