// 01 - PROJECT OVERVIEW
H-E-B'S iDEVELOP KICK OFF MEETING

The Product Owner wants to create a user experience for a Partner to register for a class in iDevelop. Partner's should easily be able to search for a class and be rewarded upon their successful completion of a class. Additionally, as an instructor I need an easy to use system so that I can manage and create classes that I teach and can close out the roster once complete from iDevelop.

MY ROLE

  • User Experience Designer

  • Create a registration process for H-E-B Partners

  • Redesign user profiles and search

  • Create a dashboard for H-E-B Instructors with my talented coworker Elizabeth Sukup

TARGET AUDIENCE

  • H-E-B Partners

  • Course Instructors

  • People with a passion for learning

PURPOSE

To improve the online experience for all of H-E-B's current iDevelop Users. Instructors faced a difficult time with managing and registering partners online for on the job training courses.

PROJECT DURATION

June 4th, 2018 - August 10th, 2018

FEATURES

  • Search Enhancement

  • Partner Registration

  • User Profiles

  • Instructor Dashboard

TOOLS USED

  • Adobe Experience Design

  • Wrike (Project Management)

  • Sketchsheets.com

2
UX Designers

2
Project Managers

4
Developers

10+
User Testers

iDevelop

// 02PROJECT RESEARCH

// 02 - PROJECT RESEARCH
UNDERSTANDING iDEVELOP'S ROOTS (H-E-B)

ABOUT iDEVELOP

iDevelop is H-E-B's new learning platform that is in in the process of becoming their leading Talent Development tool. It will be available for all 100,000+ H-E-B Partners so that they can learn and grow within the company. Here Partners will take their required courses, but also be able to search for other courses that might appeal to them.

H-E-B GROCERY

H-E-B is an American privately held supermarket chain based in San Antonio, Texas with more than 350 stores throughout the U.S state of Texas, as well as in northeast Mexico. The company also operates Central Market. As of 2018, H-E-B is ranked #12 on Forbes America's Largest Private Companies.

DESIGN CHALLENGE

The Product Owner wants to create a user experience for a Partner to register for a class in iDevelop. Partner's should easily be able to search for a class and be rewarded upon their successful completion of a class. Additionally, as an instructor I need an easy to use system so that I can manage and create classes that I teach and can close out the roster once complete from iDevelop.

H-E-B PARTNERS

All H-E-B employees are called Partners. As of 2018, there are currently 101,000 active partners serving customers in both Texas and Mexico.

H-E-B DEPARTMENTS

  • Grocery

  • Bakery

  • Human Resources

  • eCommerce

  • Public Affairs

  • Procurement and Global Sourcing

  • Quality Assurance

  • Administrative Support

  • Advertising and Marketing

  • Data Analytics

  • Finance and Accounting

  • H-E-B Own Brand

  • Information Technology

  • Legal & Compliance

  • Real Estate

  • Loss Prevention & Security

H-E-B Careers Website
https://careers.heb.com/careers/corporate/

// 02 - PROJECT RESEARCH
COMPETITIVE ANALYSIS - UNDERSTANDING COMPETITION

This part was very important for my learning process about how other companies tackle eLearning Platforms. I wanted to see what a few companies have been doing so that I can see what works and what doesn't. There are plenty of companies out there right now that could offer our team some great inspiration to get started.

UDEMY

A global marketplace for learning and teaching online where students are mastering new skills and achieving their goals

COURSERA

We envision a world where anyone, anywhere can transform their life by accessing the world's best learning experience.

PLURALSIGHT

Keep up with technology with expert-led courses, assessments and tools that help you build the skills you need, when you need them.

PROS

  • Widely known and most used eLearning Platform on the market.

  • Beautiful UI and color scheme.

  • Student and Instructor Capabilities

  • Course Reviews and Light UI

  • Instructor notifications are big.

  • Recommended categories are in plain sight and is a great feature to have.

PROS

  • Website is Responsive and has a light UI.

  • Login popup modal is nicely design and has tabs for logging in and signing up.

  • The live search feature is a nice experience.

  • Showing the schools on the landing page helps build trust with potential users.

  • Signing up is very easy with social integration.

PROS

  • Website has an interesting design style and layout.

  • Offers a 10 day free trials for users to test out their product.

  • Offers pathways, similar to what H-E-B's iDevelop will offer their partners.

  • The search updates on the fly giving you the option to choose course or path.

  • Course details, levels, ratings, duration and curriculum are shown.

CONS

  • Lacks student plans and only offers individual courses

  • Courses are not free like iDevelop will be for Partners.

CONS

  • Footer is very crammed. Needs more padding.

  • Explore dropdown shifts the entire page a few pixels over

CONS

  • Dark UI

  • Very pricey once your trial ends, even for the individual plan.

LINKEDIN LEARNING

LinkedIn's very own personalized learning experiences, courses taught by real-world professionals.

COURSETRO

We envision a world where anyone, anywhere can transform their life by accessing the world's best learning experience.

LYNDA

Keep up with technology with expert-led courses, assessments and tools that help you build the skills you need, when you need them.

PROS

  • Integrated with LinkedIn User Profiles.

  • Light UI and color scheme.

  • Free trials are offered to LinkedIn Users.

  • Recommendations, In Progress, and Saved Content on landing page.

  • Offers individual courses as well as Learning Paths.

  • Gamification (Badges, Progress Bars etc.)

PROS

  • Light UI with interesting gradients.

  • A lot of courses are free to watch.

  • Course pages have a description and curriculum displayed.

  • Very inexpensive at $9.00/month.

  • Run by a very helpful and popular YouTuber named Gary Simon.

PROS

  • Mixes a dark and light UI very well.

  • Users are given a free month trial.

  • Great use of tabs on the landing page.

  • Course and path pages are beautifully designed.

  • Users can take notes during the course.

  • Integrated with and owned by LinkedIn.

CONS

  • Once trial ends you pay up to $299.99/yr

  • Landing page banner seems very crammed together.

CONS

  • No context is given to the courses listed at the very top.

  • Search works by exact title only.

  • No learning paths offered.

CONS

  • Once the trial ends you pay $25.00 - $30.00/month

  • No public rating system for Instructors.

// 03PROJECT INTERACTIONS

// 03 - PROJECT INTERACTIONS
iDEVELOP SAMPLES OF ROUGH SKETCHES

Creating the rough sketches enables me to get my ideas in my head down on paper so that I do not forget. Thanks to a place called SketchSheets.com they allow me to have access to almost every device on paper. This makes it much easier for when I bring it into design programs for the next stages.

// 03 - PROJECT INTERACTIONS
iDEVELOP SAMPLES OF WIREFRAMES

Another important aspect of the design process is creating low fidelity wire-frames. This allows me to get the structure of a project in my design programs without having to worry much about colors, typography or the final touches quite yet... I have found wireframes to allow me to become very efficient throughout my process.

// 04PROJECT VISUAL DESIGN

// 04 - PROJECT VISUAL DESIGN
iDEVELOP USER PROFILES & SEARCH REDESIGN VIDEO

This is the part of the design process where the visual design is completed. This is where I find out my visual design languages, solidify my desired color scheme, typography, iconography and the overall look and feel of the project. Due to the sheer amount of artboards I'd have to post, I decided to create a video displaying the entire flow of each of my projects while using Adobe Experience Design.

// 04 - PROJECT VISUAL DESIGN
iDEVELOP PARTNER REGISTRATION VIDEO

OPEN ADOBE XD PROTOTYPE

// 04 - PROJECT VISUAL DESIGN
iDEVELOP INSTRUCTOR DASHBOARD VIDEO

OPEN ADOBE XD PROTOTYPE