Pain Points: Users couldn’t find a lot of points of interest form the website; Some know little about the grape and wine differences. Locations is distant from downtown.

Challenges: Current website is with incomplete context and cluttered layout. News is piece by piece. No consistent design system.

Solutions: Highlight its market value. Use CMS to keep content consistent and well-organized. Provide customized itineraries and FAQs. Collaborate with other wineries / diners to provide daily tour activity.

My Tasks: Worked as a team leader to coordinate the user interviews and manage project timeline. To optimized user interactions, I designed the survey questionnaires to better understand use behaviors. I used WordPress CMS to reorganize the content and based on the conceptual map, I redesigned the layout, introduced Google Map API for users to customized their tour route. I also designed the coupons and posters to give a fresh and consistent feel about the brand.

Project Process

Research

User Personas

Information Architecture

Wireframes

Overview: Northshore Florist is a local flowers and plants store. Now it’s expanding its business scope to online business. The typical user is between 25-45 years old and most are college students or office employees. The site is designed to make shopping and delivery fast and convenient for all types of users. It allows users to shop seasonal flowers and plants, and provides users with useful care guidance.

Target User: Busy shoppers of all genders and backgrounds who want to have a fast, convenient experience purchasing flowers and plants from Northshore Florist.

Research Conducted and Research Findings: We conducted user research and received feedback from users that we incorporated into user personas. For example, our user persona, James, is a 29-year old full-time employee who shops online to send fresh flowers to his girlfriend on some holidays. The research revealed that James was frustrated by cluttered navigation and complex categories that made shopping confusing. James would like to see improvements like different filter and sort options. He would also like to see more options that suggest seasonal species or limited pieces.

Problems: Currently, the site has a cluttered layout and that makes the page too long, and isn’t very engaging with the blog content.

Insights Learned: From user research, we learned that there were some pain points for users. One of the biggest is that the categories for the products are a bit confused to users. Instead of figuring out what the flower species the flowers belong, users are more inclined to use the search bar instead. So we just modified the categories into two main sections. And besides the species, users can also filter by the color of the flowers. This covered most user’s searching preferences.

UI Ideation: Sketches and Wireframes: Here’s how we put our users’ needs first. The process below begins with our initial ideas wireframes, then moves to mockups, and finally to the high-fidelity prototype.

Wireframes

In this simple version, you can see how the designer approaches solving the user’s needs. The navigation bar is simple and the carousel banners list the store’s trending promotions and events. The week’s special section highlights the featured flowers and plants. Users can also click the See More button to view and shop all the products.

Revised wireframes after low-fidelity prototype usability testing: In the revised version, you see the progression of the design based on insights identified from usability test feedback. Design additions include simplifying the layout of this week’s special products and redesigning the blog section to use images and texts instead of a short paragraph, which will provide users more interactions.

Mockup

High-Fidelity Prototype

The design is fully developed and gives a complete picture of the completed design. It addresses the user’s needs for a simple, yet engaging and uncluttered design.

Takeaways

• Listen to the users first, understand what they expect from the product and tap into the data with goal-oriented outcomes, and then follow the best practice to design the interactive product.
• A good interactive website design should improve the business strategy and increase business value for a company.
• Collect diverse data can help a business to realize more about its targeting audiences because it improves the business according to its result of data analytics.

Project duration: April 2021 to June 2021

The problem: During the pandemic lockdown, the studio were closed and losing customers.

The goal: Design an app that allows customers to view all the photos and buy directly instead of visiting the store.

My role: UX designer from conception to delivery

Responsibilities: User interviews, user research, wireframes, prototyping, usability test

User Research

I conducted the user interviews to get user needs about using the app and created user journey map to understand user behaviors. I created user personas to define the primary user group and user goals. I also did the user research to define the business goals and integrate with the user needs to sketch the low-fidelity wireframes. Based on the usability testings, I iterated the user flows and UI patterns and polished with the high-fidelity mockups.

Pain Points:
Regulations - Local stores were locked down following the state’s regulations and people couldn’t visit the store in person.
Space - The space of the studio is limited that it can’t display all the works.
Format - Sometimes, customers only want the digital version of the photos instead of the printing version.

User Persona

User Journey Map

Crazy Eights

Based on the user journey map, I sketched the wireframes which follows the basic user flows and addresses the user needs.

Low-Fidelity Wireframes

As for the home page, I made sure to provide the primary user needs based on the user research. I added Guess You Like section to help business get more potential buying based on user’s preferences.

Usability Study

For the first usability study, I found that the banners weighed too much of the whole page. So I integrated them with a slideshow and add one more row for the featured photos. I also add a CTA button for the member enrollment.
For the second usability study, I noticed that I made every single checkout step with one page. This made users impatient. So I integrated the shipping info, method and payment info together with one page to simply the process.

High-Fidelity Prototypes

Accessibility Considerations

• Add image alt and descriptions
• Use high contrast and lines to differentiate different sections

Takeaways

Impact:

The app brings the same experience for users to view the photo gallery and pick up whatever they like. With more convenience, users can easily make an order at anytime, anywhere.

I can just stay at home and view all the magnificent photos. I can even know which formats it provides for the digital versions. --Mike

What I learned:

User interview helps me better emphasize user’s needs and pain points. User research gets me more background to understand business needs. Usability study helps me dive deep in the functionality of the app.

Next Steps:

• Conduct another usability study to collect more feedbacks about the functionality of the app.
• Do some competitor research to explore more features for the app.

Business Goals: Provide platform for local stores to promote deals to customers; Encourage users to invite their friends to register to get boost points.

User Needs: Find local hot deals; Redeem coupon with boost points that they collected via inviting friends.

My Tasks: Before the sketch, I did competitive research and user persona to define the target audience, context and functionalities for this app. I also worked with marketing team to analyze and draft the user flows based on the research result and scenarios. I used Sketch and InVision for the wireframes and final mockups, and Photoshop and Illustrator for color palette and icon designs. Working as an agile team, we've gained team work spirits to push the project move forward effectively and smoothly via Jira. In phase II of the project, I finished the mockup with assigned features and functionalities.

Journey Mapping (Click to Zoom in)

Prototypes

Website Screenshots

Website Screenshots

UI Design

Mockup

Website Preview