The Studio Coworking
responsive custom built WordPress theme
Overview
The Studio Coworking offers affordable office space, meeting rooms, and virtual office plans. The company requested a refresh and update of their website. The new design had to display the company’s goals and increase the volume of leads. It was also important that the site be easy to update and edit.
Role: UI/UX designer, web developer.
Software: Adobe Photoshop, Adobe XD, Adobe Dreamweaver.
Design process
Defining the design problem
You can’t find a solution until you have a clear idea of what the problem is. The Studio Coworking had a lot to offer, but the website didn’t represent this.
During our meeting, we discovered that the main design problem had to do with missing clear information about membership features and pricing the Studio Coworking offered and noticeable call to action. Furthermore, the website wasn’t responsive. This is how the website looked before redesign:
Planning
Next step was researching and collecting information to work with.
Besides getting brochures with all the information, I also got a chance to ask the Studio Coworking members what they’d like to see on the website. Majority pointed out the missing information about membership options.
Another crucial part of this phase was coming up with the idea of what the Studio Coworking would like to see on the website, what story they wanted to tell users.
With a user research and collected information, I created a detailed set of technical specifications – wireframes and sitemap:
Speaking of a color scheme and typography, the Studio Coworking provided their branding colors and fonts.
Design
First challenge when I started the design was getting the content for the site, because designing without the content is like building a wall without bricks.
After getting that, I started working on the first chapter of a story the company would like to tell – the front page. The goal for this page was to tell users about the company and what it offers, highlight its locations, memberships features and member perks and announce upcoming events. Besides that the front page had to guide users through the website, so they can learn about all this with one click. Here is what I came up with:
Deciding on the easiest and more intuitive way of presenting the membership features and prices was another challenge. The prices were different depending on a location, however, not all users would look for membership prices on the Location page. So, the solution was including these options on both pages, Memberships and Location, and adding a CTA to explore different locations.
Another big challenge of this project was responsiveness – making the content available for each screen. The solution was designing a different layout for each screen size.
Development
The Studio Coworking website was developed by using HTML, CSS, JavaScript and then converted into a custom WordPress theme.
For making it responsive, I used a mobile-first approach in development. A hard coded website I converted into a custom WordPress theme, which I built from scratch.
Testing and Implementing
After the coding was done, I tested the site in different browsers and on different screen sizes and transferred it on a client’s hosting.
You can take a look at the live website by clicking here, however, keep in mind that the name of the company was changed as well as the design of the majority of pages.
You may also like:
CoffeeLounge
responsive landing page
Disaster Relief
award-winning mobile app prototype
Emily Powell's Showroom
responsive microsite