Areta Fitted Offices

Overview

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 access to financial institutions, hotels, gyms, eateries, public transportation and a wide range of other facilities within the vicinity.

Role

Persona Development, Interview, Information Architecture, Scenarios, Sitemaps, Wireframing, UI, Prototype, Active Contributor as an Αssistant Developer.

Tools

Pen and Paper, Balsamiq Mockup, Adobe Photoshop, Adobe Illustrator, Adobe XD, Visual Studio Code

The challenge

How can we improve the user experience of an old and out of date website, focused to improve business and the user's standpoint?

Hight Level Goals

1. The main goal of the redesigned was to improve overall the user experience by providing a contemporary look and feel to an established website.
2. Another high-level goal of the website was to create architecture and developing user-centric solutions that would help users and businesses accomplish their goals.

Areta Fitted Offices

The web site of Areta Fitted Offices is a channel for those who want to get an affordable fitted office space for their business. Basically, Areta Fitted Offices UX/UI Case Study is a story in which I describe the process of how I redesigned the website of the company

Research

After the first virtual meeting with the company owner and under those circumstances, I developed some insights based on the interview that are related to their current challenges.

The Goals of the Stakeholder :

Describe the Brand of Areta Fitted Offices:

  • The first thing to remember is to promote the workstations which are paired with some special amenities.
  • Easily navigate through the workspaces and find which of this is available.
  • Be able to communicate easily.

  • The company provides the best workplace experience and also the best overall experience for its employees.
  • The people can come together and work, whether they’re together as a team, or as individuals. Some of theme are freelancers, small businesses, worked in startup, or there are Entrepreneurs.

Some Important Details:

The New Layout Should Include :

  • To begin with, Information Architecture was a bit confused.
  • In the meantime, the website was not responsive.
  • As has been noted, the UX was unclear.
  • The design was inconsistent.
  • The hyperlinks were not easily recognizable.
  • The context was out of date.
  • Missed some important details from the workstations.
  • The contact information missed 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 company.

Heuristic Review

Summarize the usabillity issues
The Usabillity of the Frontpage

What Needs Improvement

The Main UX Goals

  • A better approach to IA.
  • The text of context must be concise, clear and readable.
  • Overall aesthetic. The web site appears out of date.
  • Allow users to explore the most important information.
  • Make the web site looks more corporate.
  • Another key point is content. As an example, we can reduce the space of context on all the pages of the web site.
  • At the same time needs to focus on workstations and provide them on the home page.
  • In spite of the less negative space, we should keep the balance of this and add some other space.
  • Including maps. In fact, the workspaces must be visible.

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

The old design layout of the frontpage
The About page of Areta Fitted Ofices

The goals for redesign

Usability

Business

  • Improve browsing experience.
  • Find the right level of information quickly.
  • 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 make the visitor to communicare easily with the company.
  • Also, the reviews and trusted clients have their own special meaning.

Explore

Persona

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 Eng, 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, the services, and what the company offers. In this case, Amelia should be able to find the content and cons of the information easily and efficiently.

The Persona of Areta Fitted Offices

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

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 on the workspaces? What are the amenities of workspaces? How can we create a positive experience?

The scenarios were helped me a lot to describe the stories and context behind why a specific user or user group comes to the site and I discover that exactly the user wants.

Below, described the main usability issues which came from the website.

In this case, the first priority and the goal were to restructure the IA of the web site.

Design

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

The old IA of areta fitted offices
The old IA
The new IA of areta fitted offices
The new IA

I always find a good idea to create a wireframe at the beginning of my design process. So equally important is to have a clear definition of IA. In effect, at this stage I afford to keep things simple, even I made a few mistakes.

The Wireframes of Areta Fitted Offices

Below are the main goals implement the style and the usability.

Key Points

  • In the first place, I prioritized the content with the visual hierarchy.
  • I selected vibrant and eye-catching colors.
  • Created a color combination that is clearly defined.
  • I made the navigation, simple and clear.
  • Also, I prioritized the reduction of wording.
  • In the end, the web site used a strict layout of pages with the same design for instance fonts, button placement, etc.

  • As a matter of fact, I created a responsive web site by the interface.
  • Defined and on the other hand implement the IA.
  • In addition, I helped to write the content of the web site.
  • Clear separation of the text links.
  • Another key point was to using WordPress as a CMS to manage the web site easily.
The design system of areta fitted offices
The design system of Areta Fitted Offices.

High Fidelity Prototype

Then comes to the design process, which is not changed from the wireframes concepts. In fact, I wanted to maintain Areta with a clean design using some contrast colors.

the featured image of high fidelity design aretaoffices
The High Fidelity Prototype of Areta Fitted Offices

Areta Fitted Offices UX/UI Case Study: The Results

The website had a 25% higher conversion rate. Also, we received fewer enquires about how the visitors can see the available workstations, which shows me that the new design is easier to understand from the aspect of users.

My main takeaways :

In the end of the Areta Fitred Offices UX/UI Case Study , I want to tell the main takeaways.

  • In fact, I learned to trust my team-mates. From the Product Manager to the Content Writer, and of course the Maintenance developer.
  • Also, the weekly stand-up meeting was the key to the project’s success.
  • When I understand the user needs then it was easy for me to create a user-friendly WordPress theme, in the backend.
Visit website