Coffee App Mockup and Prototype Ripley's Exhibits Interactive Map UI Design Fireside Furniture Website UI Redesign
Coffee App Mockup and Prototype:
Project Name: Coffee IPhone App
Client: Extracurricular Project, ProtoHack, The Code Free Hackathon
Tagline: Follow Your Bliss
Timeframe: 4.22.16 - 4.23.16
Summary: Coffee is an app that connects coffee lovers with each other and local specialty coffee shops to increase business for coffee-related businesses. It improves product marketing and sales for coffee shops and facilitates the discovery of new coffee-related businesses for consumers. My role was to act as a design consultant and to design a wireframe and high-fidelity mockup for this product. I collaborated with a team of marketing and tech professionals to create this prototype.
Major Tasks/Responsibilities: UX design, wireframe, high-fidelity mockup, and prototype.
Platforms: IPhone App
Tools Used: Sketch, Photoshop, Invision
Key Performance Metrics:
• Behavior Flow of visitors to product purchase pages, business owner interest.
Team Members/Collaborators: UX Designer: Christina Park (me), Marketing Specialist: Maria Chronopoulou, Innovation Consultant: Scott Thomas., and Tech Lead: Arjun Rao.
Link to final project: Coffee App
I collaborated with a team of business and marketing professionals who were interested in designing an iPhone app. They asked me to design an app to market coffee specialty shops to coffee connoisseurs. They wanted the app to allow users to search for shops geographically, and by coffee-bean product features. They also wanted users to be able to save favorite shops, rate shop products, read coffee-related articles written by experts, earn badges based on their use of the app, and purchase products to go using the app.
Because a viable business model is key to marketing success, we developed a rough business model and reviewed it with 3 business advisors from ProtoHack. Their feedback was to put the cost of membership on the coffee shops rather than customers, and to whittle down app features so that it was focused on generating sales.
We then surveyed 10 local coffee specialty shops owners and managers to see if this business model would work for them. 10 out of 10 business owners responded positively to the app business model.
I designed a wireframe for the app to provide the team with a working model and to help them refine their ideas for interactivity. Based on feedback from their user experience, I redesigned the wireframe to remove some app features that seemed impractical and to include multiple views for search results.
Using what we learned from the wireframe development process, I designed a high-res mockup in Sketch and an interactive prototype in Invision so they could pitch their idea for the app to investors.
I very much enjoyed the process of working with a team of professionals with experience in business and marketing. Their approach to app development showed me the importance of having a viable business model to ensure sales before committing to the design process.
I was surprised to learn that there is a strong market for such a specialized app among coffee aficionados and the shops that serve them.
I was also surprised to find that the wireframe development process inspired so many changes to the original app concept. Many of the teams original ideas for additional app features, such as coffee articles written by a team of experts, complicated the app and prevented cost-effectiveness . This became most evident for the team during the wireframe development process rather than the business model development process.
Ripley's Exhibits Interactive Map UI Design
Project Name: Exhibits Page Interactive Map UI Design
Client: Ripley’s Believe It Or Not, Times Square
Project Tagline: Explore Ripley Museum Exhibits
Timeframe: 7.28.16 - 10.29.16
Summary: Exhibits Page Interactive Map UI is a web app that increases user engagement with museum exhibit information and facilitates navigation to related webpages for website visitors. It makes web content more entertaining and removes the difficulty of online ticket purchases with an innovative, seamless user interface. My role was to research existing UI issues and create an improved UI design for this project. I collaborated with a web developer and a marketing coordinator to launch it.
Major Tasks/Responsibilities: Google Analytics website analysis; creating wireframe and high-fidelity mockup in Sketch; creating interactive prototype in Invision; web development to create an interactive map and related pages in a pre-existing ModX website using CS Illustrator, HTML, CSS and ModX.
Platforms: Web app
Tools Used: Google Analytics, Sketch, Invision, Illustrator, Photoshop, HTML, CSS, ModX.
Key Performance Metrics:
• Behavior Flow of visitors to the Exhibits Page, engagement time, last-interaction conversions.
Team Members/Collaborators: UX Designer: Christina Park (me), Technical Lead: Omar K, Marketing Coordinator: Gabriela P.
Link to final project: Ripley's Exhibits Map Web App Wireframe
Ripley’s Believe It Or Not, Times Square experienced low ticket sales last year. They asked me to do an analysis of their website to see how their website could be redesigned to generate more ticket sales.
Because understanding user behavior is key to generating sales conversion, I decided to research the customer’s perspective on the website using Google Analytics data. Using Ripley’s business goals, I selected relevant Key Performance Indicators that would measure website performance according to these goals. I also used these KPIs combined with user flow data to gain insight on user goals and user engagement.
As I compared User Flow data with Ripley’s business goals, I was surprised to find very low user engagement with their Exhibits Page, despite its high traffic and relevant content. This page demonstrated an unusually high drop-off rate compared to other pages on the site and did not demonstrate any role in ticket sale conversion paths.
I was also surprised to find that a separate Attractions Map Page accounted for almost half the traffic coming to their Ticket Sales page. However, visitors were finding this page primarily through online searches rather than website navigation, suggesting access to this page could be improved on the site itself.
I identified user interest in the Attractions Map page as an opportunity to improve user experience with the Exhibits Page content and increase ticket sales by combining , reorganizing and redesigning the content on these pages.
Using Google Analytics, I discovered that the majority of their online-generated revenue (57%) comes from the 18-34 year-old crowd, about 70% of which are new visitors and all of which are accessing the site from mobile devices. Based on this data, as well as project budget constraints, I decided to focus initial wireframe designs on mobile device screen sizes.
Since the area where Ripley’s is located is one crowded with similar museums and attractions, I conducted research on the top 5 museum attractions in the neighborhood. I discovered that 4 out of 5 of these competitors used a high degree of animation or video on their website to engage viewers. I also observed that their websites placed a link to their Ticket Sales page on every page of their website.
To solve this behavior flow problem, I envisioned an interactive attractions map that inspired exploration of the Exhibits Page and facilitated quick navigation to the Ticket Sales Page. I collaborated with the technical lead on the project as well as the marketing coordinator to ensure the feasibility of my idea as well as to gain input from them to help guide my design.
I decided to begin with low-fidelity wireframes to think through the structure of the webpages and navigation system, as well as to ensure client approval before further development. I used Sketch to demonstrate the design concept.
Using these wireframes, I proposed the Exhibits Page Interactive Map to the client. This webapp solves visitor usability issues by featuring exhibit information in a much more interactive, engaging and user friendly way while facilitating user navigation and ticket purchases. Once the client approved the idea, I created a wireframe and high-fidelity mockup in Sketch and finally an interactive Prototype in Invision to demonstrate the interactive features.
I learned about the many stages involved in redesigning a portion of a website and how important low-fidelity wireframes are to the process of improving design ideas. I went through a few rough wireframe designs before coming to this one, which allowed me to improve my navigation design much more effectively than I had just from our brainstorming sessions.
I was also surprised to see how many website interactions it took for some website visitors to make a purchase, and how so many of them used online searches to get around an inefficient website navigation strategy.
While the whole project was a great learning experience for me, I especially loved cross referencing research data to interpret user behavior on a digital property and then iterating designs to test innovative solutions.
At this point, the project is ongoing and has opportunities for further development.
Fireside Furniture Website UI Redesign
Project Name: Website Redesign, Fireside Furniture
Client: Fireside Furniture
Project Tagline: Your Source for Quality Furniture
Timeframe: 6.10.16 - 10.10.16
Summary: The Fireside Furniture Website UI Redesign is a UI design that improves navigation and product findability for online visitors. It removes the confusion involved in finding a subset of furniture products among dozens of product categories with a clean user interface, focused on sorting through product categories quickly. My role was to research existing UI issues and create an improved UI design for this project. I collaborated with a web developer to launch it.
Major Tasks/Responsibilities: Google Analytics website analysis; creating a high-fidelity mockup in Sketch; web development to implement new UI design using a pre-existing WordPress theme using HTML, CSS and WordPress.
Tools Used: Google Analytics, Sketch, Adobe CS, HTML, CSS, WordPress.
Key Performance Metrics:
• Behavior Flow of visitors to specific product pages, engagement time, traffic to a greater number of interior pages, traffic to directions and contact pages, keyword terms found under by organic search. Team Members/Collaborators: UX Designer: Christina Park (me), Technical Lead: Tom H. Link to final project: Fireside Furniture Website
CASE STUDY Fireside Furniture experienced lower sales and store traffic over the last few years as compared to prior years. Unlike their competitors, they did not have the budget to sell their furniture directly to customers online but depended on in-store visits for product sales. Their business goals were to use the website to increase in-store visits and sales, especially among younger consumers under the age of 50. They asked me to do an analysis of their website to see how their website could be redesigned to achieve these goals. Because understanding user behavior is key to online marketing, I decided to research the customer’s experience with the website using Google Analytics reports. Using Fireside’s business goals, I selected relevant Key Performance Indicators that would measure website performance according to these goals, such as traffic flow to product pages and the menu link featuring directions, and organic search terms. I also used these KPIs combined with user flow data to gain insight on user goals and user engagement. As I analyzed the User Flow data and compared it with Fireside’s business goals, I found very low user engagement with and a high visitor drop off rate on the Home Page, despite the fact that 80% of sessions landing on this page were from new visitors. I also found an even higher drop off rate on the Product Category Page when visitors entered the site through it, even though the product pages themselves featured a very low drop off rate and high user engagement. I was very surprised to find that neither the Home Page nor the Product Category Page played any significant role in leading visitors to product pages. Instead, the majority of visitors were accessing product pages directly through online search engines. This data suggested a possible navigation or design issues with these pages, especially since there was no evidence that users were experiencing technical issues with these pages. I also found that the search terms visitors were using to find the site online only consisted of variations on the business name rather than product related terms, indicating that the website needed improvements in SEO. Since knowing what has actually worked is crucial to identifying a competitive edge, I decided to conduct competitive research and analysis with fireside furnitures main competitors. I found that competitor’s websites were using a simple clear design and a combination of efficient finding tools on their home page to produce an efficient navigation system that drove visitors to specific product pages. I was also surprised to find consistent product terminology among competitor sites that was not being utilized to market similar products on the Fireside site. To solve this user flow issue, I identified the category terms commonly used by visitors on competitor sites to find products and designed new navigation tools implementing their use by created new product categories and headings. I then reorganized products under these detailed categories to facilitate visitor discovery of product pages. I designed a new UI for the Home Page and Product Category Page which eliminated distracting background photos and serif fonts while increasing font size and product picture size to improve findability. I also created additional product finding tools on the Home Page such as a grid of images linking to related product pages, as well as a mega-menu to further improve navigation. Since this was a redesign for a website, I decided to make a single with high-fidelity mockup in Photoshop for the Home Page to think through the new navigation structure. Once the client approved the idea, I implemented the proposed changes to the WordPress website.
SUMMARY After 3 months, the new website UI resulted in a 15.26% increase in average pages per session among all visitors and a 15.74% increase in average pages per session for new visitors. The Home Page visitor bounce rate has decreased by 12.42%. The number of visitors who find the website through the Home Page has increased from 50% to 80%, and 65% of these visitors successfully navigate from the home page directly to specific product pages. In addition, the vast majority of product pages are now experiencing an increase in visitors who are finding them through organic searches using product-related terms. I was surprised to learn that navigation efficiency is paramount in importance for online furniture shoppers. I was also surprised to see that using multiple finding tools on the home page can be such an effective strategy for ensuring user engagement with interior pages. While the whole project was a great learning experience for me, I especially loved the process of competitive research and website redesign implementation.