I love partnering with small businesses and creatives to build or redesign their online presence. Here are two sites where simple yet unique UX solutions delivered what the client needed for their site to stand out.
SITE:
jeremysteckel.com
Jeremy described a vision of a simplified one-page site to represent his audio production/mixing business, so we put our heads together and designed a site that served his two main goals: Help clients reach him quickly and play his music for people as easily as possible.
Role:
Designer + Project Manager.
Team:
Jeremy (client)
Nathan Williams (videographer)
Chris Self (engineer)
Project Summary:
1 | Business Needs
2 | Custom Features
3 | Visual Identity
![](https://cdn.prod.website-files.com/5fcd4b9f54f8995756050768/5fff5638b0ccc217e27debff_F%20WB%201.jpg)
1 | Business Needs
Jeremy wanted to build a site where clients could immediately see footage of his custom built studio, contact him right away, and also listen to his work.
We accomplished all of this with a one-page site. In Jeremy’s words, “If someone opens my site on their phone and only wants to spend a minute with me, I want to put my best foot forward.”
2 | Custom Features
The Squarespace platform doesn’t support the kinds of of pop ups we wanted, so I worked with a developer to build two modals that pop up when clicking ‘Contact’ and ‘Listen’ in the home page.
3 | Visual Identity
A beautifully shot video gives clients an immediate view into who Jeremy is and the kind of work he creates in his newly built studio. A bold yellow acts as Jeremy’s brand color behind a gallery of images.
SITE:barmeridian.com
What do you do in Brooklyn during Covid-19 when your bar has to keep up with the city’s rapidly changing rules? Build a website that shows customers where they can still find a great drink.
Role:
Designer + Project Manager.
Team:
Bar Meridian (client)
Chris Self (engineer)
Jonathan Mehring (photographer)
Kristine Tsui (photographer)
Project Summary:
1 | Designing in Crisis
2 | Dual Homepage
1 | Designing in Crisis
The restaurant industry has been hit hard by Covid-19 and I met the owner of Bar Meridian right as this pandemic took hold. We were forced to rethink their website in this time of crisis, and how it could keep business coming in as city mandates constantly changed levels of operation.
Bar Meridian wanted to make sure customers knew they had outdoor space, to-go provisions, and were still open. We redesigned the home page to show a clear image of the inviting outdoor space along with hours of service.
2 | Dual Homepage
The owner of Bar Meridian wanted to make sure people saw both indoor and outdoor experiences of the bar depending on the city's changing guidelines. To accomplish this, I created a “dual home page” to show the two identities of this bar and built a custom
‘Indoor / Outdoor’ toggle that switches between the two.
3 | Design Iterations
Constant feedback from users was key in refining a version of Clipboard that could be adopted by a diverse user base. Each of these iterations was refined through prototyping and testing with users.
My goal was to create a highly intuitive feature that also inspired users to easily think of additional use cases not shown by the prototype.
![](https://cdn.prod.website-files.com/5fcd4b9f54f8995756050768/5ffe1bbcec6c3d792d54534f_Research%207%20WF.jpg)
Early concept for a new copy & paste UI.
![](https://cdn.prod.website-files.com/5fcd4b9f54f8995756050768/5ffe1bbbf52edc3177c253ef_Research%208%20WF.jpg)
UI iterations - removing cluttered buttons in preference for a clearer option for users to click.
![](https://cdn.prod.website-files.com/5fcd4b9f54f8995756050768/5ffe1bbc4f68060d7fbf8f74_Research%209%20WF.jpg)
Early iterations considered three 'clipboard' fields that could be opened from the highlight UI. Testing showed this was confusing, leading to a clearer solution.
![](https://cdn.prod.website-files.com/5fcd4b9f54f8995756050768/5ffe1bbcc443a04e1f4f84d4_Research%2010%20WF.jpg)
The clipboard field followed Apple notification design systems at first, but the need for more manageable space led to using the overlay text message designs.
![](https://cdn.prod.website-files.com/5fcd4b9f54f8995756050768/5ffe1bbb4efe750d26d8a583_Research%2011%20WF.jpg)
This current iteration offers generous room for content editing along with a toggle for three different clipboards to save utilize.
![](https://cdn.prod.website-files.com/5fcd4b9f54f8995756050768/5ffe2307bd6dfbd2e738f5c4_Research%2012%20WF.jpg)
Final iteration.
Prototype
![](https://cdn.prod.website-files.com/5fcd4b9f54f8995756050768/5ffe2c027b3498509f98e2e1_Research%2014%20WF.jpg)
User Responses to Clipboard