Aly Hudson
Website for a company that assists families immigrating
to the United States with document preparations.
Overview
Aly Hudson LLC is a document preparation services provider. Aly’s mission is to help reunite loved ones. Her target audience includes United States citizens who want to petition their families to immigrate to the States.
Problem
Aly’s original website was hosted on Wix.com. While she was able to include all of the necessary information relevant to her business on the site, the design was dated and needed some adjustments. Aly tasked our team with redesigning several pages of her website, creating a standardized style guide, and reinforcing her brand as a reputable service that clients can trust.
Solution
Immigration can be a daunting and scary process. With this in mind, our team strived to balance warmth, approachability, and reputation. By putting ourselves in the client’s shoes, we designed screens that we felt would be accessible and easy to navigate. We also sought to establish a balance between making the site look official, but not too austere, as many immigration sites and services can appear cold and intimidating.
Tools
Figma
Zoom
My Role
UX/UI designer in a team of five
Timeline
6 weeks
Process
Research
Kickoff
Aly Hudson approached the team with an ask for the main deliverable of redesigning her desktop website by developing wireframes for a hand-off. Aly provided her logo, website in its current state at the time of the kickoff, her logos, and general loose parameters around style guide direction. The team was prompted with the challenge and task of simplifying and modernizing her site.
Client Questions
After reviewing the general materials that were provided by the client, the team generated several client questions to address any ambiguity around the project. The following questions and answers helped inform our design moving forward in the process because we gained a better understanding of any information that we needed to clarify.
Q1: Please specify who your target audience is.
A1: USA citizens and residents that would like to petition for their family members to come to the US.
Q2: What features do you love about your current website? What are the most important features of your website that users should focus on?
A2: The features that I love the most are book a consultation, the dropdown menus, the “like” feature on articles, and the “read more” feature. The most important feature that I’d like users to focus on is the ability to request a service and schedule a consultation.
Heuristic Evaluation
The team completed a heuristic evaluation of Aly’s Wix website. We looked at several variables to better understand how the site lined up compliance-wise with usability standards. After our assessment, we found several pain points to address in our design. Some of those pain points included issues with navigation visibility, reducing text-heavy areas, standardizing text and color styles, and many other items.
Competitor Analysis
After completing a heuristic evaluation, the team conducted a competitor analysis. We focused on practices and services with the mission of reuniting families. We used our findings to help inform our designs moving forward, and better understand Aly’s unique positioning in the marketplace.
Ideation
Following our research and discovery phase, we began ideating on the main user flows and tasks on the pages we were designing. We generated user stories, user flows, and medium-fidelity wireframes to gain a complete understanding of what the end product should include.
User Stories
The team identified user stories in order to understand the functionality of the site. The user stories helped us further figure out the main tasks of the website, and how users would interact with the site at a base level to achieve those tasks.
We identified the following user stories:
- As a user, I want to view the homepage.
- As a user, I want to access the blog page and read the blog posts.
- As a user, I want to learn about the business (About page).
- As a user, I want to access the Client Portal.
User Flows
I helped finesse each user flow but mainly worked on the client portal flow. While working on the client portal flow, I realized a few additional screens were needed, as well as a decision point, which was the “Login successful?” decision point. An important takeaway I had was that decision points and actions are not always the most obvious when mapping out a flow, but they are essential to understanding user flows.
Wireframes
Next, based on the user stories and flows, we drafted a series of medium-fidelity wireframes. In this stage, we focused on what we wanted the functionality of pages and specific features to look like. We were sure to standardize all aspects across the wireframes. Everyone from the team focused on specific, respective pages, but it became an all-hands-on-deck task with refinement once we were close to finalizing the screens. I focused on the blog and the expanded blog post screens. This process was really enjoyable because everyone had some creative room to iterate, but we also helped keep each other on track during the refinement stage.
Design
Once the team approved the medium-fidelity wireframes, we began focusing on the design. This stage involved several aspects. We started by drafting UI iterations, then generated a style guide once a UI direction was selected and approved. After the UI iteration and style guide were finalized, we could apply those styles to all screens, creating a uniform and cohesive website design.
UI Iterations
Everyone on the team drafted several UI iterations individually. Once we were finished drafting iterations, we all voted on our top favorite three. We intentionally chose screens that looked completely different from the others, but were sure to include the red, white, and blue color palette that was requested by the client.
The client ultimately chose a combination of iterations #1 and #2 because she liked the photo version of the hero image in iteration #2, but also liked the cleanness and color palette of the design in iteration #1. My direction was not selected, but I helped combine both iterations of the design into one.
Style Guide
As soon as a UI iteration was selected by the client, we were able to generate the style guide based on the design. We included all elements that were used across the design including text styles, colors, iconography, and CTAs displayed in various states.
Hi-Fi Wireframes
After the client approved the style guide and UI design, we applied the designs to all of the screens. This process was fulfilling for the team because we could see all of our medium-fidelity wireframe screens come to life. At this stage in the project, we became extremely precise with everything, ensuring all design components fit within the grid and following the multiples of 8 pixels rule for spacing between sections.
We split the work up by divvying up the screens between team members. I focused on the blog and expanded blog post screens. Additionally, we also were sure to create components for everything so we could make vast sweeping changes if needed.
I prioritized making the design feel clean and approachable by following spacing rules of thumb to allow the design to breathe. I also made sure spacing was precise and consistent between sections.
Dev Handoff
Once the final high-fidelity screens were approved, we created our dev handoff document in Figma. During this stage, we were sure to communicate every design decision, including flows, measurements, and CTA states. The dev handoff was a great practice in communicating as much information as possible about the design in a concise, straightforward fashion.
Reflection
Aly Hudson was an exciting challenge. This experience helped me to understand the skill of conducting in-depth research to best understand the target user. This project presented an end-user perspective I was completely unfamiliar with and had to design for.
Additionally, I enjoyed working on a project for a B2C startup focused on a specific area in immigration. Working on a design for a specific service was great because I could focus on the details of the design and functionality and keep the interface relatively simple.
The biggest challenge for me was not getting too caught up in components early in the process, especially before a UI iteration is finalized. I overcame this challenge by learning that it was better to not be too concrete in certain areas, especially when working with a team.
An aspect of the project that went well was time management between individual work and group work. Everyone had individual deliverables, but when it came time to combine deliverables, we spent time on Zoom and Slack to discuss specific decisions.
If we had more time with this project, I would lead the research and discovery phase even further to create the best possible product for a target audience. I felt that I did an adequate job during this phase of the project, but more research would not have hurt the process.
Ultimately, I think Aly Hudson will have a successful platform to illicit more business. Now that the design has been simplified, is less text-heavy, and has a consistent style throughout, users will have an easy time navigating through the screens and better understanding the service Aly is providing.
