This project is an exercise in developing a website based on a theoretical client request. The full-cycle workflow will go as follows:
- Identify target users & their stories
- Research design ideas & layouts based on the target users and client requests
- Hand-draw pages to decide on page layouts
- Turn drawn layouts into a hi-fi site mockup
- Turn said mockup into a functioning prototype
- Create webpage that accurately reflects the prototype
By engaging in this exercise I hope to practice & demonstrate my ability to fulfill a client request in a professional & efficient manner. If you have any suggestions or comments I would love to hear! Feel free to contact me at vandekie@gmail.com.
Our client's business is a new, luxurious-yet-open coworking space with an open feel and various amenities. Based on this information I've created user personas for some target users:
Seasoned freelancer too social to work from home.
- Needs:
- Easy ways to contact staff
- Up-to-date list of activities, amenities, coffee menu, etc.
- Pain Points:
- Unprofessional/unappealing layout
- Solutions:
- Keep site well-updated
- Make information easy to access
- Use appealing website branding
Start-up creator who needs a workspace for his small team.
- Needs:
- Consistent group workspace access (ideally a room reservation system)
- Personal relationship with client staff (clear contact info)
- Pain Points:
- Lack of clear workspace separation
- Disorganized information & communication
- Solutions:
- Make contact hours/numbers/etc. easy to find
- Update room reservations online, or at least mention their existence in amenities section
Remote employee who struggles working from home.
- Needs:
- Minimal - a place to do their own thing in peace and comfort
- Pain Points:
- High prices
- Too much noise/socialization
- Solutions:
- Clearly identify pricing & amenities to advertise
- Use website branding that isn't too intimidating or exclusive
MLM employee who wants a safe & inviting place to call work.
- Needs:
- Comfortable website and business
- Well-defined amenities to keep user interested in site & business
- Pain Points:
- Unclear target demographic - is this for me?
- Lack of information - what am I getting into?
- Solutions:
- Use appealing images/design/etc. that feel accessible.
- As a prospective customer, I want the site to clearly show what the business space looks like.
- As a prospective customer, I want to know about amenities, pricing, and other reasons to join.
- As a customer, I want an up-to-date list of amenities such as activity schedules, coffee flavors, and so forth.
- As a customer, I want an easy way to contact staff.
- As a manager, I want an easy way to update information on the site.
- As an owner, I want the website aesthetic to accurately reflect my company's branding.
The client's design requests can be summarized as:
- Minimum 4 pages: homepage, contact, membership detail, and detailed amenities page.
- Luxurious, cool aesthetic that still feels 100% accessible.
- Funky, fun, & local feel that separates them from competitors.
- Open design that doesn't pigeonhole us with tech workers.
- Incorporate physical space in online design: space is bright, open, pastel-colored, and modern-feeling. Plants and light woods are abundant and a recurring heart/love theme is used subtlely.
Based on these I've decided to go with a modern, image-heavy site that uses pop/pastel colors in a tasteful manner.
Upscale restaurants & housing sites tend to be very image-heavy as this is what ultimately sells the product. They tend to have minimalist menus at the top that keep the site functional without detracting from the overall feel. Examples include the Aman hotel site, Tusk restaurant, and The Honours restaurant (sans excessive animations).
I decided to go with a pastel, modern, and vaguely retro feel for the design as this felt both appropriate for the business and distinctive. The client's competitors take a minimalist design approach but a colorful look is more unique and welcoming. This classy pastel color scheme is something I've seen work successfully in Mackinac Island's Grand Hotel (not the website!), Portland's Tusk restaurant, and various makeup ad campaigns. In particular I found Portland's Tusk website to be inspiring as it looks very fun & inviting while still conveying the image of luxury - it's simply luxury that isn't exclusive. The art style will be distinctly NOT techy and convey a funkier Portland flavor that makes it appeal to Portlanders of all sorts.
This design should meet prospective customer needs by presenting instant visual appeal while still providing useful information. The menu will be clear & navigable enough that the visuals won't be too distracting for returning users & admins simply trying to get the site work. The majority of our prospective users will be tech-savvy enough to understand basic web navigation as most contractors/freelancers/remote workers/creatives looking for a shared urban space will already use the internet for some part of business.
Live site is at https://coworking-site.firebaseapp.com/
To download & edit do the following:
-
Get file from Github.
$ git clone https://github.com/lukevandekieft/coworking-site.git -
Install NPM (node package manager) as needed - instructions can be found at https://www.npmjs.com/get-npm .
-
Install necessary webpack dependencies for project.
$ npm install -
Compile and open webpage in developer mode.
$ npm run start
- HTML
- CSS
- Sass preprocessor
- Webpack
- JavaScript
If you have any suggestions or comments please forward them to Luke Vandekieft at vandekie@gmail.com
This software is licensed under the MIT License.
Copyright (c) 2018 Luke Vandekieft