MOTOZA
UX Research & Website Design, 2019
Project Abstract
Description | The client recently had their site redesigned as part of a rebranding effort but was not thrilled with the results. They were looking for a second designer to review the first redesign they received. Their goal was to update their website to attract more potential customers and to have, in their words, a more professional website.
Findings | The first website redesign updated the visuals, but it did not address the client's goals. Nor did it create messaging and a user flow that would target specific audiences that the client was interested in attracting.
Result |
Click to step through the wireframe.
| Phase | Process | Deliverables | Techniques | Tools/Software |
|---|---|---|---|---|
| Phase 1: Problem Finding & Understand |
I did research to understand the client’s goals, who their customers are, how this website redesign contributes to their larger goal, and what discrepancies could be addressed to achieve the client’s goals. |
|
Sketch | |
| Phase 2: Synthesis & Feedback |
I synthesized my findings of the client’s primary pain points, learnings about who their current and future customers are, the market and competition to create a working user flow. I then shared the user flow created along with my findings in a workshop with the client. At the workshop I collected feedback for website design ideas. |
|
Pen & Paper (For speed) | |
| Phase 3: Create & Handoff |
I mocked up the designs shared the mockup with the client. The client was pleased with the results and was ready to take it to their developer. Because I am advocating for user testing, but they are ready to start implementing, I have taken on the task of user testing as a personal project where I will plan, develop, recruit and facilitate a and share my finding so that they can iterate with data. |
|
Digital Wireframing. | Adobe XD, Grammarly |
| Next Steps: User Testing & Iteration | Develop, recruit for and facilitate user testing to learn how well the solution was designed, discover any points of friction, and iterate on the design. |
|
|
Adobe XD, Quicktime Screen Recording, Social Media (recruitment), Keynote or Google Slide (Presentation) |
Project Brief
Motoza is a digital marketing agency specializing in search engine optimization (SEO). They worked paid for a website redesign, but were not thrilled with it. However, they could not articulate why, other than saying: "It's not professional.” I offered my services for a second voice and an alternative site redesign they can choose from. I decided to conduct UX Research to understand what they were looking for, faccilitated workshops to create opportunities to co-create and create a new redesign.
Initial working assumptions:
- There was a disconnect between what they said they wanted, and what the first designer heard because they needed a method to help demonstrate and articulate their wants.
- They wanted something more from a website redesign than better visuals.
Challenges & Goals
People are not good at describing what they want because words are abstract with infinite room for interpretation by the listener. The most painful thing is knowing you have good taste, but lacking the skills and techniques to bring it to life. I suspect this is part of the frustration Motoza was experiencing with their first redesign. Consequently, I had some critical challenges to work through before I could create something they’d be happy with. From these critical challenges, I defined my project goals.
Findings & Results
Phase 1:Problem Finding & UnderstanDing
Phase 2: Synthesis & Feedback
Defining users. The website redesign was a primary tool in their rebranding strategy to attract and engage more potential enterprise customers. Their target audience is enterprise customers and small business owners, but this was not captured in the hierarchy and user flow of their current website or the initial redesign. I identified 3 potential target audiences with different specific needs at the moment that was not acknowledged in their discussion. Their thinking and attitude towards the website redesign needed someone to advocate for their target audience, which is the role of the designer.
- Non-technical: small business owner
- Moderately technical: ex. Ecommerce business owner, people working marketing department for large companies
- Partnerships: designers that are looking to incorporate or find someone technical to do all the SEO and content development, and other skills that Motoza has in their staff.
Defining the Problem & Goals. The client and I needed to establish a shared understanding of the problem and goal for this collaboration to be successful and transparent. The meetings, and workshops were effective techniques to create a collaborative relationship as well as to discuss and define the problem and goals together.
Developing a User Journey Is Iterative. At each Phase of the project, I would learn more from the clients, and research. This on-going learning made developing a user journey a part of the design that I found needed constant update. For every new section I created, I make made a note on the feeling and behavior I hoped to promote in the user for every section I designed and developed.
Phase 3: Create & Handoff
I was surprised that the client was satisfied with taking the first iteration of the design directly to their developer without the rigor of the user testing. I’ve kept in touch with then client after the project handed off, and learned that they want to make some change to the orientation of the home page. There is where I got excited to offer user testing as a means to inform more future iterations they’d like to make on the design. Click the image to step through the same prototype the client was walked through.
The first iteration of the wireframe and user journey.
The second iteration of the wireframe with more messaging strategy.
The third iteration of the wireframe with more content, messaging and user journey mapped out.
The fourth iteration of the wireframe that I handed to the client, and for user testing in the next steps.
Methodology
The following three-phases are my standard approach to thoughtful design. The design techniques used vary from project to project to accommodate time constraints, define and achieve project-specific goals, and overcome unique project challenges. Below are the techniques I chose to overcome the challenges identified earlier and how these techniques and tools work to achieve the goals set in each phase of the project.
Phase 1: Problem Finding & Understand
2. The client wanted more than just a site redesign.
Steps | To get this raw data, I decided on the following design techniques and included the reasons for those choices.
Contextual Inquiry. I did this to learn about the industry, the business, their clients, pain points, and goals. Interviews and observation is the fastest way to get rich and raw data from the client and get to clarity about their problems.
Market Research. I did this to understand what the competition looks like and the SEO and digital marketing industry.
User Research & Provisional Personas. I did this to make this design process more user-centric, where the client is the stakeholders and subject matter experts, and their potential and current customers are their users.
Site Audit & Mapping. I did this to how users are currently experiencing the Motoza website, brand, and services, and to identify any disconnect how the client describes their customers and how a potential customer experience the site. This activity also developed my empathy for their potential customers and existing customers using their website, re-affirming my user-centric approach to design.
Information Architecture. I did this to analyze at a high-level how the information is organized, how the navigations are structured and to identify if the core functions and pages being surfaced over non-core features and content. I would also use this to draft an ideal Information Architecture that will guide a redesigned user flow and website.
Phase 2: Synthesis & Feedback.
People don’t like to hear that there is something wrong with their babies. Because Motoza is their baby, another goal I had was to share my findings in a productive, supportive, and optimistic manner with the client so that we all could work together on making something beautiful that works for them.
Steps | The following are design techniques used, and the explanation for those choices.
Define Problem & Design Criteria. From the data and research synthesis, I articulated and the problem to focus on, redesign goals to aim for and design criteria for guidance. These are user-centric to ensure that our ideas and designs are made with Motoza clients at the core of it all.
User Journey Mapping. The information architecture and the hero's journey are foundational and informed the high level organized of the content and how navigation should be between pages. The user journey mapping (aka user flow) is a layer of richness to this structure by outlining in more detail about how all users can progress through the site and can recover when they lost.
Content Research and Writing. The messaging strategy was very important to this site’s design because this agency offers a service that required a well crafted messaging strategy to communicate the service’s value and engage users. This is very different to say physical products that do better using beautiful images and demo videos to convey the value of the product.
Facilitate Workshop with the Client. I conducted a workshop with the client to share my findings, problem, encourage a conversation about the user-centric direction I’ve taken, to gather feedback on the of the messaging and information high-level structure, and to have another opportunity to hear more about the pain they are experiencing. I also designed and facilitated a brainstorming and 2x2 activity to share that technique as well as to gather their input for co-creation effort.
Phase 2: Synthesis & Feedback.
Steps | I used the following design techniques and tools for the following reasons.
- Target audience. I focused the website design on Motoza’s target audience.
- Core pages and functionalities. I defined and put the most thought into the core pages and functionalities first.
- User Journey. I outlined where each page would love relative to one another, and demonstrate the user journey their target audience would experience navigating through their site.
Mid-Fidelity Mockup in Adobe XD. Mid-Fidelity Mockup in Adobe XD. I created a mid-fidelity mock-up used for the client to experience the first complete design iteration, user for development and for me to for user test.
NEXT STEPS - User Testing. The project was concluded at the mid-fidelity mockup. The clients were excited to pick up from there and take the design to their development team. I have taken on this next step as a personal effort to take this product (the Motoza website further), and test its usability, learn if it met the design criteria, and to gather qualitative data on points of friction that users find more distracting than engaging. If you’d like an update on where this goes please let me know in an email to kim@kimnguyen.design. :) I’d love to chat.
Lessons Learned
Most Growth
Content development was the hardest part. Words are always up for interpretation and took much finagling to get it ‘right’. From this activity, I’ve developed so much empathy for markers, content and copywriters journalists, and copy UI designers. I developed the following process for more efficient and quality of good content development.
- Context research: you need to know what you are talking about, the word people from that world use to describe the things and events of that specialty, and who you are talking to and their wants/desires/goals.
- Writing and brainstorming: Writing the content from scratch is hard if you have never written about that subject before. I had so much empathy for journalists at this step.
- Revise and Edit: This is a struggle and it takes several tools and passes to get the words to come together grammatically correct.
What I Did Well
- Communication. Problem finding and articulating it to the client in a productive manner. I also found creative ways to help the client provide design input and more context to their vision. For instance, I brought examples of styles of other sites to help customers better articulate why "professional, and better visually" means.
- User Advocacy. I consistently advocate for the potential customers navigating through their website. This was a struggle because no time was allotted to do contextual inquiries with potential digital marketing customers, but I was able to find data and account of people talking about Motoza to create provisional personas that put the website users at the center of the design.
- Provocation, Translation, Articulations. I recognized that people are not very good at saying want they want, and understanding what others want with just words. This is everyone’s reality because words are abstract and are always up for interpretation by the listener. The most painful thing is knowing you have good taste, but lacking the skills and techniques to bring it to life. Then create a way for people to express their vision.
Most Fun Parts
- Problem Finding & Understanding. I enjoy problem finding and solution recommendations/designing. I am a curious person who loves listening to humans stories and discovering how and why people in the same situation can experience their environment differently. I love taking these stories and putting them into a system and being able to identify the strings to pull and the gaps to fill to accomplish a goal.
- Mocking Up. Tweaking the UI and formatting is the most fun part. To me, it’s much like shopping for seemingly random articles of clothing and bringing it together to create a new style that is unique to the wearer. I am a bit OCD and achieving pixel-perfect is entertaining.
- Client Workshop Facilitation. I like providing examples and visuals for the client to see and give real-time feedback. Seeing the pieces connect and iterating on ideas in real-time with the client is collaborative, supportive and always is a fun environment to be in.
