Overview

This website redesign was tricky to navigate; endlessly iterative, oftentimes frustrating, and completely fascinating with a steep learning curve. The key challenge was to rethink our brand image and identity. Shehri is a startup only two years young, and is currently undergoing a branding shift and the new designs needed to reflect that change, while still maintaining the essence of Shehri: an organisation which provides synthesised civic-education information and legal aid, especially to minority groups, in hopes of empowering the citizens of Pakistan. This posed a unique challenge and opportunity: how should the designs strike a balance between being a civic-education information and legal aid organisation with a growing design and animation studio? The goal was to showcase the design side of Shehri, without distracting from the work that we do. 

My Role

  • Information architecture redesign

  • Illustrations 

  • Digital wireframes (mid-and-high)

  • Animations and micro-interactions 

  • Handoff

  • Sketch

  • Illustrator

  • After Effects

  • Kite

Tools

Starting Point

Below are some examples of the website as it was at the start of the project.

Home

Hamburger menu appears, on hover, not as an overlay but pushing the tiles to the right, outside the bounds of the screen

Hover feature flips the tiles to reveal details about the content of the tile

About Us

Our Work

Campaigns we have worked on

Updating Information

Architecture

The first step was to examine the content of the existing website. Previously, none of the pages were grouped by theme or topic. Each page was isolated from the other(s), and users would have to go back to the landing page to access the complete list of topics to choose from. My goal here was to create a list of information elements on all the pages and classify them by topic and sub-topic. I created headings and subheadings, and categorised all the text and media files. After labelling and categorising all the existing data, I approached the director of the organisation to see which topic(s), if any, needed to be updated. 

 

In the meantime, while the content was being updated, I conducted usability testing to identify all the existing pain points. 5 participants, separately, were asked to explore the website and speak out loud whatever it is they’re thinking and feeling as they experience the website. My goal was to find out:

  • How do users find information?

  • Which navigation components are utilised?

  • Which navigation components go unnoticed?

  • Which navigation components are avoided?

 

Perhaps the biggest challenge during the usability test was to make sure users focus more on the navigation and flow of the website than the interface and design. 

 

The results revealed that users: 

  • Feel overwhelmed as soon as they arrive on the landing page

  • They don’t know which 'box' to focus on

  • They felt really frustrated that there was no header/navigation on top of the page and that they had to go back to the landing page to access other parts of the website 

  • 3 of the 5 users did not notice (and therefore, access) the vertical navigation bar on the left

  • The colours and the design "don’t make any sense"

  • After choosing the ‘box' they wanted to access from the landing page, users quickly abandoned searching/choosing and instead just randomly chose any 'box' they felt like

 

A consensus of all the 5 users was that they still don’t know much about what our company does. At the end of each test, I would ask participants if they have a better understanding of what Shehri does than when they did before accessing our website. "They make animated videos on laws of the country”. And this statement was said out loud more as a question than an answer. So I was able to identify the problem(s) that needed addressing. 

 

The next step was to create an information architecture for the website. 

 

The feedback from the usability tests showed, very clearly, that even after going through our website, the participants did not know much about who we are and what we do. And because these participants were not familiar with our company prior to the testing, I believe they left with a very bad first impression. 

 

First order of business was to create a logical flow of the website; to categorise and label pages and information in an intuitive way. The reason I went with using the closed card sort method for this task was, in my initial meeting with the project manager and the CEO, they explicitly said that "Helpdesk" and "Videos" are two of our most important features. Accordingly, I made separate pages for each, so they’re easily accessible by a single click. "Contact Us" was going to be a separate category as well. All the remaining pages were to be sorted into two categories: About Us and What We Do. The results of the card sort were unanimous, and the entire process of card sorting, first time for the entire office, was really fun to conduct! 

 

In addition to the existing pages and information, I presented a case for adding an additional feature (and subsequently, a separate web page): Shop. I had noticed that we had merchandise lying around at the office: notebooks, pens, tote bags, posters, notepads made from recycled paper etc. If the website were to create a new brand identity, I proposed that we make available our merchandise to people as it would: 

  • Make people visit our website

  • An opportunity to connect with our target audience 

  • Because we make different kinds of illustrations and animations, there are a lot more opportunities of creating new merchandise 

  • We could integrate the shop feature with our app (currently under development): users of our app would collect 'Shehri points' through our app (by sharing our videos, for instance), which they could in turn use to purchase our merchandise
     

After adding the Shop page, all the categories and sub-categories were complete. Because this is a relatively small website which would mainly serve as a catalogue of our work, I decided to use hierarchical navigation to make it quick and easy for users to access the information they are seeking. 

Design Problems

The previous user interface and design of the website played a big part in not allowing for a pleasant user experience. The usability test showed that participants felt overwhelmed by the landing page; not a good starting point. When asked what exactly made them feel overwhelmed, they mentioned “too many colours”, “too many boxes” and “too much text”. Taking this feedback a step further, I noted a few other design problems that needed to be addressed: 

 

  • The typography needed to be standardised - the text was of different size and not aligned in a uniform manner
     

  • The vertical menu on the left mostly went unnoticed, and the options available were not the same as the one on the main “blocks"
     

  • The types of illustrations used do not belong to the same family
     

  • There wasn’t any primarily colour; no way of separating elements in terms of priority hierarchy
     

  • The text on the boxes does not give a clear enough idea of what the page would be about, until the mouse would hover over the box, it would turn, and would say what the box is about
     

  • No navigation bar 
     

  • No breadcrumbs navigation 
     

  • Design not aesthetically pleasing 
     

  • No use of grid, and the design not asymmetrical on purpose either 
     

  • Pages are not interlinked - users have to go back to the landing page, or choose from the menu on the left (which 3 of the 5 participants in the usability test missed)
     

  • The menu on the left and the boxes use different text for the same page, making it confusing for the user
     

  • The Join Us page provides no email or form fill to contact our company 
     

  • Bottom bar taking up too much space 
     

  • Upcoming campaigns page: all the information is on a banner that moves automatically, not giving the user ample time to read the entire thing. They have to manually click the button on the left to go back to the text. Also, it only shows one project at a time, which increases the risk of users abandoning the website/page without having a chance to read all the upcoming projects we’re going to offer soon
     

  • Animations (videos page) not categorised by type of animation, subject matter, or campaigns
     

  • 'Our Team' page was empty because, due to privacy concerns, a lot of our team members felt uncomfortable having their picture up on the website

Illustrations

Below are some of the illustrations I made for the website, keeping in mind the brand of our company and our target audience. 

Mockups

Mockups of some of the web pages, made in Sketch.

Animations

Moving Forward

Since its inception, Shehri Pakistan has come to be associated with brightly coloured animations and illustrations. The main goal behind this project was to translate these characteristics into the design and outlook of the website, while streamlining the information architecture of the website so it provides for a delightful user experience. For us, these colours and designs represent the creativity and core messaging that we infuse in our work everyday - they’re our core brand identity, and is what separates us from our competition. Ultimately, what I hoped to achieve was that when visitors land on our website, they should feel like they are getting to know us, with illustrations and a colour palette that’s authentically Shehri. 

 

An important takeaway from this project was the importance of having developers on board from the start. I was the first (of now only two) UX/UI designers at our company, with no in-house developer(s) at the moment. After creating the mockups and animations, I contacted a freelance developer to code the website. After countless meetings and discussions, I can now say that designing without at least one developer present, in this case at least, led to some overly ambitious designs that would take a lot more time and resources to execute. 

 

Still, it was an amazing learning experience. I ended up tweaking the design to make it easier for the developer to execute, while still maintaining the essence of the designs. We went 3 weeks over the deadline, and I made sure to keep our CEO in the loop about why this project is taking more time than expected. Ultimately, the website was published with a few edits in the design; for better or worse, and definitely crucial, to get the project past the finish line. Moving forward, I intend to create designs by keeping (any) technical limitations in mind from the start, to save time and resources spent on re-designs, and focusing more on meeting deliverables on time and the smooth running of the entire project overall.  

URL

Thank you

View more projects:

Ahsan Iftikhar |      2018

  • Artboard Copy 4
  • Artboard Copy 5