Areta Fitted Offices

Overview

In this project, I worked on redesigning the web site of Areta Fitted Offices. This case study explores the process of redesigning the Areta Fitted Offices web site to enhance user experience. My challenge was to improving the IA structure and usability from the user and business standpoint. My focus was redefining the Information Architecture and developing user centric solutions that would help users and business accomplish their goals.

Client: Areta Fitted Offices at The Octagon offers affordable fitted office spaces for your business use right in the prime location of Singapore’s Central Business District with easy accessibility to financial institutions, hotels, gyms, eateries, public transportation and a wide range of other facilities within the vicinity.

Role

Redesign Information Architect so the people can easily navigate to the website. Improve the user experience. I use WordPress for CMS, so it is to manage back end content. Custom WordPress theme design and development. Responsive design using my own CSS framework for targeting multiple device and dimension.

Tools

- Adobe Photoshop
- Adobe Illustrator
- Adobe XD
- Visual Studio Code

Areta Fitted Offices

The current experience

The web site of Areta Fitted Offices is a channel for those who want to get an affordable fitted office space for their business. This story is a case study of UX/UI which I describe the process of redesign the web site of the company using WordPress.

Discover

Purpose of the work process

After the first meeting with the company and under those circumstances, I developed some insights related to their current challenges. Another key point is that I developed what the users were currently experiencing with Areta Fitted Offices web site.

The goals of the stakeholder :

Adjectives which describe the brand of Areta :

First thing to remember is to promote the workstations which are varied with some special amenities.

  • The company provides the best workplace experience and the best overall experience for its employees.
  • The people can come together and do work, whether they’re together as a team, or alone as individuals.

In details users have troubles with :

The content should include :

  • To begin with, the Information Architecture, is a bit confused.
  • In the meantime, the design is not responsive.
  • As has been noted, the user experience design is an unclear.
  • The design have an inconsistent.
  • The hyperlink texts are unclear.
  • The context become disorganized .
  • Missing details of the workstations.
  • The contact information is missing from the web site.
  • Clearly business goals.
  • In detail the description of every workstation, with the prominent images in attention to features.
  • A form, which the visitor should book a tour.
  • Pricing and the availability of workstations.
  • In particular, the visitor of the web site should have easy communication with the side of the company.

However, the current web site of the company has some stern usability and serious IA problems. This make it really challenging for the visitors to archive their tasks accurately reflect and of course, quickly.

The about page of Areta Fitted Ofices

The goals for redesign

Usability

Business

  • Improve the browsing experience.
  • Especially, the navigation to allow the users to navigate and find the information that they want.
  • It is important to realize that workspaces are the main drivers of the company.
  • For the most part, the web site should focus particularly on the description of the workstations and the easy communication of the visitor with the company.
  • Also, the reviews and the trusted clients have their own special meaning.

Define

How might we…

This step is focused to improve the aesthetic and the site structure of the web site, so that visitors can easily understand what is the main focus of the Areta Fitted Offices. Why they should visit the place? How can they find the information that they need to plan a visit? Also, how can they find the information of the workstations? How to create a positive experience?

Persona

Understanding the user needs.

At this instant, based on the goals of Areta Fitted Offices, in fact, I determined two types of users and their primary use of the web site. That is to say that we have two types of users.

On the one hand is Marcus, who is already an active user. Marcus uses the web site to find and rent his workspace. Also, he needs to efficiently browse through the workspace and rent it easily.

On the other hand, is Amelia. On the contrary, Amelia is a new member and she wants to learn more things about the company. Also, she wants to learn more about the services and what the company offers. In this case, Amelia should be able to find the content and cons of the information easy and efficient.

This helped me a lot to prioritize the pages to emphasize for redesign and discard pages that don’t meet users needs and goals.

Marcus and Amelia, Persona Development

Proposition

What needs improvement

The main UX Goals

  • Better approach to information architecture.
  • The text of context must be concise, clear and useful.
  • Overall aesthetic. The web site appears out of dated.
  • Allow the users to see where is the needed information.
  • Create a responsive web site.
  • Make the web site to look like more corporate.
  • Another key point is content. Reduce the words on all the pages of the web site.
  • At the same time needs to focus on workstations and provide them on the home page of the web site.
  • In spite of the less negative space, we should keep the balance of this and add some other of space.
  • Add maps. In fact, the offices of the company must be visible.
The proposition of the old web site (home page) of Areta Fitted Offices

Develop

In this case, the first priority and the goal were to restructure the Information Architecture.

It may not be sexy, but information architecture is the backbone of any good user experience.

aretafittedoffices-old-ia
The old IA
The new IA

The wireframes

I always find a good idea to create a wireframe at the beginning of my design process. In effect, at this stage I afford to keep the things simple, even I made a few mistakes.

The wireframes of Areta Fitted Offices

Deliver

The style Guide

The usability

Goals

Goals

  • Prioritize the content with the visual hierarchy.
  • Vibrant and eye-catching colors.
  • Create a color combination which is clearly defined.
  • Make the navigation, simple and clear.
  • Priority the reduction of wording.
  • The web site uses a strict layout of pages with the same design for instance fonts, button placement, etc.

  • Create responsive web site by the interface.
  • Define and implement Information architecture.
  • Write the content of the web site.
  • Have a clear separation of the links.
  • Another one point. Use WordPress as a Content Management System to managing web site easy.

The style guide

I maintained Areta Fitted Office’s original branding color which is red (#F73859) while shifting to a more clean and modern look feel. By the same token, the web site must be inclusive and attract the user’s attention to get the collaboration space.

The basic color palette of Areta Fitted Offices.

Typography

Basically, the typography is one of the hardest part of the UI design. I always remember that beside of every aesthetics we

I used two fonts instead of one font, which was used on the old web site. “Playfair Display” is the font which used for the headings. On the other hand, “Lato” is the font which used for the body.

“Playfair Display” is a serif font as well as a classical typeface. This font, has a modern feeling and gave designs the elegance they need. At the same time, “Lato” is a sans-serif font, which rendered beautifully on the browser, with good readability.

The typography for headings and body text.

Buttons

The buttons are designed in such a way as to grab the attention of the users. In like manner, helped drive them in a particular direction such as workspace, contact, etc.

Also, the textual links are colored and underlined to achieve the best-perceived affordance of clickability. Equally important, is the color. The links on hovered and visited have different color.

The Form style guide of Areta Fitted Offices
The new homepage of Areta Fiited Offices
Visit website