Overview
Goal: Redesign the existing company website and improve navigation
Role: UX & UI Designer, User Researcher
Tools: Pen/Pencil & Paper, Adobe XD, Photoshop, Whimsical
Timeline: 2-3 weeks
Process: Research → Define → Ideate → Design → Test
Background
Placematic is a startup company established in 2010. They are an expert in the field of building innovative solutions that use and integrate spatial information to improve the efficiency of business processes.
The company creates products based on the latest technologies. They also provide a set of map solutions and services based on spatial data analysis.
They needed a modern responsive webpage that was visually consistent, informative and easy to navigate.
Research and discovery
Webpage audit
Competitive Analysis
Stakeholder interview
User interviews
I set up a research plan and set up of several goals:
Become familiar with the page content (website focus, workflow, content, and features)
Understand the project from the stakeholder’s perspective and identify how they define success
Who are the users - understand user’s world, learn more about their challenges
Learn about the technology will be used to build this webpage
Identify the strengths and weaknesses of direct and non-direct competitive solutions
Webpage content audit
Customer’s webpage wasn’t complex. I took a closer look for site navigation, content on particular pages and visual aspect of design. All my observations I put into this Webpage content audit doc.
Competitive Analysis
In my competitive analysis, I was focused on websites of companies that sell products and offer services to their customers. I checked companies from different industries and realized that the most important is easy navigation through the page, clear product/ service presentation and potential results of usage, quick way for contacting the company/ get advice or help.
Stakeholder interview
I spoke with the company’s co-founders. I had prepared a list of topics to discuss with them. Our meeting’s outcomes let me deeply understand what is most important for them, what kind of concerns they have regarding changes on their page, and what their expectations are.
User interviews
I spoke with 3 potential users (aged 30-40) - I asked them all the same list of questions.
Interviews gave me additional information and hints on what I should be focused on. These are the most important insights I got:
not enough information what company does, if they are trustworthy
navigation on the existing webpage is frustrating - cannot see products/ services/integration presentation on one page
no information about prices
very colorful
Define
Persona
POV & HMW
Persona
By synthesizing data from the market research, and 1-1 interviews, I was able to create a fictional but realistic representation of Placematic’s target user.
POV & HMW (Point of view & How might we)
After establishing my primary user persona, I took Józef’s insights and needs and translated them into Point of View Statements, then from those, crafted How Might We questions for each one.
Ideate
I combined all the information I had gathered did some brainstorming of potential ideas and drew sketches.
I presented my ideas to my customer, and they decided to keep most of my ideas and to get rid of some unnecessary sections from the homepage.
Prototype and test
Mid-fidelity screens
Mid-fidelity responsive design
Mid-fidelity prototypes
Mid-fidelity screens
With my sketches in hand, I went to the computer to create mid-fidelity wireframes. This helped me confirm what I had drawn was consistent with my intended information architecture.
Mid-fidelity responsive design
Webpage readers use different devices for page browsing, that is why page must be responsive.
Mid-Fidelity Prototype
I used my mid-fidelity wireframes and added hotspots to make an interactive prototype in Adobe XD.
Results of testing
I observed 3 users while browsing trough prototype doing tasks and also tried several times by myself. I uncovered a couple of insights and corresponding design recommendations:
Problems
In the navigation bar About us tab is unnecessarily extended - the page is short so we don’t need tabs there
Users were frustrated that each time they need to go to the long contact form.
Share buttons are missing
Solutions
-> Redesign Navigation bar and footer
-> Redesign the contact form on each page and let the users send a quick request for a contact
-> Add share buttons
Hi-fi design
style tile
high-fidelity screens
Style tile
I made a style tile to use as a foundation and reference for when I would get to high fidelity design. I chose a color palette according to the customer' logo. This highlighted the brand and made the page more visually consistent..
High Fidelity Screens
From usability testing (based on mid-fidelity prototype) I got some valuable feedback and made several important changes:
I added a “share” button under each of the products on All products page and on Product presentation page.
I change sections layout for Product section on homepage.
I change navigation bar and footer and got rid of sub-headers.
I shortened the contact form on all pages - I made it possible for the user to quickly leave an email address with a contact request on each page, instead of taking the customer to the Contact us page.
I made several attempts with colors, shapes and pictures and created final
Reflections
Conducting research interviews and usability testing proved to be a smooth and even surprisingly quick process. While many customers haven't had experience with spatial data usage and applications related to this, it was important to apply common design patterns for companies who offer services to customers so they could navigate the site easily.
All direct competitor's websites were more in corporate character, while my customer wanted to stay more in the startup climate. At the beginning that was hard for me to find proper solutions. I made several trials on high fidelity design and this was time-consuming.
This was a nice experience to redesign the existing webpage, being involved in the whole process with real stakeholders, and meet at the same time users’ expectations.