#### The Problem

The user bounce-rate was 99.8% for the first page of GrandPad's buy flow, whether coming from a point in the sales funnel or landing directly on the page. Mobile devices were starting to account for a large percentage of our visitors, and none of the buy flow was optimized for mobile. To add some spice to this project, GrandPad had recently started working with a marketing firm, and our biggest marketing campaign was scheduled to launch in a little over a month. This created somewhat of a crunched timeline.

#### The Goal of the Redesign

The main goal of this redesign was to improve the bounce rate on the first page and retain users through the flow. After evaluating the current iteration of the checkout flow and doing some research, I decided to focus on these points to achieve that goal:

1. Minimize the amount of data collection needed. This would cut back on the number of steps a user would need to take and would make the process feel more manageable.

2. Provide users with an indicator of their progress through the entirety of the checkout process.

3. Ensure users feel secure in making their purchase. The checkout process was a standard Bootstrap-styled experience, which made users feel like they had left the GrandPad website due to the difference in the look and feel of the sites. We wanted a more seamless experience that instilled some trust in users who were about to make a large purchase.

#### Constraints:

* Time (marketing campaign)

* Couldn't rely on 3rd party checkouts (PayPal, Amazon, etc) because of our shipping process.

* To successfully deliver a GrandPad, we had to collect info on multiple people.

#### Research

To help with research, we set up a test environment of our current buy flow. We leveraged [usertesting.com](http://usertesting.com/) to get some feedback from people in our target audience: adults with senior parents. We had the participants read through the home and product description pages of our website so they would have a better idea of what they were testing the checkout process for.

The most common complaint was that the process from start to finish just took too long. To sell and ship a pre-setup GrandPad tablet, we needed information about 3 people (which could all be the same or different): The purchaser, the Family Admin of the GrandPad account, and the GrandPad tablet user. Names, addresses, emails, gender, and birthdays were being collected for all of them. That raised the question, do we need all of this information for each individual?

Turns out, we did. From a product perspective, names and emails were a necessity, and birthdays were a nice-to-have for product features like birthday reminders. I figured we could drop gender because it was pretty useless for us to know, but after talking with engineering I found out that the database was set up to where it needed a gender input.

Since I couldn't cut back on the data needed, the next solution I explored was allowing the user to reuse data that had already been submitted. It was common that the purchaser of the GrandPad would also be the Family Admin, and in rare cases, the GrandPad user would be purchasing it themselves. Based on this information, I felt comfortable having the primary form action being selecting previously inputted data, while the secondary action would be adding new data.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWVOwRa7uAWZR59zMKrF7fDsQm33%2FCOsbFUse1FXJkrSjZtVi%2Fa8c5cfe0-a681-4c7f-97a9-f13afe63f7e8.png?alt=media&token=386e30f0-9ef5-4480-ae3e-804586fe05ba","id":"a8c5cfe0-a681-4c7f-97a9-f13afe63f7e8","width":980,"height":1103,"filename":"data-reuse.png","type":"image/png","caption":"Reusing data wireframe","border":false}]}
```

In the case that a user could not re-use data for any of the people or addresses, I still wanted a way to make the process feel quicker. The current version had a progress bar at the top of the page, but it was a solid green bar that incremented at seemingly random levels each step along the way with no indicator on how much many steps were left to complete.

I internally tested a few wireframe navigation patterns to see which best informed users on their progress: Collapsible sections, breadcrumbs, and an updated progress bar. Collapsible sections for steps allowed users to quickly go back and forth between steps but seeing the names of all the steps felt too heavy and overwhelming to the user. Using a typical breadcrumb pattern had similar problems, and didn't scale well to mobile with the step names listed inside the breadcrumbs. The updated progress bar used icons to show the type of data being collected and broken lines to indicate the steps for each group. This option provided users with just enough information about their progress without overwhelming them with the names of all the steps left.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWVOwRa7uAWZR59zMKrF7fDsQm33%2FCOsbFUse1FXJkrSjZtVi%2F9cf23e87-7369-4aa2-a80d-969a9f224419.png?alt=media&token=00e7ec60-1168-4f77-bce3-acf9024f759f","id":"9cf23e87-7369-4aa2-a80d-969a9f224419","width":980,"height":761,"filename":"navigation-options.png","type":"image/png","caption":"Navigation options","border":false}]}
```

##### Testing

The first flow I prototyped and tested collected only the name and email on the first step so that enough information was grabbed for marketing to work their retargeting and abandon cart magic.

I explored the idea of integrating with third-party checkouts like Paypal or Amazon to save the user some time on inputting their payment details. After we had already tested the flows, we realized our shipping process wouldn't work with these types of services. So although the option is in the wireframes, it didn't make it to the final experience.

##### Flow v1

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWVOwRa7uAWZR59zMKrF7fDsQm33%2FCOsbFUse1FXJkrSjZtVi%2Ffb467a46-e569-4ff0-98fe-3cd2aeb28bd8.png?alt=media&token=5b5cebb0-fc31-46cb-b24f-9e6871dc5672","id":"fb467a46-e569-4ff0-98fe-3cd2aeb28bd8","width":5552,"height":2225,"filename":"case-study-flow-v1.png","type":"image/png","caption":"","border":false}]}
```

The next iteration of the flow I tested grouped name, email, and payment information on the first page. Since a majority of the users were coming from the product info page of the website, they had already expressed their interest in purchasing a plan by clicking on its corresponding buy button. I figured we could hide all of the marketing about the different plans unless the user had not chosen one yet, which in that case picking a plan could be the second step. This helped cut one more step out of the process.

##### Flow v2

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWVOwRa7uAWZR59zMKrF7fDsQm33%2FCOsbFUse1FXJkrSjZtVi%2Fdae0bee8-58c7-4ffa-9b0e-ff89e970c8d6.png?alt=media&token=84fcb018-3563-47fe-a0bc-757f31d60cf2","id":"dae0bee8-58c7-4ffa-9b0e-ff89e970c8d6","width":4716,"height":2184,"filename":"case-study-flow-v2.png","type":"image/png","caption":"","border":false}]}
```

I created a prototype to be tested on mobile phones since the amount of data the user had to input was going to feel like more on a small screen. I used one of the more popular small device sizes, 320x568, to do a quick test on how much scrolling would be needed on each page of the flow to get through the checkout.

[Framer prototype](https://james-lyons-design-qq6hofwii-jamesjlyons.vercel.app/prototypes/albatross-wireframe-flow/index.html)

Note: Once development started, we found out that to create an order we first needed a name and email address before we could assign payment info to the order. The experience we shipped ended up having only a name and email address collection form on the first page, but to avoid adding another step to the flow I combined the payment info and billing address into one.

#### High Fidelity Mockups and Interactions

Now that we had a direction to move in with the flow of the checkout, it was time to put the polish on the mockups. I followed the same base for UI styling I used in the main website redesign: large and bold type. This played an important role in ensuring users felt secure in making their purchases.

Because the user had to make a payment before entering in the details for the setup and shipping, I made sure it was clear that their card was about to be charged. Instead of the blue buttons used in the rest of the flow, I used a bright green color with the text "Confirm & Pay". This way the users would know that the payment would be processed before the full buy flow was complete.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWVOwRa7uAWZR59zMKrF7fDsQm33%2FCOsbFUse1FXJkrSjZtVi%2Ffcceb81c-750a-4c38-98f9-9091ece25146.png?alt=media&token=a5a21aaa-09b3-48df-96f6-5ca5fbac317b","id":"fcceb81c-750a-4c38-98f9-9091ece25146","width":980,"height":858,"filename":"button-comparison.png","type":"image/png","caption":"","border":false}]}
```

Another detail I used to bring confidence to the user was small indicators with details of what had already been input, as well as when the purchase had been made. These only appeared on the desktop version, as they were nice-to-haves and didn't fit well on mobile.

After that, I prototyped the interaction for showing and hiding inputs for when a user was not reusing already saved data. Nothing too fancy, and something easy to implement in code.

#### Implementation

Me and one developer worked on the implementation together for a couple of weeks. He worked on the backend PHP code to get the correct data showing on the pages, and from there I would handle the layout and styling in HTML, CSS, and JavaScript.

#### Results

We launched in time for the marketing campaign, and the redesign was well-received by our team, customer experience, and the marketing firm. Customer experience also pointed out that they were getting fewer calls about the buy flow after we launched.

Sadly, the new site didn't stay up long enough to get significant data for comparison to the metrics from the previous version. Shortly after we launched the redesign, we partnered with Consumer Cellular, who was going to handle all sales through their website.

#### Takeaways

One of my biggest lessons from this project was how to deal with unforeseen snags during the implementation process. When finding out some features or flows couldn't be accomplished due to development or time constraints, it was tempting just to fall back to the way the old version was because we were already set up to support it. Finding compromises in the middle of what was intended and what was possible only required asking the right questions and having good discussions with development. I've found that knowing a bit of code makes me much more empathetic to developers' concerns about implementing a design.

Another lesson from this project was learning to realize that a product you spend a lot of time and effort on to launch may only be in production for a short while. While it is arguably better than a product never seeing the light of day, it serves as a reminder for me not to get too caught up in the long-term vision or timeline.

Redesigning the buy flow for a GrandPad tablet

#### **Why we built Lio**

In the fall of 2017, the  team over at [Blockstack](https://blockstack.org/) was having their first contest to build apps for their decentralized platform, and the requirement was to build a cryptocurrency portfolio app than ran on Blockstack technology. Lio was built as a challenge for me and Alec, my development partner at [Tap Five](https://tapfive.dev/), to see what we could build in a short amount of time and possibly place well in the contest. We decided to focus on a market that we knew well, users who wanted dead-simple portfolio tracking. We also took this as an opportunity to use and learn Vue for our front-end framework.

#### **Results**

Did we win the contest? No, but it was a lot of fun to build, and the team who reviewed our app at Blockstack ranked the design and code highly. Lio is also what ultimately gave us the idea to have a business name to work under since we would have two projects now (the other being [Subdivide](https://subdivide.app/)). Lio has been sunsetted after some major changes from Blockstack, but you cak still view the landing page [here](https://lio.tapfive.dev/).

#### The Problem

As a complement to the tablet for seniors, GrandPad provided mobile apps for family members to communicate and share photos with the tablet user. Essentially, they were social media apps meant to privately communicate with family. The iOS and Android companion apps were both functional but were in dire need of a more cohesive user experience between both platforms. And they honestly needed a fresh coat of paint to match with the newer website and [checkout process](https://james-lyons-design-qq6hofwii-jamesjlyons.vercel.app/projects/grandpad-checkout) UI. The Android app had also fallen behind in terms of features, so it was time to bring it up to speed.

#### The Goal of the Redesign

The iOS redesign came first, so it was going to set the direction for the Android redesign. These were my priorities for both apps:

1. **Leverage OS design guidelines to create cohesive experiences.** The current apps didn't follow the HIG or Material Design specs but also weren't consistent with themselves. There wasn't enough time allotted to build out a single design system to translate across both iOS and Android, and staying closer to the HIG and Material specs would help users feel more comfortable using the app on the respective platforms.

2. **Organize the photo comments better.** Comments on photos came in either text or audio format from the GrandPad tablet, and the UI needed a clearer differentiation for voice comments.

3. **Add a notification center.** There was no place to see past notifications within the app, so it was a priority to add a place where users could see all new and past notifications.

### The iOS & Android Apps

Disclaimer: The design of the bottom tabs with an action button over it ended up getting axed towards the end of the iOS development. The shipped version has a standard bottom navigation with a "New Post" button in the middle position.

### Signup and Login

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWVOwRa7uAWZR59zMKrF7fDsQm33%2Fgrandpad-mobile-apps%2Ff94c7de6-193e-4798-8ea7-0349b28ae1cb.png?alt=media&token=35a97f55-7e81-4888-89cc-ce40556ec4cf","id":"f94c7de6-193e-4798-8ea7-0349b28ae1cb","width":1162,"height":1025,"filename":"James Lyons Signup.png","type":"image/png","caption":"Signup and login views","border":false}]}
```

After users were invited to the private family network, they could set up an account from within the app and choose a profile photo.

##### Home/Photo Feed

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWVOwRa7uAWZR59zMKrF7fDsQm33%2Fgrandpad-mobile-apps%2Fcc5b9a33-149f-4377-b2f7-5357017bb442.png?alt=media&token=702dec62-02e4-4a47-a8e1-2098607326e9","id":"cc5b9a33-149f-4377-b2f7-5357017bb442","width":1162,"height":1025,"filename":"James Lyons feed.png","type":"image/png","caption":"Android and iOS home feed","border":false}]}
```

This was the most-used section of the app. Any photo that had been shared, from a GrandPad tablet or a companion app, would show up in the feeds of the entire family. We allowed for hiding posts from individual contacts because sometimes family dynamics are complicated.

##### Contacts

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWVOwRa7uAWZR59zMKrF7fDsQm33%2Fgrandpad-mobile-apps%2Fa57c5554-a0f0-4729-9418-fc4634384906.png?alt=media&token=ee265616-a79a-4e02-b32f-3eeda6f5f543","id":"a57c5554-a0f0-4729-9418-fc4634384906","width":1162,"height":1025,"filename":"James Lyons contacts.png","type":"image/png","caption":"iOS and Android contact views","border":false}]}
```

Each contact in the family network had a dedicated screen to contact them and to show all the photos they had shared. Through user feedback we learned that being able to see the local weather for contacts was a much-loved feature, so it stayed in the redesign.

##### Post View

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWVOwRa7uAWZR59zMKrF7fDsQm33%2Fgrandpad-mobile-apps%2Fc77e5e3f-97eb-4d8e-b84d-8a62a54db633.png?alt=media&token=2f784baf-a7bb-4553-9746-f6fb352033e0","id":"c77e5e3f-97eb-4d8e-b84d-8a62a54db633","width":1162,"height":1025,"filename":"post-detail.png","type":"image/png","caption":"Post view and scrolled post view","border":false}]}
```

Voice comments in the post view got a much-needed upgrade. The ability to play and pause was added, and we now showed the length of the voice comment so users knew how long they would need to listen for.

I added a bar with a small post preview that expanded down as users scrolled through comments, to provide context as to what photo was being commented on. This was mainly helpful in the case when a user was sent to a comment from a notification. Sometimes the comment wasn't at the top of the list, and for simplicity's sake we wanted to send users to the comment list on the photo screen instead of a dedicated screen for comments.

For commenting on a post, we included a text box that expanded as you typed multiple lines. This way we could support showing more than one line of the comment being typed, and users could quickly review their comment before posting it.

Each post had a dedicated photo-only view that provided more of a photo gallery type of view.

##### New Post

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWVOwRa7uAWZR59zMKrF7fDsQm33%2Fgrandpad-mobile-apps%2F67d459c3-eeb2-41e8-83df-261f27146596.png?alt=media&token=6e26ee58-184b-49c8-ac00-e93045402e94","id":"67d459c3-eeb2-41e8-83df-261f27146596","width":1162,"height":1025,"filename":"new-post.png","type":"image/png","caption":"Creating a new post","border":false}]}
```

On Android, we used the Floating Action Button component to provide a quick way to choose where between photo sources when making a new post.

In a following update, we allowed users to add more than one photo to a post. The screen on the right allowed users to see an overview of all the photos that were being posted and write one caption for the post.

##### Notification Center

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWVOwRa7uAWZR59zMKrF7fDsQm33%2Fgrandpad-mobile-apps%2Ff2b23bb4-0cf2-462f-b710-5cabdb278b65.png?alt=media&token=6440500d-e871-4990-97d2-74027866e6ef","id":"f2b23bb4-0cf2-462f-b710-5cabdb278b65","width":1162,"height":1025,"filename":"notifications.png","type":"image/png","caption":"Notification views","border":false}]}
```

A central place to see all notifications was finally added to the app. This screen also allowed users to manage notifications by marking them as seen with a swipe.

##### Video Call

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWVOwRa7uAWZR59zMKrF7fDsQm33%2Fgrandpad-mobile-apps%2F09366c87-7438-4835-bf58-86ec84a1efb3.png?alt=media&token=1b6d9710-d5d7-4e2a-91f1-a34ae32cbf86","id":"09366c87-7438-4835-bf58-86ec84a1efb3","width":1162,"height":1025,"filename":"video-call.png","type":"image/png","caption":"Recieving and taking a video call","border":false}]}
```

Another much-used feature of GrandPad's platform was video calling. The platform supported video calls between GrandPad tablets and companion apps in any configuration.

#### Results

Both projects successfully launched and are live on the App Store and Google Play Store. You can see the listings here:\
[App Store](https://apps.apple.com/us/app/grandpad/id904069946)\
[Play Store](https://play.google.com/store/apps/details?id=net.grandpad.puma)

GrandPad Mobile Apps

Untitled

Before I dove into my first project at Soberlink, the [Identity Management](https://id.soberlink.com/) project, I began work on a small design system to help future me manage styles and components across projects. The goal was to start in Figma, and then extend to a front-end component library in Vue powered by Storybook.

Soberlink had no real consumer-facing digital products outside of the barebone apps, so it was time to establish how future products might look and feel going forward. The end-users of our digital products are healthcare providers, lawyers, and clients, so the look and feel of the interface had to look trustworthy and professional. I started with the typography and color palette to complement our branding and marketing style.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWVOwRa7uAWZR59zMKrF7fDsQm33%2FmMLeOOYAtHHAY6Z4LJuR%2F83b35142-61ac-4e78-b173-4af6cd9fb755.png?alt=media&token=4b1286bb-4596-45c8-a782-b3ff473f6dc1","id":"83b35142-61ac-4e78-b173-4af6cd9fb755","width":1587,"height":1436,"filename":"Sui Type.png","type":"image/png","caption":"Type scale","border":false}]}
```

I went with Adelle Sans for its great legibility at smaller sizes and its range of weights. It had just the amount of extra personality in a sans we wanted (although the fantastic Inter was a close runner up as a more neutral option), and it complemented the logotype’s Eurostyle font well.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWVOwRa7uAWZR59zMKrF7fDsQm33%2FmMLeOOYAtHHAY6Z4LJuR%2F28c52c1f-16ff-4660-bd91-6edda7c36532.png?alt=media&token=f5151177-23e0-4129-981d-87dcbe6b281f","id":"28c52c1f-16ff-4660-bd91-6edda7c36532","width":3174,"height":2872,"filename":"Sui Blue.png","type":"image/png","caption":"Primary color shades","border":false}]}
```

For the color system, I started with a base color of `#047EB6`, a value close the blue in our logo that has a passing AA Large contrast with white text. This is what would become the `blue-50` of the pallet. I then leveraged [Colorbox](https://colorbox.io/) to help build out the other hues and values for the system. For the colors outside of the grays, I set the `50` levels to be able to have white text over them with AA Large contrast. That way it was easier to pair font colors with background colors without having to measure contrast every time.

For the neutrals, I went with a slightly cooler hue to match our blue accent color. The neutral palette has 1 more shade than the other colors because I often find I need a larger range of grays for background, border, and text colors. The easing of the neutral shades moves much faster through the middle tones, which gives me smaller steps of the lighter and darker ends to work with for subtle contrast between elements. I still think the yellow shades need some love, by far the most difficult color to work with.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWVOwRa7uAWZR59zMKrF7fDsQm33%2FmMLeOOYAtHHAY6Z4LJuR%2Fdfa03898-55e4-4e7b-83fb-61251b2955c2.png?alt=media&token=af1d51e1-b1be-4588-bb30-6942c3cbae61","id":"dfa03898-55e4-4e7b-83fb-61251b2955c2","width":3174,"height":2670,"filename":"palette-2.png","type":"image/png","caption":"The color system","border":false}]}
```

Since I didn’t know what components I was going to need for my first project, I started with some primitive ones. This established some of the styling upfront and gave me a little to build from. The plan after that was to expand upon and add to the component library as needed while designing the products. The almighty button component came first, followed by inputs.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWVOwRa7uAWZR59zMKrF7fDsQm33%2FmMLeOOYAtHHAY6Z4LJuR%2F7510821b-d4b1-4dcc-972c-ec2fa9b657ea.png?alt=media&token=c937a3de-e7cf-483e-906b-1be9f2835648","id":"7510821b-d4b1-4dcc-972c-ec2fa9b657ea","width":3174,"height":1732,"filename":"sui-button-structure.png","type":"image/png","caption":"Component variants in Figma","border":false}]}
```

For the component structure in Figma, I started with a base component that the rest of the variants were built from. For the button, this meant including icons on both sides and a split button section.

Since the first minimal version, I’ve added modals, alerts, and more as needed while building out Soberlink products.

## The System in Use

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWVOwRa7uAWZR59zMKrF7fDsQm33%2FmMLeOOYAtHHAY6Z4LJuR%2F9cb4316f-932f-41db-a85c-a214f64d8e5d.png?alt=media&token=6b01414b-80cf-46ca-a362-5c3d4025766a","id":"9cb4316f-932f-41db-a85c-a214f64d8e5d","width":3174,"height":2034,"filename":"sui-in-use-1.png","type":"image/png","caption":"The login page","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWVOwRa7uAWZR59zMKrF7fDsQm33%2FmMLeOOYAtHHAY6Z4LJuR%2Fb7f03d50-03ad-47df-b485-0078c855439d.png?alt=media&token=788fdc14-d5d6-42f7-97bd-b53a2d8bfb38","id":"b7f03d50-03ad-47df-b485-0078c855439d","width":3174,"height":2426,"filename":"sui-in-use-2.png","type":"image/png","caption":"Account settings","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWVOwRa7uAWZR59zMKrF7fDsQm33%2FmMLeOOYAtHHAY6Z4LJuR%2Fe4316645-a374-4a4b-8ce9-114d6b07fb9c.png?alt=media&token=b4691eb6-2d6e-431d-930d-42ee171edbcb","id":"e4316645-a374-4a4b-8ce9-114d6b07fb9c","width":3174,"height":1800,"filename":"sui-in-use-4.png","type":"image/png","caption":"Managing connections","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWVOwRa7uAWZR59zMKrF7fDsQm33%2FmMLeOOYAtHHAY6Z4LJuR%2F066ea413-0848-4b8b-b028-9b280d4dbd3d.png?alt=media&token=e35f901b-f2bb-49ef-8155-95f9c96272c4","id":"066ea413-0848-4b8b-b028-9b280d4dbd3d","width":3174,"height":2872,"filename":"sui-in-use-3.png","type":"image/png","caption":"Mobile report calendar","border":false}]}
```

## Takeaways

If I was going to approach a full color system again, I think I would explore using something like the [CIELAB colorspace](https://wildbit.com/blog/2021/09/16/accessible-palette-stop-using-hsl-for-color-systems) to get more uniform lightness across the palettes. I would also invest more time upfront defining tokens and semantic naming to use in the design system code (and hopefully in Figma someday 🤞). Rather than worrying if updating a color and wondering what components it's applied to, tokens and semantic naming would provide a better map of where colors are used. It would also allow for easier to understand theming for things like dark mode.

As far as things that went well, so far the “just-in-time” building of components as I need them has been working out well. I got a very minimal system going upfront that helped me build the identity management project quicker and with more consistency, and didn’t waste time speculating what components I was going to need in the future.

Soerlink UI Case Study

#### About the project

Shortly after joining the Analytics Cloud team at [Liferay](https://www.liferay.com/), I had the chance to work on the new A/B testing feature for the platform. The team kicked-off the project with a design sprint, and after that, I was the sole designer working on the Analytics Cloud side of the project.

My responsibilities for this project included:

* Establishing a cross-product user flow and getting approval from multiple stakeholders

* Collaborating with a designer from Liferay DXP to ensure cross-product consistency

* Working within and expanding upon our design system to build the A/B testing UI on Analytics Cloud

* Working internationally with our development team in Brazil

The resulting feature was deeply integrated with Liferay's Digital Experience Platform (DXP). It solved users' needs for having a way to run A/B tests within Liferay's product ecosystem. Leveraging the site-building capabilities in DXP, users can quickly make a new A/B test on any page and select an element to track click events on if necessary for the desired metric to be measured. Users can also select a target audience built by our audience segment creator, so the can run tests on personalizations of a page. Liferay's Analytics Cloud then does the heavy lifting tracking and reporting the data for the test and eventually gives the user a test result, with the handy option to publish the winning variant directly from the report. Although it was very much an MVP for an A/B testing feature, it meets our customers' basic needs and has laid the groundwork for future enhancements like multivariate and redirect testing.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWVOwRa7uAWZR59zMKrF7fDsQm33%2FwbCV9NL5KfJDL8JLvV8u%2F8d655a48-1929-48cf-a456-c34e82fcf3d8.png?alt=media&token=90e39f63-514c-4e9e-9ebe-5dd5643b1e89","id":"8d655a48-1929-48cf-a456-c34e82fcf3d8","width":1782,"height":1104,"filename":"high-level-flow.png","type":"image/png","caption":"High-level flow map","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWVOwRa7uAWZR59zMKrF7fDsQm33%2FwbCV9NL5KfJDL8JLvV8u%2F67198ac2-fd8b-4a61-a0ba-dc4343c1620c.png?alt=media&token=9c6c5179-b30c-4459-9322-9d118ce69cd3","id":"67198ac2-fd8b-4a61-a0ba-dc4343c1620c","width":8222,"height":4151,"filename":"user-flow.png","type":"image/png","caption":"User flow between products","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWVOwRa7uAWZR59zMKrF7fDsQm33%2FwbCV9NL5KfJDL8JLvV8u%2Fcf2105f2-8213-4187-87ae-ad126bce8286.png?alt=media&token=d0a4c236-b44e-4cc7-a679-f7a32801f394","id":"cf2105f2-8213-4187-87ae-ad126bce8286","width":3016,"height":2582,"filename":"test-setup.png","type":"image/png","caption":"Test setup","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWVOwRa7uAWZR59zMKrF7fDsQm33%2FwbCV9NL5KfJDL8JLvV8u%2F26438f62-9f87-4e48-8937-0dada5b73206.png?alt=media&token=447d1c82-3ca9-4e99-ac4a-14240e1c80a7","id":"26438f62-9f87-4e48-8937-0dada5b73206","width":3016,"height":4326,"filename":"test-running.png","type":"image/png","caption":"Test running","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWVOwRa7uAWZR59zMKrF7fDsQm33%2FwbCV9NL5KfJDL8JLvV8u%2Ffdef61ae-6148-4fe1-8f8f-7f771c465c34.png?alt=media&token=d7fc4953-e556-41e6-a782-93398d2fb8dd","id":"fdef61ae-6148-4fe1-8f8f-7f771c465c34","width":3016,"height":4574,"filename":"test-complete.png","type":"image/png","caption":"Test complete","border":false}]}
```