Sicos

THE SICOS WEBSITE REDESIGN

Techniques : Empathy Maps  Persona  User stories  Brain Storming  Free hand sketching  wireframe  Prototype 


Date December 2017


Role UX  designer 

SICOS 

I was involved in the in-house design team, my role consisted of designing and building information architecture and re-designing the company’s web site, also I worked closely with an in-house web developer to accomplish this project.

Sicos predominantly works within the crypto space, by guiding companies through the process of planning and implementing raising capital for their individual projects, this is done via public and private token sales and achieved by creating an initial coin offering (ICO). Sicos provides services around token economics, technical advisory, strategy development and providing legal knowledge.

Challenge 

One of the biggest issues that we had to confront was that the stakeholders and heads of department had different views on how they envisioned the new site would look.

Key objectives gaining an understanding of how the new site should be reconstructed and recognising which contents needed to be updated.

Liaising with different departments to gain a favourable outcome.

Working within extremely short timelines, due to Christmas break.

The Approach

Usability evaluation

I decided to carry out a usability evaluation of the website, to gauge an idea of what areas needed to be improved. I enlisted the help of few individuals.

The feedback from the users, was that they were mainly confused by the contents and that the explanation of what the business offered in services was extremely unclear.

Also, some of the users were confused when they first arrived on the home page as it was not clear that this site catered for professional financial services within the crypto space, this led the user to double check that they were on the correct page.

I also conducted my own personal usability evaluation of the website and came to the same valuation as the above.

My analysis was that the website did not provide the user with adequate information. The overall theme of the site from a UI perspective was completely misleading for the products they wished to promote.

Stakeholder Interviews

This project would ultimately reinvent the digital presence of Sicos in the crypto space. I interviewed the CEO and other heads of departments to identify their needs.

The key objectives that were relayed to me, was that the stakeholders wanted the site and all its features to be completely revamped and to be more competitive within the crypto space. The ultimate goal of the stakeholders was to have a site that was easy to navigate for potential new business users and to promote and showcase past projects, additionally they were concerned that the site had far too ambiguous content that was cluttering up the site.

Furthermore, they were also in the development stage of creating a new platform for an up and coming new product, which they wished to promote via their website.

Takeaway from meeting

  • The users had trouble interpreting content
  • Stakeholders wanted to make the site more interactive
  • Stakeholders found it hard to attract new business through their present site
  • Stakeholders wanted to promote their new products

Before

Empathy Map

To gain a deeper understanding of the user, I employed the methodology of creating an empathy map. The empathy map is a collaboration of visualisation used to articulate what we know about a particular type of user. This resource helps me to create a working hypothesis, one creates a shared understanding of the users’ and needs, and two aids in the decision making.

Persona

To create a persona, I would normally deal directly with the users, using standard research methodology i.e. questionnaires or discussion groups but unfortunately, in this scenario we were unable to deal with past clients.

So to overcome this hurdle, we conducted in depth interviews with the stakeholders and heads of departments, this enabled me to build a working hypothesis of the persona. During these interviews we managed to gain a understanding of the client base and from the data that was gathered, I was able to create a working hypothesis of the below persona.

User Journey 

A user journey represents a sequence of events or experiences a user might encounter while using a product or service. A user journey can be mapped or designed to show the steps and choices presented as interactions, and the resulting actions.

User journey

User Stories

User story is a short statement or abstract that identifies the user and their need/goal. It determines who the user is, what they need and why they need it. There is usually one user story per user persona.

I worked with the persona information, to create a basic user story.

Example user story: As a user, I want to be able to seek out relevant information regarding token economics. So, I can review the information for my upcoming project.

Design of Information Architecture

The methodology of designing a good IA, is to have a complete understanding of the user and what they require.

In this project, we needed to promote new business and capitalize on existing projects.

I incorporated the logo of a current project onto a navigation button. Once the user had clicked on and entered the next page, they would be presented with short text and an intro video of the client’s product. In the second phase, I added an additional navigation button which would take the user directly to our client’s home page, where they consider any additional information that they require.

I felt this simplistic navigation system achieved promoting new business by viewing existing business. Also, this solution provided interaction between the user and the system.

Brain Storming

We had a white board session, to kick around ideas on how to structure the site, also we had discussions on how to incorporate more interaction into the navigation of the site. From these sessions, I started to sketch out ideas on to the whiteboard. This in turn created a visual presence for the team.

Brain Storming Rough Sketching ProcessSlide HeadingI am slide content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Click Here

Sketch

I started to draw a few sketches of possible layouts that could be considered for the new design. These were loosely based upon previous white board sessions. I wanted to demonstrate the premise of what the homepage would likely look like. I wanted to get a feel for how I could get the user to interact with the site so I sketched out a simple button design which would guide users to past and present projects.  To illustrate the individual project pages, I sketched out simple contents box and added a media channel and a link to the client’s home page which could double as the token sales page.

I also sketched out a simple contact form that can be used by the clients for information requests.

The concept of a wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose

Here are a few basic wireframe designs, that myself and the developer worked from during this process.

Click HereClick HereClick HereClick HereClick Here

Site Map 

A site map is a model of a website’s content designed to help both users and search engines navigate the site. A site map can be a hierarchical list of pages (with links) organized by topic, an organization chart, or an XML document that provides instructions to search engine crawl bots.

I created the site map showing the potential structure and page names, and this was agreed in a stakeholder meeting.

Prototype

The prototype was created, to make sure that the methodology of the site followed page by page. This also helped us to understand if there were any fundamental issues with the navigation for the site.

Access to my Protoype 

https://sketch.cloud/s/rMRl7

Building the site

I collaborated with our in-house developer, to create a more professional theme by customising the look and feel of the site.  By using HTML/ CSS and also JQuery plug-ins, this enables the team to modify the layout of the site pages. We decided to incorporate advanced CSS to rotate images of team members on the team page, when the user hovers the mouse over the individual team members image, the image rotates 180° showing the team members credentials and contact information.

I also added some custom features for the home page, creating interactive buttons which created a shortcut to the client’s projects.

After https://www.sicos.io

Usability testing

We carried out some usability testing with a few members of our team, who were not involved in this project.

The Results

The new incarnation of the site was successfully launched. The new design solved all the main issues that had plagued the original design. The contents are now clearer and easier to read and understand, this eradicates any ambiguity for the user.

The introduction of the navigation buttons for past and present projects, this has drastically improved the usability of the site for the research for potential clients.

Challenge

The stakeholders wanted to move the timeline of completion of the site up by a few weeks, so  the launch of the website which would coincide with a crypto event that they were attending. However, this was not possible as some of the heads of departments had not submitted their final drafts of content for the site. Which unfortunately in turn caused delays.

What would I do differently next time

I would have held a few more stakeholder interviews to make sure that every team was running on the same time line, this in turn would hopefully have prevented serious delays.

If we had more time I would have conducted a more extensive user testing, in this scenario I would run a tree test to find out how the existing IA is performing. The data from the tree test would give me a bench mark to work from. Once I have analysed the data I would further validate my hypothesis by running an open card sort session which would give me a greater understanding of the users and how they organise the content in the way that makes sense to them.

With regards to the prototyping issue I would have preferred to have created an electronic prototype, this would have enabled me to observe the users interacting with the website, I would then use the results to shape the design further.

Finally the late UI changes I believe I should have been a little bit more forthright with my observations, I did in fact explain the ideology of hick’s law to the stakeholders, however I was over-ruled. Unfortunately, with the multiple animations running in the background of the homepage and coupled with confusing colours this in turn caused too much distraction to the user.