UX Designer and no-code developer
July 2023 - Oct 2024 (schedule revised according to availability of both parties)
Performing arts
While this was an independent project, I did receive some input and feedback from my CareerFoundry course mentor
Wix, Figma, Optimalsort, Lucidchart
Challenges
Design and build a responsive website for a performing musician
What information does the user need in order to feel curious enough to reach out and confidently make a booking?
What information does the artist need from the client?
What features and information does the website need to make the booking process as efficient as possible for both the artist and the customer?
Important to keep in mind that there are two main users: the musician and the client making the booking
Results
Developed a responsive website with an about section, performance packages, pricing information and contact form.
Process
Client Meeting
Video call with the client to discover client needs and pain point and discuss the parameters of the project.
Research
Conducting user interviews and competitive research.
Define: Key Features and Solutions
Deciding on key features for the website.
Low- and Mid-Fidelity Wireframes
Designing the wireframes in Figma.
Style Exploration: High-Fidelity Wireframes
Deciding on the visual style and proceeding to high-fidelity wireframes.
Building the Website
Exploring different website builders and building the website using Wix Studio.
Process
Research & Analysis: We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
Information Architecture: Based on the research findings, we restructured the app's navigation and content, prioritizing features and information according to user needs.
Wireframing & Prototyping: We designed low-fidelity wireframes to visualize the new layout and navigation, iteratively refining them based on user feedback. Afterward, we built a high-fidelity, interactive prototype to test the design.
Usability Testing: We conducted usability tests with a diverse group of users to validate the design and identify areas for improvement. Based on the feedback, we made necessary adjustments to the design.
Visual Design & Style Guide: We developed a cohesive visual language, including color schemes, typography, and iconography, ensuring consistency throughout the app. We also created a style guide to maintain design consistency in future updates.
Client Meeting
I started the process with a video call with my client to get a better understanding of her needs.
What are Lotta's main struggles?
The potential of lots of time consuming emailing back and forth with the client, especially if they end up not booking a performance.
She would like a website that reflects her services and personality: professional yet fun and easily approachable
Findings: Lotta's Interview
Lotta's booking experience
She was familiar with all the performers already, but still the first thing she did was check all the videos on the website.
She noted that having the videos on the website made things easy for her.
Availability was another major factor when deciding on performers.
Agreeing on a price for the performance required lots of emailing back and forth, this became stressful when trying to manage her whole budget for the event.
Last minute changes to the performing group of technical requirements.
Define: Key Features and Solutions
Pricing information
Base starting point on the website to give a general idea of how much to expect for costs and a general starting point for negotiations.
Disclaimers for variables: specialized program, requests, travel costs etc
Performance types
Having a base starting point for the program can provide structure for the customer and for Lotta.
These can be modified as necessary
Media
Having photos, audio and especially video easily accessible would be key for the customer to be assured of the quality of the performance, establish trust and make a booking confidently.
Contact Form
Balancing having minimal effort for the customer while getting enough information for Lotta to minimize emails
Name and contact info as required fields, options to fill out date, location and message
FAQ
Lotta mentioned in her interview that she spends time answering general questions. To solve this problem I decided to add a frequently asked questions section, something that was missing on other websites that could potentially take some of the workload off Lotta’s shoulders and streamline the booking process.
Low- and Midfidelity Wireframes
Style Exploration: High-Fidelity Wireframes
Building the Website
This was my first time building a website so I spent some time deciding which platform to use. I ended up going with Wix Studio.
I ended up modifying the design of the website a bit according to the capabilities of the program. I found some features to be a bit limiting, such as lack of alignment tools and limited options how to work with images.
On the other hand, this website builder had good apps that I could integrate for the contact form, with options such as a calendar picker and location autofill, as well as frequently asked questions.
Next Steps
User testing and iteration before publishing the website
Before publishing the page it would be important to test the functionality of the website and make any necessary changes.
Improving SEO settings
Having a website is a good first step, but potential customers also need to be able to find it, so it is crucial to have some best SEO practices in place.
Adding media content
This would be the most crucial thing to add, as customers want to see and hear examples of the types of performance they’d be booking.
Adding a program page
This would prove a really interesting challenge from an information architecture perspective -> how to organize the selected pieces and how to search for them and filter the results.
Updating the visuals and perhaps even rebuilding the site in a different builder.
Key Learnings
This was the first web design project I did mostly independently and it was a valuable learning process that included lots of exploration and learning new skills.
Overall this was a great project to manage the design process and figuring out what works for me, while taking into account client needs and wishes.
Start. With. The. MVP.
Starting with the minimum viable product would have saved me SO much time and streamlined the design process.
Keep a backlog of possible future features.
Prepare All Content
Ask the client to send all content in advance.
If content is not available, bookmark the idea for later and have it as a scalable option, but don’t plan the website around it and start designing it yet.
Plan Extra Time
Especially research and using new tools can be time consuming
Plan extra time for client communication and possible delays.