828 Greene
A vibrant, spirited, custom website for a quality business.
The Client
- 828 Greene Student Apartments
Role
- Designer
- Developer
Goals
- Redesign website.
- Improve functionality of rental aplication.
- Improve information flow and organization.
- Include a photo gallery showcasing amenities.
- Give the brand a voice, something students could relate to.
Timeline
- May 2019 – September 2019
- QA Follow-up: October 2019
Website
Overview
828 Greene offers housing to undergraduate and graduate students attending the University of Michigan. I was contracted to re-design their website.
Background
828 Greene needed to update their existing website. They wanted to showcase a successful update / refurnish of their apartments, desired a user-friendly rental application process, and wanted to distinguish themselves as a standout among similar business in the area.
I designed a custom website for 828 Greene that met their needs, showcasing their updates and improving functionality. The client has experienced a 40%+ increase in applications, a number that clearly reflects a return on their investment. 828 Greene said that,“…the new website is such an improvement!”.
Original 828 Greene Website.
The Project
Build a custom designed website improving information flow, functionality and design as well incorporating an online application form that should increase the number of applications the client receives. Create a brand identity for the 828 Greene business.
The Process
1. Understanding the Problem
- One-on-one meeting with client to determining pain points and objective.
- Evaluation of existing website.
2. Discovery
- Develop target audience.
- Identify Brand Attributes to help define the brand and design the most appropriate solution for client and users.
- Research websites of local competitors to discover what they are doing well and what 828 Greene may be missing from their website.
- Establish Goals.
3. Ideation
- Use collected research to informed the creation of wireframes and site map, present to client.
- Determine final site map and wireframe based on client feedback.
4. Design
- Begin logo design, present three logos to client, determine final logo.
- Use information learned from Target Audience, Brand Attributes list and final sitemap and wireframe concept to begin design.
- Hi-fidelity mock-ups are created from multiple design iterations.
- Mock-ups presented, client chooses final design.
- Develop Style Guide.
5. Development & Testing
- Development of website, key components and user testing.
6. Results & Takeaways
- Brief analysis of project outcome and key takeaways.
7. Follow-up QA
- Review client notes / bugs of new website, update where possible / within scope of project. Evaluate the website to determine any issues that need to be resolved before project close.
1
Understanding the Problem
Section Summary
- One-on-one meeting with client to determining pain points and objective.
- Evaluation of existing website.
Pain Points
Meeting with the client, we discussed what did and didn’t work well for them on the existing website, determining their points of frustration and objective for the re-design of the website.
- The client recently updated and refurnished their apartments, but there wasn’t a place to include the new images on the website.
- The client wanted an email address capture method.
- Users had expressed frustration with finding the rental application on the website and the process of having to fill out a Word Doc and email it in order to apply. The client felt they were missing out on applications because of this.
- Furthermore, the client’s method of organizing and cataloguing applications and contacts they did receive was not structured enough and the client would often lose information.
- The client wanted to stand out among similar businesses in the area, and grow their business, but didn’t know how to accomplish that.
- Highlighting the convenience to central campus was very important to the client and it was not hightlighted enough on the existing site.
Website Evaluation
Informed by the information I learned from my client meeting, I conducted an evaluation of their website. I found the 828 Greene website lacked focus and the necessary functionality to meet the client’s goals.
- 828 Greene didn’t have a brand, their logo was typset. This is a lost opportunity for the client.
- The website was text heavy and lacked visual interest.
- Headings did not clarify heirarchy throughout the site.
- The navigation was flawed in its labeling and created a confused flow of information throughout some areas of the website.
- It is a one page website but lacked a “to the top” button or sticky header.
- The rental application and Co-signer Agreement were Word documents that needed to be downloaded rather than an online form or interactive pdf.
- The rental application was not easily found and needed to be a call to action in multiple places on the website.
- The website had an HTTP protocol and within months the HTTPS protocol would be necessary in order to show a secure website. The https protocol would also be necessary for an online application.
- Some headings and labels did not offer a clear description, such as “Within Walking Distance”, “Nearby Locations” and “Paperwork”.
- The target audience was not clear.
- The existing website did not have any images of the apartments available for rent on the home page. There is a virtual tour link, which takes the user away from the website. The tour would load and the user navigate throughs a clickable floor plan to access any images of the units.
Visual Evaluation of 828 Greene Website
2
Discovery
Section Summary
- Develop target audience.
- Identify Brand Attributes to help define the brand and design the most appropriate solution for client and users.
- Research websites of local competitors to discover what they are doing well and what 828 Greene may be missing from their website.
- Establish Goals.
Target Audience
I Established a target audience to help identify the needs and expectations of the user as well as understand them better, ensuring the finished product will benefit them.
Undergraduate University of Michigan Student
- This user is going to be looking for housing close to campus or at least near a bus line and walkable to food establishments.
- This user is a little more independent, but can get intimidated quickly. An easy, straighforward application process that doesn’t require a phone call is necessary, otherwise this user would not apply.
- Coming from dorm living, this user will need a fully furnished apartment.
- Connecting to the voice of the brand is important to this user, as they will want to know it’s a place where they will find like-minded people.
- Seeing a gallery of interior photos on the website is important.
- With the friends they made at U of M, this user will want to know if they can find housing to share with a buddy or two.
Graduate University of Michigan Student
- This user will not mind being a little bit off campus, they are not into the house party scene.
- Older, more independent and confident, this user will want their own space, no sharing.
- A hassle free rental process is a must.
- This user will demand a quality living experience and will appreciate nicer amenities.
- This user will have a car, so parking is a must.
- Being no-nonsense, this user will not spend more time on the website if there aren’t any photos of the apartments and living area.
- This user would appreciate a place to live where they knew they’d be respected and that other tenants would be respectful.
Parent of University of Michigan Student
- This user will want well-cared for and clean housing for their child.
- They will want the location to be convenient to campus, bus and food/entertainment.
- Having a modern, appealing website will make a good impression on this user.
- Having an established brand identity will elicit trust with this user.
- Being able to see a gallery of photos will be important, as they want to make sure their child is living in a comfortable environment.
- This user will appreciate a convenient application process.
What I Learned From My Audience
- Quality housing is paramount. Nicer amenities are a bonus.
- A modern website will imply a business that takes care of not only it’s website but it’s apartments as well.
- Highlighting what is most important to a user, such as location, imagery and amenities is important.
- A brand identity will help establish user trust.
- The website must be well organized and present ease-of-use to provide a prime experience for the user and the offer the best chance of the user submitting an application.
- Making secondary information obvious, such as price, parking and roommate rules is important.
- Having a seamless application process is paramount in the hightened success of the cient’s business.
Brand Attributes
828 Greene’s brand attributes were determined to help define a voice for the brand, informing an appropriate design solution for the client and users.
Six terms were established, choosing the top three and then the term that most described the brand in said category.
828 GREENE BRAND ATTRIBUTES
Competitive Research & Findings
After meeting with the client and going over my evaluation of their website, I began exploring local student and non-student apartment websites. I wanted to discover what was important to these businesses, what they featured immediately and what their brand voice was.
- Competitor websites ranged from extremely simplistic to engaging visuals that spoke to the student audience.
- Most were modern in design.
- Several had a photo gallery of the living space on the home page.
- Several had the Apply button at the top of the page, or a call to action to engage user.
- The websites where student life was represented stood out to me the most.
- A location map was prevelent.
- Almost all competitors had a brand identity.
COMPETITOR WEBSITES
Goals
Re-design the 828 Greene website with the established target audience and Brand Attributes in mind, as well as the objectives of the client. Creating an elevated design with increased functionality and organization flow is the ultimate goal.
- Creating an online application form for potential renters, and an organized method of collecting this information for the client.
- Re-labeling the menu items to minimize confusion while navigating the site.
- Repeating “Apply” as a call to action throughout the website.
- Organizing content so that it’s easily absorbed.
- Redesigning the application, making it an interactive PDF.
- Incorporate a gallery of images on the home page.
- Adding an SSL certificate to transition to an the HTTPS protocol – necessary for any online application.
3
Ideation
Section Summary
- Use collected research to informed the creation of wireframes and site map, present to client.
- Determine final site map and wireframe based on client feedback.
Wireframes & Sitemap
Collected research was used to inform wireframes and sitemap. Below are wireframes and two sitemap options presented to the client. The client decided on the simplified sitemap, and wanted to see higher fidelity mock-ups of the wireframes featuring the Apply call to action throughout the website.
WIREFRAMES
SITEMAP
4
Design
Section Summary
- Begin logo design, present three logos to client, determine final logo.
- Use information learned from Target Audience, Brand Attributes list and final sitemap and wireframe concept to begin design.
- Hi-fidelity mock-ups are created from multiple design iterations.
- Mock-ups presented, client chooses final design.
- Develop Style Guide.
Logo Creation
828 Greene needed an identity to represent their brand. I presented my initial designs and the client was drawn to a bolder, simplistic and modern approach.
FINAL LOGO CONCEPT
Design
Using information learned from my Target Audience and Brand Attributes, and guided by the wireframe and sitemap, I began designing the website. Initial design iterations developed into three final concepts which were presented to the client. The chosen concept is highlighted below.
INITIAL DESIGN ITERATIONS
FINAL DESIGN CONCEPTS
Style Guide
A Style Guide was established for the new 828 Greene website. This guide will help maintain project uniformity throughout the design, guiding the user through a streamlined flow of information and creating a sophisticated look.
Color Palette
828 Greene’s original color palette was maize and blue, fitting as they house UofM students and are registered with the University of Michigan off-campus housing program. I chose to use the same color palette, but in a bold, modern way.
Typography
To match the bold color palette, I chose to use a modern, sans-serif font.
Logo
Logo use on different backgrounds.
Buttons
Static and hover state button use.
Links
Static and hover state link use.
Icon Use
I employed the use of icons to create a more visual flow of information and to avoid the user having to read large portions of text to comprehend specific points.
5
Development & Testing
Section Summary
- Developing website, key components of website and user testing.
Key Components
I began development of the 828 Greene website. The client was familiar with making small edits on the existing WordPress website, so using the same platform was important. I began with a blank theme, using HTML + CSS and plug-ins where necessary to speed up development. The key components of this re-design are an updated contact form and an online rental application.
Contact Form
Contact form with Google reCAPTCHA enabled.
CONTACT FORM
Online Rental Application Form
Online, secure rental application, designed using updated pdf application seen below. The application is broken down into 5 steps so the user is not overwhelmed by the application questions and the number of steps to complete the process is a known factor. Also, the application can be saved at these page breaks and revisited at any point. The online application is opened in a new tab so the user can click back to the home page as necessary without closing the application.
ONLINE RENTAL APPLICATION FORM
Downloadable Rental Application – PDF
The original rental application lacked organization, heirarchy, did not have enough deliniated sections and it was hard to decipher what fields to fill out. I re-created the rental application, organizing the information using heirarchy and blocks of color, creating a clear and simple direction and flow of information. The new rental application was created as an interactive PDF. Both the original and new applications are shown below:
NEW APPLICATION – PDF
ORIGINAL APPLICATION – WORD DOC
Testing
The development phase of the 828 Greene website was nearing the final stages. Testing the website was critical ensure it functioned as desired.
I recruited three testers to screen the website and note any issues they came across or questions they might have. I wanted to make sure the contact and application forms were working, as well as links and popup light boxes. I needed to determine if there were any issues with the responsive behavior across a variety of screen sizes. From the testing results any issues that were found were resolved and the website was ready to launch.
Final Design
The final website was modern and representative of 828 Greene’s target audience. The information structure of the website was easy to comprehend and the functionality improved. The new online application was a success with a 40%+ increase in applications.
Responsive Design
6
Results & Takeaways
Section Summary
- Brief analysis of project outcome and key takeaways.
Results
Since the implementation of the new 828 Greene website, the number of applications recieved (mostly online) has increased by 40%+, more than they need for a school year. The client wrote a letter, thanking me for my work and letting me know how pleased they were with the design and functionality of website. They were especially pleased with the way information was collected from the online application and organized in the backend of the WordPress website.
Key Takeaways
- This was the perfect project for me to improve the functionality of a website as well as my skills in web development.
- I gained valuable knoweledge from this project by familiarizing myself with the set up of a contact form, implementation of an online application, Google reCAPTCHA, transistioning the client’s website from HTTP to HTTPS, and setting up the website in Google Search Console.
- Being able to see the value of my work in terms of an increase in completed applications and to experience a truly satisfied client was very rewarding.
7
Follow-Up QA
Section Summary
- Review client notes / bugs of new website, update where possible / within scope of project. Evaluate the website on my end to determine if there are any issues that need to be resolved before project close.
Follow-Up QA
QA Follow-Up Two Weeks After Product Release
After the 828 Greene website launched I set a 2 week time period, allowing the client to review the website for any bugs and to hear feedback from users. I also reviewed the website during this time period, assuring the website was functioning as intended. The client had minor issues, such as finding the information collected from the online application and a glitch with their interactive tour link. I created a video tutorial for the client, going over everything from how to login to the backend of their website to performing updates and accessing collected information.