Walk With Web

AT A GLANCE

I worked on the technical team at an academia startup called Walk With Web that collaborates with various authors, universities and companies to create databases to digitize (mostly African Studies) archives and present research. I re-designed their website to be more user-friendly and entice future collaborators to work with the company. I was given full creativity to re-invent the website, but also needed to uphold the already-existing fonts and color palettes.

My Role

UX Designer

Tools

Figma

Team

Joanne Rego

Maria Yala

Timeline

4 months

PROBLEM SPACE

The organization’s website at the time was not very user-friendly, cohesive nor complete. It needed a re-design and design of additional pages to show proficiency in creating websites and databases to prospective clients for an increase in clients and funding. They also required a space where current employees could access important organizational information.

DESIGN GOALS

Entice prospective partners to work and collaborate with Walk With Web.
Create a space where current employees can access organization information.
Make the website more thematic and reflective of the company’s vision and purpose.

TARGET USERS

Current (but especially) future clientele (Primary)
Company employees (Secondary)

IDEATION

There were various parts of the website I needed to tackle, but the home page was the most important one as it was the one clients would see first upon landing. Points that helped with ideation are:

Company’s key selling points of Digital Development, Creative Design, Sustainability Solutions, Thematic Approaches, and Research Development.
Already-existing motifs of the color palette black, blue and white, and the organizational logo of a stick figure walking.

Although there was minimal research needed in terms of user wants (as it was a small company and mostly company employees would be providing feedback), I still decided to research other companies and digital databases that provided similar services to Walk With Web, and found that visually there was a conveyed tone of each company’s purpose. I decided that the tone for the company would best be conveyed via a slideshow of projects with clients that had already been completed which would also fulfil the design goal of the small company showing competence to clients. Furthermore, to incorporate the company’s ‘Thematic Approach’ to African Studies while still maintaining malleability for projects in different areas of research, I added the outlines of the African continent to the corners to add to the aforementioned (and researched) conveyed visual tone.

LO-FI SKETCH

HI-FI PROTOTYPE

FEEDBACK

I presented the first ideation design to the technical team and CEO and got their feedback. They:

Liked the idea of having a project slideshow being the first thing showcased on the landing page because it was enticing and functional, they also suggested it take up the full screen.
Suggested that the project slideshow be shown after the key selling points, and that the landing page showcase of projects be more of a video capturing the essence of the company.
Encouraged more creative ways to showcase and implement the key selling points (under Getting Started) instead of the original design.
Believed that while the African map on the corners was an interesting concept in showcasing subtlety of theme, the potential landing page video might do a better job.

IDEATION 2.0

After taking the feedback into account, I did some more brainstorming. I explored re-designing the selling points into a staircase where each step would represent a selling point and the overall staircase represents the process of the company ‘walking’ with clients and building something together step-by-step to reach their end goal. Furthermore, I thought the idea could integrate the already-existing stick figure logo climbing up the stairs, thereby conveying inclusivity alongside the inclusive language of ‘Walk With Us’ playing on the organization’s name and heightening the message of close client relations.

HI-FI DESIGN 2.0

Feedback

I presented the revised design to the team and got the following feedback. They:

Loved the idea of the stairs being selling points and progressing through the process with the client, alongside the inclusive language and themes.
Wondered if there was a way to incorporate a longer landing page and a sleek scrolling experience with animations, similar to the Apple website.

FINAL HI-FI DESIGN

Taking all the feedback I received, I tried coming up with ways to elongate the presentation staircase selling points on the landing page. I had an idea of instead of a staircase to have floating boxes with an animated line going through, connecting the boxes and cascading down with the stick figure trying to navigate to each box (almost like a video game). This would not only showcase the organization’s creativity, but highlight their technical skills in website creation in general, thereby proving competence and enticing prospective clients.

This got the final approval from everyone and developers were able to code the animation of the line appearing and cascading down the boxes.

Before

After

USER FLOW

Since the Home page was complete, I had to design the remaining pages that needed to be created alongside their flow; these included:

A Projects page which would showcase thumbnails and links to individual projects, and people responsible for those projects.
Pages for each individual projects with links taking them to the project websites, and project contributors (with respective links to their pages).
Teams pages for the core team, collaborators etc. and links to people’s individual pages.
Resources pages for current organization employees, including a directory where each entry directs to a person’s page.

WIRE FLOWS

I created the new Team, Projects, and Directory pages using the same color palette and fonts throughout. The thumbnails for projects and people were kept consistent across all pages, so as to not disrupt user flow.

RESOURCES PAGES

After designing and creating many pages, the last pages were the Resource pages where one could access reports and careers, and current employees could access forms and the staff login. Although not much was specified nor required from this, the color palette and fonts stayed consistent to the whole website to showcase flow and continuity while keeping to the thematic structure set in place.

View Live Website

MY OVERALL IMPACT

Although difficult to deduce any concrete metrics from the website due to the small size of the company, qualitative feedback from co-workers and bosses claimed that not only were they glad the website was finally complete, but that it flowed well together and was aesthetically pleasing, and the design choices made would impress the tentative clients signing on with the company. Pages for organization employees were also appreciated and started being used, letting the website act as a central hub for the company.

Problems That Arose

The main hurdle was that research of user experience or any semblance of feasibility testing was difficult to achieve because it was internal employees reviewing the website and so the project lacked fresh eyes for opinions.

What I Would Have Done Differently

I would have fought harder to eliminate the design requirement that every first letter in every title be blue (I personally do not find any function for it).
I would have concretely clarified what the website design goals were to begin with. I found that I was scrapping together the general direction that was given to me, and cultivated my independent idea of how I perceived the company wanted to grow and be presented.