Mary Lopez is a UX Designer based in NYC.

Get Off Your A**

Health app and watch design

 
 
 

Background

Everyone needs to workout and get off the couch. Studies show that people reduce the risks of heart disease when implementing a daily, effective workout. Working out also increases strength and flexibility. While exercising, there are numbers or data  associated with working out. 

The Problem

Users don't know any metrics or statistics regarding their workout when working out alone. How might I get users to exercise via an app and smart watch? By providing an app that syncs to a smart watch, users would be able to watch videos, see their data, and continue using both devices. 

The Opportunity

I wanted to design an app called Get Off Your A**, where users watch exercise videos on their phone or watch, that would inspire and engage them to work out. Their smart watch would sync up with the app showing data on the daily progress they made along with a monthly tracker. 

My Role and Timeline

UX Designer and Freelancer: App- 2 weeks, watch- 1 week

 

User Research-Interviews

 

I interviewed 6 users to find out what type of exercise they do, how they learned new exercise, and what is the motivation to exercise. I took those findings and synthesized the results. 

 
interview.png
 

Key Takeaways:

  • 100% of users wanted to learn new exercise.
  • 83% of users learned new exercise through Youtube tutorials.
  • 83% users usually exercise for 30 minutes.
  • 83% users want the app to be quick and easy.

 


Wireframes

 

I designed my wireframes in Balsamiq. I will focus on the Homepage, My Profile, Exercise, Favorites, Notifications, and Settings. 

 

User Testing #1

 

I interviewed 4 users on the wireframes. I wanted to know how they felt about the flow of the app and access of the Youtube videos. I also learned about their needs regarding data analysis on their monthly progress.  

 
eddie1.jpg
 

KEY TAKEAWAYS:

  • 100% of users wanted a tracking feature that showed heart rate, step, and calories burned. 
  • 100% of users said it was simple, easy to use, and made sense.
  • 100% of users said they could access the Youtube tutorials quickly. 

Medium Fidelity Wireframes and User Testing #2

 

I moved on to medium fidelity wireframes and did more user testing. I also started to design data tables associated with the results so users could track their progress. 

 
 

KEY TAKEAWAYS

  • Make call to action buttons more prominent.
  • Finalize profile section with features of the app or watch.
  • Ability to move favorites around for custom workout.
  • Change settings to menu icon.
  • Provide a data tracker.
  • Remove music section.

Mockups


Part 2- Apple Watch Design


Back to top

Next Steps

 
  • Add images to exercise tables.
  • Elaborate on the food and drink search options.
  • Research recording feature.
  • Research game function and create avatar.
goya for portfolio.png

IAVI

IAVI website redesign

MacBook Pro.png

Background

 

The International AIDS Vaccine Initiative  (IAVI) launched in 1996 as a non-profit organization dedicated to developing a vaccine to cure AIDS. IAVI collaborates with more than 100 academic, industry, and government organizations around the world in service to its mission.

 

The Problem

 

The IAVI website has poor user experience, is hard to navigate, and needs new visual design elements. How might I add User Interface Elements so users can quickly gather information and have a more cohesive experience? 

 

The Opportunity

 

I will redesign the website by providing user interface elements, current trends, and best practices. With this design, IAVI will stay competitive and reflect on business and marketing strategies. 

 

My Role and Timeline

UX Freelancer, 2 weeks


Evaluations-Competitive Analysis

 

I researched other organizations' websites in order to learn how IAVI could improve their homepage. IAVI could add a Hero photo, an enlarge image carousel, videos, and be mobile friendly. 

 
Screen Shot 2017-11-13 at 11.21.24 AM.png

Evaluations-Comparative Analysis

 

I visited and evaluated donors' websites to innovate and improve IAVI's homepage. The IAVI website does have call to action buttons and an About Us section, but could benefit from a Select Language or Sign into Account feature. 

 
Screen Shot 2017-11-13 at 11.27.03 AM.png

Sitemap

 

I created a Sitemap for the IAVI Website. It has 7 categories in its main navigation bar and several secondary navigation links. 

 

Wireframes

 

I designed six wireframes created in Balsamiq. I will focus on the Homepage, Our History, What we do, Media Center, Publications, and Donate pages.

 

Redesign of Homepage

 

My strategy was to add more images, (67% of users process images 3x faster than text) and increase the font size. I also wanted the text to flow and navigate through the website complementing the images. 

 
 

KEY TAKEAWAYS:

  • Changed font to Helvetica Light.
  • Changed font size to 14.
  • Added a screen to screen image carousel.
  • Added a mission statement.
  • Change fact sheets to images and text instead of links.

Redesign of Our History Page

 

IAVI's Our history page is full of text which is information overload. My strategy is to provide images which will break up the text and increase readability. 

 
 

KEY TAKEAWAYS:

  • Change font size to 14.
  • Add images.
  • Changed the side navigation bar to a horizontal navigation bar under the Our History title.

 Redesign of What we do

 

I kept the navigation and image carousel the same and moved on to content. My strategy on this page was to provide bigger images to engage users to click on the links. 

 
 

KEY TAKEAWAYS:

  • Increase image sizes.
  • Bold key words that provide links.
  • Incorporate a horizontal image and text format to minimize scrolling.

Redesign of Media Center

 

IAVI is rich in content under the Media Center tab but poor on providing images. My strategy here was to provide hero photo images that are captivating. The block of images allows users quick access to the Latest News from IAVI section. 

 
 

KEY TAKEAWAYS:

  • Changed the side navigation bar to a horizontal navigation bar under the Media Center title.
  • Moved text to top of page to inform users of subscription options.
  • Added hero photo images instead of links.

Redesign of Publications Page

 

Publications are enhanced when adding images. To increase user experience, the strategy used here is to provide images associated with that link.  

 
 

KEY TAKEAWAYS:

  • Changed the side navigation bar to a horizontal navigation bar under the Publications title.
  • Added images and text along with the links.

Redesign of Donate Now

 

Donation pages should be short, easy, and intuitive through good design. The user should also be aware of the security credentials which IAVI  provides. 

 
 

KEY TAKEAWAYS:

  • Changed the side navigation bar to a horizontal navigation bar under Donate title.
  • Changed the color of the boxes for more of a cohesive look.
  • Removed white space.

Back to top

Next Steps

 
  • Add images to drop down pages.
  • Redesign charts.
  • Redesign maps.
iavi.png

AJ Madison

My List Feature

 

Background

AJ Madison is an e-commerce store that sells appliances. It sells refrigerators, microwaves, cooking ranges, and dishwashers that users can build into kitchen packages or bundles to save money, along with AJ Madison providing rebates and warranties. It was founded in the year 2000 and has a showroom in Brooklyn, New York. 

 
 

The Problem

AJ Madison doesn't have any features that incorporate digital tools such as an idea board, wish list, favorites, sharing, or decorating initiatives. How might I design a new feature that is easy to use and provide a way for users to research or save appliances?

 
 

 The Opportunity 

I will be responsible for adding a link in the header, along with a flow on how users will add items to a list. I will also create wireframes and a prototype. The list link will provide the user an opportunity to save items, compare and share products that will drive sales. 

 

My Role and Timeline

UX Intern, 3 1/2 weeks


User Research-Surveys

 

I wanted to send out a survey through emails to get a sense of AJ Madison's users. I started with demographic questions, then moved on to behaviors. From the surveys, I want to move on to Interviews, Affinity Mapping, and Synthesis to create problem statements. After collecting all my research data, I would create several Personas for AJ Madison. 

 
 

Evaluation-Competitive Analysis

 

I wanted to compare product and service features on other e-commerce websites and learn how to improve or innovate. We chose local as well as national stores. AJ Madison could design an app, provide gift cards, and free pick ups. They could also create a wish list, a virtual kitchen, and select language feature on their website. 

 

Evaluation-Comparative Analysis

 

I also did a comparative evaluation of luxury cars and high-end fashion websites. AJ Madison could provide 360 views and incorporate videos on all their products.

 

Evaluation-Heuristics

 

Lastly, I evaluated AJ Madison's website with 10 heuristics. AJ Madison could improve on the mobile's delightful presence and accessibility of their blog. 

 

Sitemap

 

I designed AJ Madison's sitemap based on their main navigation bar. There are 8 categories in the main navigation bar; Packages and Brands are the last 2 tabs.

 

User Flow

 

I created a user flow based on my list prototype, created in Invision. In my prototype there are two possible flows in which the user can create a list from the main home page: Go directly to the list link, or look for products in the search bar, then create a list.

 

Low Fidelity Wireframes

 

I created low fidelity wireframes in Balsamiq. The list link is in the header. I will focus on 4 screens: Home page with the list link, Create a list link page, PDP page, and The List Page with names of lists, product information, images, and add to cart. 

 

User Testing

 

I did user testing with 5 users. I asked 10 questions. 

 

KEY TAKEAWAYS

 
  • Too many pop ups.
  • Prefer radion buttons.
  • Private setting should be default.
  • Boxes are confusing.
  • Cross selling needs more refinement
  • Description of product needs more info.

Mockups

 

 

Back to top

Next steps or possible new features

 
  • Interviews 
  • Affinity Mapping
  • Synthesis, Problem Statement
  • Personas
  • Shop the Room Look
  • Get Inspired Feature
  • Look Book Feature
  • Virtual Kitchen
  • Favorites Icon
  • 360 view of products
  • Pick a language
  • Design an App
aj.png

Alpha Vertex

A Dashboard Prediction Tool

hp.png
 

Background

Alpha Vertex developed a massive network of information connecting organizations, people, and events across the globe into a single relational map or graph.  From the massive information, PreCog 500 is a powerful machine-learning model incorporating hundreds of data sets to forecast stock returns at multiple intervals using Artificial Intelligence (AI). 

 
 

The Problem

Looking at a massive amount of data is very hard to decipher and analyze for finance industry professionals. Algorithm-based stock advising tools often speak in a complex language that the majority of hedge fund managers can’t decipher, leaving potentially valuable information undiscovered. How might we create a quick and efficient tool that makes the otherwise dense data easily digestible?

 
 

The Opportunity

There is an opportunity for Alpha Vertex's tools and models to extend to its target audience, hedge fund managers. PreCog 500 can be a supplement for their daily intake, along with using the Bloomberg Terminal. 

 

My Role and Timeline

Project Manager and UX Consultant, 2 1/2 weeks


User Research-Interviews

 

We interviewed 3 finance industry professionals to learn more about their needs. We were also interested in their behaviors and interaction with data analysis. 

 
 

KEY TAKEAWAYS

  • None of the users used Artificial Intelligence, but expressed interest in learning how to use it.
  • Users like to look at raw and visualized data, in addition to the relative value data.
  • The data needs to be quick and presentable; color coding is helpful.

Personas

 

From our interviews findings and synthesis, we started to create our persona, Active Amar. His quote is "Don't mess with what works!" in reference to the Bloomberg Terminal. 

 
 

Design Studio

 

We proceed to Design Studio with Mutisya's (Alpha Vertex's CEO) ideas in mind. We started with pen and paper, then moved on to wireframing with Balsamiq. Here we added 10 Sectors from the Stock Market, an Industries section as a marker, Size, Ranks, Tickers, 5D%, Volatility, and Score. Each sector has its own industry which can break down into market cap size and finally the companies' predictions are revealed.

 

 Wireframes and User Testing

 

We designed our medium fidelity wireframes in Sketch and from there we did user testing. The users can choose a sector, an industry, and market size. The data table below would reflect the chosen parameters. Users can also look at ascending or descending order in regards to 5 Day Prediction, Volatility and Score, again based on the chosen parameters. Annotations are also provided.

 
 

KEY TAKEAWAYS from User Testing #1

  • No reset or clear filters button.
  • Find an easier way to access additional pages on the bottom of the page.
  • Make the prediction column more eye-catching.

Iterations

 

We iterated our designs based on user testing findings and did users testing #2. We added more data and time parameters in the table such as cap, date, and end date of prediction. Lastly, we added a page scroll. Annotations are also provided. 

 
 

KEY TAKEAWAYS from User Testing #2

  • Sections (sectors, industries, market cap) aren't clearly defined.
  • Pressed state of buttons are unclear.
  • Need more information or graph or article: "Why should I believe this?"
  • Add info icons and line charts.

Mockups

 

Prototype Video

 

 

Next Steps

  • Add and format a newsletter via email.
  • Add more information (timelines) to the graphs.
 
av.png

Cozy by Casper

A Case Study

 

Background

Casper, a US e-commerce store sells mattress, pillows, sheets, bed frames, and box springs. Their Mission Statement: At Casper, we believe that better sleep leads to a fuller, more adventurous life. We're devoted to improving the 26 years we each spend in bed and to brightening the days in between.

 
 

The Problem

We spend 26 years of our lives sleeping. What is sleep doing for me? What factors impact my sleep? What can I learn from my sleep? Everyone needs to sleep, so why not get information while the user is sleeping, so that they can be a more informed, productive person? How can we motivate users to prioritize sleep and help them develop better habits in order to impact their overall wellness and productivity?

 
 

The Opportunity 

Through a native app, we would provide sleep and wellness tools as well as recommendations to Casper’s existing and potential customers. The app will sync to the smart mattress topper developed by Casper which will monitor users’ physical states and track sleeping habits. By equipping customers with smart technology and a native mobile app, we aim to educate and empower users to improve their lives.

 

My Role and Timeline

UX Designer, 2 1/2 weeks


User Research-Surveys

 

We created a survey that was online and asked 15 questions. We wanted to screen users that valued their sleep and wellness, along with having a relationship with technology.  

 
 

KEY TAKEAWAYS :

  • 62% of users value their sleep.
  • 82% of users are interested in learning about wellness.
  • 64% of users very often sleep with their phone.

User Research-Interviews

 

After the surveys, we moved on to the interview process. We interviewed 6 people and wanted to know would users incorporate technology into their sleeping experience, and what features would users want in a sleeping app/smart technology? 

 

Affinity Mapping

 

After the interviews, we synthesized our interview findings by using post it notes, a dry erase board, and markers. We discovered several trends such as Sleeping Habits, Apps Used, and Features.  

 

  

 

KEY TAKEAWAYS:

  • 6/6 sleep next to their phone.
  • 5/6 wanted to learn more about their sleep patterns.
  • 4/6 wanted to record their dreams.

Topper vs. Wearable

 

In addition to designing an app, we wanted to incorporate a syncing ability from the app to either a wearable or topper. During the interview process, we asked these questions to our users and synthesized the results. 

 
 

KEY TAKEAWAYS:

  • Topper would incorporate smart technology for Casper.
  • Topper provides a heating element.
  • Topper provides direct revenue for Casper.

Personas

 

From our interviews findings and synthesis, we started to create our personas. We had two personas that will help us develop our features and user flows. 

 
   

  


Feature Prioritization

 

From our interviews synthesis on features, we started Moscow (must have, should have, could have and won’t have) feature prioritization. We focused on the must haves in the lower quadrant, which was least effort, most important.

 
 

KEY TAKEAWAYS:

  • Must Have Takeaways: Prioritize number of REM hours, records when you wake up, records when you fall asleep, smart alarm, record movement (graph or image), phone sounds, record dreams. We will focus on these features.
  • Should Have Takeaways: Input nutrition and exercise, bed warming.
  • Could Have Takeaways: Set music as the alarm.
 

Evaluations-Competitive Analysis

 

We wanted to look into our competition to gain insight or areas so that we could improve our design. Eight sells smart toppers and mattresses. IT by Sleep Number sells only smart mattresses.

 
 

KEY TAKEAWAYS:

  • Casper can incorporate smart technology into their brand.
  • Casper can design a mobile application.
  • Casper can sell digital products.

User Flow

 

We designed 2 users flows based on the personas, Sleepy Sally and Drowsy Dave. Based on their behaviors, goals, needs, and stories, this is the happy path Drowsy Dave would take.

 

Wireframes

 

We designed our wireframes in Sketch and from there we did user testing. This is the Set Alarm page, Activity Tracker, and Heating page that we are focusing on. 

 
Screen Shot 2018-01-08 at 9.26.07 PM.png
 

User Testing

 

We interviewed 4 users, asked 15 questions, and gave 5 tasks to complete. Then presented tasks focused on find-ability and overall flow of the app.

 
p4users.png
 
 

KEY TAKEAWAYS from User Testing #1:

  • Alarm page: Users didn’t understand what a smart alarm was.
  • Activity Tracker page: Tracker name was misleading  and users were uncertain about what linking wearable data encompassed.
  • Heater page: Unclear thermostat.
 

Iterations and medium fidelity

 

We iterated on our designs based on user testing findings and did users testing #2. We changed the Activity Tracker page name to Daily Influencers. 

 
Screen Shot 2018-01-08 at 9.33.09 PM.png
 

KEY TAKEAWAYS from User Testing #2:

  • Alarm page: The alarm screen was easy to understand. We added an information icon for Smart Alarm. 
  • Daily Influencers page: Users wanted to be able to input additional data into their “influencers” -the naming was still an issue.
  • Heater page: Users found it easy to understand -comments on a toggle switch feeling more natural than two buttons for on/off.
 

Mockups

 

Prototype Video

 

 

Next Steps

  • Topper product engineering.
  • User research regarding number of sleepers.
  • Smart home integration.
cas.png

MoMA

A Case Study

moma.png
 

Background

The MOMA store website sells a selection of products highlighting the latest in materials, production, and design concepts from around the world. It has 9 categories in its main navigation bar, which leads to their selection of products. 

 
 

The Problem

The MOMA store website has to make changes to keep up with retailers such as Amazon. How can we help users identify items quickly and provide a check out process that is simple, fast, and informative?

 
 

The Opportunity

I will be re-designing a clickable laptop prototype and a mobile app around an online shopping experience. My design should meet the goals of the users, the goals of the business, and the goals of the brand. I will also incorporate responsive web design and information architecture in the design and layouts. 

 

My Role and Timeline 

UX Designer, 2 weeks


User Research-Contextual Inquiries

 

My colleague and I went to the MOMA store to gain insight on potential customers. I interviewed 3 users.

KEY TAKEAWAYS:

  • Indian woman- She wanted to buy small things (toy helicopter, small plush) as gifts for her immediate family to fit in her suitcase.
  • English woman- She wanted to buy a gift for her son that had a comic book related image on it. 
  • Colorado man- He wanted to buy a possible book based on his son's interest. 
 

Persona

 

Based on the interviews and after synthesizing data from our contextual inquiries, I noticed trends, (parents buying products for their children) and I chose my persona Trung. He is similar to all the users; he is a parent buying products for his daughter.

 
 

Evaluations-Competitive and Comparative Analysis

 

We choose The Met, Neue Galerie, Whitney, and the Guggenheim as our competition. We choose Ikea and Flying Tiger as comparative models. Both analyses concentrate on design and cost; MOMA has innovative design and high in cost.

 
 

Card Sorting

 

We did open card sorting and closed card sorting with 100 items from the MOMA. Users renamed the categories from the navigation bar, and we took the labels and used them for our Sitemap.

 
 

Sitemaps

 

Using the labels from the card sorting exercise, we revised the sitemap for the MOMA shop page. The revised sitemap is more condensed and re-organized. 

 

Original Site Map

Revised Site Map


User Flows

 

We sketched out our MOMA user flow from Homepage to check out. The hero photo, main navigational bar, and search bar paths are color coded and included. 

 
 

Wireframes

 

I started the wireframes in Balsamiq. I designed the home page, product page, add to cart page, sign in page, and started the shipping process. 

 
   

  


User Testing

 

Then I did User Testing. I interviewed 3 users, there were 15 questions, and it lasted around 15 minutes.

 
   

  

 

KEY TAKEAWAYS from User Testing:

  • Secondary Navigation Bar is confusing.
  • Some text is too small.
  • What’s New tab is hard to find.

Medium Fidelity Wireframes

 

Then I moved on to medium fidelity wireframes in Sketch. I changed the header and footer (global elements), removed the bottom navigation but kept the layout the same. 

 

Laptop Mockups

 

Mobile Mockups

 

Prototype Video
 


 

Next Steps

  • Reverse main and secondary navigation bar.
  • Revise secondary navigation bar.
  • Continue working with mobile app designs.
 
moma.png