Spazio Italiano website and branding update

Update of Spazio Italiano Website and its branding
Category
UI/UX Design - Front end development
Role
UI/UX Design - Front end developer
year
Aug 23 - Jan 24 (6months)
Tools used
INSIGHT

Spazio, an Italian language center, faces challenges in customer attraction, visual appeal, and user engagement on its current website. The goal is to reevaluate the workflow and propose a design solution that enhances the user experience, especially for first-time users wanting to enroll their children.

BACK STORY

Spazio, an Italian language center, currently faces challenges in attracting customers/partnerships. So how can we bring community to our product?

SOLUTION

Establishing a well-organized website with a clear articulation of the company's values, aimed at persuading new parents to enroll their kids and fostering increased partnership opportunities.

BEFORE AND AFTER

SUCCESS METRICS

MY APPROACH

The whole project was divided into 5 phases:

CLIENT / BUSINESS GOAL

The business goal is to attract more customers, opportunities, partnerships and provide a better website user experience for busy parents.

“I arranged a zoom meeting to gain a deeper understanding of the business owner's objectives, the company's branding and goals, current challenges, and anticipated aspirations.”

It was crucial to capture the company's essence during the meeting and, noting core values, owner's vision, and their preferences inspired by examples from similar companies.

3 IMPORTANT INSIGHTS FROM MEETING AND WHAT THE OWNER WANTED

USERS RESEARCH INTERVIEW

Current users expressed difficulty and confusion while navigating the website. Many were unsure of the website's purpose and found it to be overly busy, lacking a clear call to action.

“I aimed to understand the experience of current Spazio website users and their feelings while navigating the site. These interviews helped me identify the issues that need to be addressed.

The following questions were asked:

How was the navigation?
What do you think should change?
Do you think as a first time user, you are convinced to bring your child there?
How did the navigation make you feel?
What made your experience harder or easier?

"Here are the answers I received:"

3 IMPORTANT INSIGHTS FROM SPAZIO USERS AND WHAT THEY WANTED:

DEEP ANALYSIS OF THE CURRENT WEBSITE

" While completing this task, I meticulously observed each screen, seizing the opportunity to identify potential inconsistencies or usability issues crucial for determining the ultimate design solution. "

The website is not adaptable for phone and iPad sizes, resulting in a very small navbar that is difficult to read on devices other than computers.

" Along reviewing the website flow, its overall performance in terms of engagement was reviewed and I found that ":

After this in-depth analysis, it is clear that the solution has to feature:

COMPARATIVE ANALYSIS

" I extensively analyzed competitors, concentrating on strengths and weaknesses to understand user experiences. Specifically, I scrutinized La Scuola International and Instituto Italiano La Scuola, aligning closely with Spazio in language center services and offerings."

Both competitors had busy pages that proved to be inaccessible and distracting.

Spazio has a historical track record of being a favored choice for enrollment by families of Italian origins, as indicated by the owner's records.

Busy parents with hectic schedules have consistently enrolled their kids in Spazio's summer, spring, and fall programs. Morning activities are designed for children under 3, while afters-chool programs cater to kids aged 4 and older.

" Focusing on potential use cases, I prioritized the one reflecting challenges for first-time users, like parents enrolling their kids and navigating the website for the first time. This scenario is chosen as it mirrors a common user experience when visiting the website. "

PERSONA

STORYBOARD

" I aimed to visually map the user's experience with Spazio's website. My goal was to illustrate user interactions, anticipate scenarios, and use sketches to explain actions and outcomes at each stage. "

JOURNEY MAPPING

" After analyzing the current website and having gathered enough insights , I turned to my sketchbook to begin creating rough concepts for the identified opportunity areas from my analyses. To initiate this process, I needed to translate these opportunity areas into specific features. "

PRODUCT STRATEGY AND PROPOSED SOLUTION

After conducting thorough research, here are 3 simple solutions to address the identified issues and update Spazio’s current website:

CONCEPT GENERATION / SKETCHING

" Sketches play a crucial role in swiftly visualizing my design concepts. They enable efficient communication of my design ideas and allow for the exploration of multiple iterations before finalizing a concept. "

WIREFRAME

" I aimed to keep the wireframes simple, concentrating on connecting the site's information architecture to its visual design by illustrating paths between pages."

Phone

Ipad

Computer

USER FLOW

INFORMATION ARCHITECTURE

Biweekly meetings were established to ensure alignment with the design direction, address any questions, promptly adapt to changes or new information, and escalate issues when necessary.

Maintaining constant communication ensured accurate information and enabled me to stay on track with the design or to adjust to any changes quickly.

ALTERATIONS

The feedback received during the biweekly meetings proved exceptionally valuable. Each modification and additional piece of information were incorporated to shape what is now the final design :

Alterations 1

Alterations 2

A/B TESTING

For the initial round of testing, the prototype was distributed to a total of 15 current users and families familiar with Spazio, including those who had previously enrolled their kids there. Participants were asked to share their overall experience with the site and to identify which of the provided options offered a better user experience.:

Test 1

Interesting Insights from Test 1

Having the text with important informations highlighted provided a better user experience.

Despite efforts to incorporate user feedback in the design, the owner preferred the non-highlighted option.  How can the stakeholder be convinced on making this important change/design decision?

A meeting was arranged with the owner to stress integrating user feedback into design. I proposed shorter paragraphs for readability without highlighted text as a compromise.

Test 2

Interesting insights from Test 2

Being a able to manually control the movement of the pictures allowed users to better focus on reading, looking at the pictures for as long as they wanted and overall a better user experience.

FINAL DESIGN

BEFORE AND AFTER

MEET SPAZIO ITALIANO

CHALLENGES

Unexpected Deadline Change

While working on the design, an unexpected deadline change required me to expedite the project. I promptly reorganized my tasks, prioritizing those with immediate impact, such as seeking help and collaborating with another developer. This strategy allowed me to finalize and deliver the project on time despite the time constraint.

Convincing stakeholder of making changes based on users feedback

Emphasizing the importance of user feedback in the design process to stakeholders was challenging yet crucial to creating a product that users will love and that will generate revenue in the long run.

IMMEDIATE IMPACT

What does the website now have that it didn’t have before?

SUCCESSFUL OUTCOME AND GOAL ACHIEVED

The goal was successfully achieved, and the solution used effectively addressed the problem by increasing Spazio's partnerships.

The increase in partnerships and clients following the implementation of changes indicates that the goal was achieved and the problem was addressed effectively.

ACCESSIBILITY

Successfully created a product accessible on all devices with enough color contrast and scannable content.

Designing a website that is accessible across various devices has not only improved the accessibility of the site itself but also enhanced the visibility of its brand.

CONCLUSION

The client was satisfied and happy with the final results. They were able to use the product immediately and present it to stakeholders during important meetings.

Working on the Spazio website was both challenging and rewarding. It was challenging because it was one of my first 360-degree website projects that I designed and developed. I faced stress while dealing with unexpected issues and had to figure out solutions quickly.