Sam Crocker, Author at Conversion.com

60 Free UI elements from our 20 day design challenge

Our designers work tirelessly on creating impactful new versions of our clients’ websites, pages and UI elements – and are always balancing persuasive impactful changes and matching the look and feel (or brand guidelines) provided by clients.

As a creative exercise the team decided it would be a fun challenge to try and create 20 unique user interface elements each – in 20 days. Each day the team had one specific element to work on (e.g. “simple price comparison element”), and got to create the element without any brand guidelines or guidance to adhere to.

Today, we’re giving away the output as inspiration – check out the gallery of all 60 elements.

The team have answered a number of questions to provide more detail about the project and what they learned.

How did you come up with the idea?

Justyna Kusa (Senior UX designer):

We were inspired by similar initiatives, like “40 days of dating” by Jessica Walsh and Timothy Goodman (http://fortydaysofdating.com/). The main aim was to find a task where we’re not limited by any brand guidelines (as in our regular work) and we can still focus on something web or app related. Setting a UI challenge sounded like a good solution. We wanted to commit and work regularly on a project and know that it will end after a set period of time.

Natalia Magda (UX designer):

We wanted to make something together, as a design team, that will wake up our creativity. We wanted to play with colours, typography, ux solutions. To try something new. And we also wanted to challenge ourselves and learn new skills.

Ana Araujo (UX designer):

We came up with this idea to challenge yourself to create something new, exciting, full of creativity and that could give us the opportunity to do a nice project together as a team.

What was the hardest part about the challenge?

Natalia: 

Some days were pretty heavy with client work, so it was hard to find time and energy to work on an additional project.

Ana:

Manage the time between the client work and this challenge and also sometimes it was difficult to achieve the final result that I was 100 percent happy.

Justyna:

The hardest bit was finding enough time for a side project and work on our clients’ designs. In both areas we wanted to provide the highest quality output and that turned out to be quite challenging. The second difficulty was to be inspired all the time. Sometimes you can come up with a great idea straight away, other time it can be quite long process.

Which design element did you find most challenging and why?

Ana:

Day 19 – Payment method, took me a long time, lots of experimentations until I get this final result.

ana payment method

Justyna:

It was probably on the 6th day, when we agreed to design a contact us form. The topic certainly wasn’t new, but I was trying to experiment with a style that was a new area for me. I tend to design in quite a subtle way, so I wasn’t quite sure if the stronger route that I chose was the correct one.

justyna contact form

Natalia:

The first task was the hardest for me. I needed to get into it, get inspired and start the challenge.

404 page natalia

Which is your favourite element you designed?

Justyna:

I like music app from day 18th. Probably because I was listening this album a lot while working on the entire challenge!

justyna music app

Ana:

I will say 18 day – Music app. Zero 7 is my one of my favourite bands since I was a teenager, especially that album, every time I listen  just give me a good Vibe and I think it comes through in the design.

ana music app

 

Natalia:

Music app – because I never worked on anything like this before.

natalia music app

What did you learn from the challenge?

Natalia

I reassured myself that simple solutions are (usually) the best ones.

Justyna:

I explored a few visual styles that were new to me. But every topic was not only challenge from a visual point of view – I wanted every piece to present a solution that will be friendly for a potential user. That was a big learning experience as well.

Ana

Well, I got to explore my creativity a lot, and try different approaches from my usual style.

Is this something you’d recommend to other designers or design teams?

Ana

Of course! All design teams and designers should do this type of project from time to time. The challenge increases the level of creativity, allows you to explore new approaches and get out of our safe ‘space’ and just do things that you’ve never done before. It’s a great project for a design team or an individual designer.

Natalia

I would definitely recommend it to any design team. It was fun to do something together, outside of the day to day projects.

Justyna

I would definitely recommend it! It’s good to prove to yourself that you’re able to do a bit more. It’s great for warming up and focusing on creative thinking. It was also a very nice team building experience. We were supporting each other and sharing a constructive feedback all the time.

 

Go have a look at the full gallery and if you want any help with persuasive UI elements drop as a line: hello@conversion.com

Introducing: Conversion.com’s Optimizely Chrome Extension

Today we are very excited to announce the public launch of our Optimizely Chrome Extension. We’ve been using the extension internally and been improving the functionality over the past year.

We began rolling it out to our clients over the last few months, and after some great feedback we decided to put it into private beta last month. Today, we are thrilled to share it with everyone!

Solving problems you never knew you had.

We feel like Conversion.com’s Optimizely Chrome Extension is one of those wonderful tools that you never knew you needed – until you start using it. And now that we’ve started, we couldn’t live without it.

2

What does the extension do?

The feature list is impressive and always growing. At the time of launch, the core features we want to highlight are below. Here are 8 great reasons you should install the extension today.

  • Quickly see whether Optimizely is running on the page (if the circle turns blue, Optimizely has been detected on the page)

Icons x and 0

  • See how many experiments are running on the page (that’s the white number within the blue circle)

Icon 3

  • Toggle between QA mode to see your experiments and variations that are not yet live with the flick of a switch*

optimizely extension QA

 

*Be sure to set up the QA cookie first – only users with the QA cookie set-up will be able to see tests in QA mode.

  • Switch variations quickly within an experiment with the handy drop-down selector. This will reload the page and bucket you into whichever variation you have selected.

Variation1

  • Jump straight into the Results and Editor pages of any experiment. Just make sure you’re logged into your Optimizely account!

CTA

  • Copy an experiment URL to the clipboard – this way you can be sure that you and your colleagues are looking at the same thing!

Copy Url

  • Thought the QR code was dead? Wrong! We finally found a great use for the QR code. Snap a picture of the QR code to see the same experiment and variation quickly on your mobile device.

  • Finally, make sure you are tracking the right events with the events console. This will show you Optimizely tracking, segmentation info and manual activation info.

Events

Check out the FAQ for the full feature list and more detail!

Once you’ve installed it, be sure to take it out for a spin.

We’d suggest the following activities as a great way to get started and set you up for success:

  • Read the FAQ
  • Set up a QA cookie, to make the best use of QA mode and to check out your experiments before they go live!
  • Visit a page you’re running a test on, and check out all the experiments and variations with one handy interface

Before you start using the extension please be sure to review Optimizely’s best practices, and be sure to mask descriptive names of your tests.

Send us your feedback!

We hope you’ll find this new tool as useful as we have. If you want to send us feature requests, report bugs, or tell our Optimizely Certified Development team just how much you appreciate them, please use the handy little “Get in touch” button on the extension.

What are you waiting for?

Click here to get your hands on the extension and start saving time!

Introducing our fully Optimizely certified developer team

We are proud to announce that the entire Conversion.com development team are Optimizely certified developers!

Our savvy dev team have been working closely with Optimizely since October 2013 and the entire team are now Optimizely Developer Certified. We’ve really gotten to know Optimizely over the years and we’re co-creating more innovative solutions all the time (so watch this space!)

Be sure to check out our must-know 6 essential tips for working with Optimizely from our very own James Marchant (second-left in the picture).
Stay tuned for more updates!